ABC7 News Website Redesign

Size: px

Start display at page:

Download "ABC7 News Website Redesign"

Reynold Leonard
5 years ago
Views:

1 ABC7 News Website Redesign

2 Table of Contents 01 Project Introduction 02 Competitive Analysis 03 Target Audience Research 04 User Flow 05 Wireframe + User Testing 06 Visual Design & Prototype

3 01 Project Introduction

01 Project Introduction ABC7 News KGO-TV, virtual and VHF digital channel 7, is an ABC owned-and-operated television station licensed to San Francisco, California, United States and serving the San

4 01 Project Introduction ABC7 News KGO-TV, virtual and VHF digital channel 7, is an ABC owned-and-operated television station licensed to San Francisco, California, United States and serving the San Francisco Bay Area. The station is owned by the ABC Owned Television Stations subsidiary of The Walt Disney Company. KGO-TV's studios are located at the ABC Broadcast Center in downtown San Francisco north of the city's Financial District, and its transmitter is based at Sutro Tower. Project Overview: Reclassifying the layout allows users to have a faster and more efficient browsing experience, which is consistent with today's user browsing habits. More unified visual identification system, enhance brand identity and recognition to cover more user groups who live in the San Francisco Bay Area. 03

5 02 Competitive Analysis

6 02 Competitive Analysis Heuristic Evaluation ABC7 News San Francisco Chronicle Los Angeles Daily News The Washington Post The Atlantic Competitive Audit San Francisco Chronicle The Atlantic The Washington Post 05

7 02 Competitive Analysis Heuristic Evaluation Heuristic evaluation Visibility of system status Match between system and real world User control and freedom Consistency and standards Error prevention Recognition rather than recall Flexibility and efficiency of use Aesthetic and minimalist design Help users recognize, diagnose, and recover from errors Help and documentation 06

02 Competitive Analysis Competitive Audit (SF Chronicle) The layout of the webpage is clear and clean, and the user can make the selection and identification area

8 02 Competitive Analysis Competitive Audit (SF Chronicle) The layout of the webpage is clear and clean, and the user can make the selection and identification area efficiently. There are also lots of columns to distinguish between different news areas, and they work well with headlines and summaries of news. Big popular news area 07

9 02 Competitive Analysis Competitive Audit (SF Chronicle) The website integrates most of the options and features into the humburger button, keeping the page clean as much as possible, and making it easy for users to find them. Organized options 08

10 02 Competitive Analysis Competitive Audit (The Atlantic) The website has a clean and powerful page layout, although the AD area is also in a comfortable position for users, and they don't have influence and block users to browse the news too much. 09

02 Competitive Analysis Competitive Audit (The Atlantic) The website's single news pages also have good spaces between images and titles and other

11 02 Competitive Analysis Competitive Audit (The Atlantic) The website's single news pages also have good spaces between images and titles and other information, and there are reasonable comparisons between different information and elements. Humanized design, adjust the font size to suit different users 10

02 Competitive Analysis Competitive Audit (The Washington Post) The Washington Post, as a well-known news media, has continued its vitality in today's transition from paper newspapers to Internet

12 02 Competitive Analysis Competitive Audit (The Washington Post) The Washington Post, as a well-known news media, has continued its vitality in today's transition from paper newspapers to Internet media. This website has a unified style and a very good visual recognition system, which is completely close to the style and layout of its publishing newspaper, and particularly familiar and friendly to its users. 11

13 02 Competitive Analysis Competitive Audit (The Washington Post) Absolutely cool reading experience, it's not just like browsing the news on a regular news site, it's like reading a magazine or an electronic book, that's what users want. 12

14 03 Target Audience Research

Browse entertainment news Check the traffic Watch the news

15 03 Target Audience Research User Profile College Student Uber Driver Local Residents Look for job opportunities Browse entertainment news Check the traffic Watch the news broadcast Check weather forecast Concern for security concerns 14

16 03 Target Audience Research Aletta Yang / College Student Age: 21 Occupation: Undergraduate Student Status: Single Location: San Francisco, CA Persona: College Student Bio Aletta Yang is an international student from China who is now studying in San Francisco. She is an undergraduate majoring in fashion, and she often uses mobile phone. She is interested in learning about the neighborhood news about the San Francisco Bay Area, but she is more interested in entertainment news. She also looks forward to finding some internships and community activities or related information on the news media platform. Personality Extrovert Introvert Sensing Intuition Thinking Feeling Judjing Perceiving Frustrations Cannot find interested news very quickly Cannot find related job opportunities recommended Cannot find any community activities Goals Needs to find job opportunities recommended Needs to find some community activities Needs to quickly find interested news Technology Usage Software Mobile Apps Social Networks Others 15

17 03 Target Audience Research Aletta Yang / College Student Age: 21 Occupation: Undergraduate Student Status: Single Location: San Francisco, CA Persona: College Student Workflow 1 Find job opportunities and community activities Workflow 2 Find interested news Sections Education Single News Sections Entertainment Single News Homepage 16

18 03 Target Audience Research Matthew Wallin / Uber Driver Age: 35 Occupation: Uber Driver Status: Married Location: Redwood City, CA Persona: Uber Driver Bio Matthew Wallin lives in Redwood City, and he is the father of two girls. He drives Uber in the San Francisco area five days a week because he can pick up more guests in San Francisco to make more money. In order to bring more help to his family, he is also working part-time to deliver food for a Mexican restaurant in addition to driving Uber. So for his work, traffic jams are a problem that he cares most about. He also likes to listen to radio and watch news broadcasts during his breaks. Frustrations Cannot check traffic conditions very well Cannot simply find the news broadcast Goals Needs to quickly and easily check current traffic Needs to find news broadcasts simply Personality Extrovert Introvert Sensing Intuition Thinking Feeling Judjing Perceiving Technology Usage Software Mobile Apps Social Networks Others 17

19 03 Target Audience Research Matthew Wallin / Uber Driver Age: 35 Workflow 1 Occupation: Uber Driver Check current traffic conditions Status: Married Location: Redwood City, CA Persona: Uber Driver Workflow 2 Find news broadcasts Traffic 1 Traffic Details 2 Watch News Broadcasts 1 2 Homepage 18

20 03 Target Audience Research Kevin s Family / Local Residents Age: 47 / 39 Occupation: Accountant / Housewife Status: Married Location: San Francisco, CA Persona: Local Residents Bio Kevin's family is an immigrant from Hong Kong, China. Kevin and her wife have lived in San Francisco's Sunset District for more than a decade. They have a 5-year-old daughter. They are concerned about the security concerns of the San Francisco Bay Area, as well as government policies and political news. They also hope to see the weather forecast on the news website, which affects their travel. Personality Extrovert Introvert Sensing Intuition Thinking Feeling Judjing Perceiving Frustrations Cannot check weather forecasts in detail and easily Cannot quickly identify news categories Cannot follow website guidelines very well Goals Needs to quickly check the weather forecast Needs to clearly identify news categories Needs a better website guidance system Technology Usage Software Mobile Apps Social Networks Others 19

21 03 Target Audience Research Kevin s Family / Local Residents Age: 47 / 39 Occupation: Accountant / Housewife Status: Married Location: San Francisco, CA Persona: Local Residents Workflow 1 Check weather forecasts in detail and easily Workflow 2 Find political and social news Weather Weather Details 2 1 Sections California / Politics Single News Homepage 20

22 04 User Flow

23 04 User Flow Brainstorming Review 22

24 04 User Flow User Flow College Student Homepage Weather Traffic Watch Local News Categories Weather Details Traffic Details News Broadcasts Local News Details Category Page Single News 23

25 04 User Flow User Flow Uber Driver Homepage Weather Traffic Watch Local News Categories Weather Details Traffic Details News Broadcasts Local News Details Category Page Single News 24

26 04 User Flow User Flow Local Residents Homepage Weather Traffic Watch Local News Categories Weather Details Traffic Details News Broadcasts Local News Details Category Page Single News 25

27 04 User Flow Site Map Primary Secondary Tertiary Quaternary 26

28 05 Wireframe + User Testing

29 05 Wireframe + User Testing Wireframe ABC7 News Search Homepage (Desktop) SECTIONS TRAFFIC WATCH San Francisco East Bay South Bay Peninsula North Bay Weather Popular Latest How you can own Avengers cast s self-portraits The "Avengers: Infinity War" cast drew sketched their characters during commercial breaks during "Jimmy Kimmel Live!" over the past week. Texas town holds.5k - not 5K - for underachievers (Shutterstock) Happy Birthday, blue jeans! Fantasy Family Photos POPULAR NEWS HOT NEWS STAY CONNECTED Blandit Runtruum, Erat et Blandit Runtruum, Erat et Sagittis. Sagittis. 6,800 fans 12,475 flowwers Subscribe ABC7 News Blandit Runtruum, Erat et Blandit Runtruum, Erat et Sagittis. Sagittis. WATCH LIVE Blandit Runtruum, Erat et Blandit Runtruum, Erat et Sagittis. Sagittis. Blandit Runtruum, Erat et Blandit Runtruum, Erat et Sagittis. Sagittis. ADS SPOT LIFE STYLE Blandit Runtruum, Erat et Sagittis. 28

30 05 Wireframe + User Testing Wireframe Homepage (Mobile) Search ABC7 News SECTIONS Texas town holds.5k - not 5K - for underachievers (Shutterstock) POPULAR NEWS Blandit Runtruum, Erat et Sagittis. Blandit Runtruum, Erat et Sagittis. 29

31 05 Wireframe + User Testing Wireframe ABC7 News Search Category Page (Desktop) SECTIONS TRAFFIC WATCH San Francisco East Bay South Bay Peninsula North Bay Weather Home \\ Categories \\ Sport News Popular Latest STAY CONNECTED Blandit Rutrum, Erat et Sagittis. Lorem Ipsum Dolor, Sit Amet Adipsing Blandit Rutrum, Erat et Sagittis. Lorem Ipsum Dolor, Sit Amet Adipsing 6,800 fans 12,475 flowwers Subscribe ABC7 News 26 May, 2017 \\ Sport News \\ No Coments 26 May, 2017 \\ Sport News \\ No Coments WATCH LIVE Blandit rutrum, erat et egestas ultricies, dolor tortor Blandit rutrum, erat et egestas ultricies, dolor tortor egestas enim, quiste rhoncus sem purus eu sapien. egestas enim, quiste rhoncus sem purus eu sapien. Curabitur a orci nec risus lacinia vehic. Lorem ipsum Curabitur a orci nec risus lacinia vehic. Lorem ipsum dolor adipcising elit. Erat egestan sagittis lorem aupo dolor adipcising elit. Erat egestan sagittis lorem aupo dolor sit ameta, auctor libero tempor... dolor sit ameta, auctor libero tempor... Blandit Runtruum, Erat et Blandit Runtruum, Erat et Sagittis. Sagittis. ADS SPOT Blandit Runtruum, Erat et Blandit Runtruum, Erat et Sagittis. Sagittis. Blandit Runtruum, Erat et Blandit Runtruum, Erat et Sagittis. Sagittis. Blandit Runtruum, Erat et Blandit Runtruum, Erat et Sagittis. Sagittis. Blandit Runtruum, Erat et Sagittis. Blandit Runtruum, Erat et Sagittis. RECENT POPULAR COMMENTS Blandit Rutrum, Erat et Sagittis Adipcising Elit 26 May, 2017 \\ Sport News \\ No Coments Blandit Runtruum, Erat et Sagittis. Blandit Runtruum, Erat et Sagittis. Blandit Rutrum, Erat et Sagittis Adipcising Elit 26 May, 2017 \\ Sport News \\ No Coments Blandit Rutrum, Erat et Sagittis Adipcising Elit 30

32 05 Wireframe + User Testing Wireframe Category Page (Mobile) Search ABC7 News SECTIONS Home \\ Categories \\ Sport News Popular Blandit Rutrum, Erat et Sagittis. Lorem Ipsum Dolor, Sit Amet Adipsing 26 May, 2017 \\ Sport News \\ No Coments Blandit rutrum, erat et egestas ultricies, dolor tortor egestas enim, quiste rhoncus sem purus eu sapien. Curabitur a orci nec risus lacinia vehic. Lorem ipsum dolor adipcising elit. Erat egestan sagittis lorem aupo dolor sit ameta, auctor libero tempor... Latest 31

$05 Wireframe + User Testing Wireframe ABC7 News Search Single News (Desktop) SECTIONS TRAFFIC WATCH San Francisco East Bay South Bay Peninsula North Bay Weather Home \\ Sport News \\ Single News STAY$

33 05 Wireframe + User Testing Wireframe ABC7 News Search Single News (Desktop) SECTIONS TRAFFIC WATCH San Francisco East Bay South Bay Peninsula North Bay Weather Home \\ Sport News \\ Single News STAY CONNECTED 6,800 fans 12,475 flowwers Subscribe ABC7 News WATCH LIVE Blandit Rutrum, Erat et Sagittis. Lorem Ipsum Dolor, Sit Amet Adipsing 26 May, 2017 \\ Sport News \\ No Coments Lorem ipsum dolor sit amet, consectetur adipiscing elit. In sodales dapibus dui, sed iaculis metus facilisis sed. Etiam scelerisque molestie purus vel mollis. Mauris dapibus quam id turpis dignissim rutrum. Phasellus placerat nunc in nulla pretium pellentesque. Aliquam erat volutpat. In nec enim dui, in hendrerit enim. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Vivamus at tortor at est mattis aliquam non id est. Quisque pretium suscipit faucibus. Fusce vestibulum mollis interdum. Duis a nibh at odio aliquet varius. Pellen tesque feugiat nulla nec ipsum suscipit ut varius elit posuere. Nunc tellus urna, viverra ac porta ac, com modo et libero. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae Pellentesque ullam corper nisl id justo ultrices hendrerit. Vivamus dignissim ultrices erat, vitae placerat ligula lacinia non. In arcu nunc, aliquet a condimentum et, tempor eget nisl. ADS SPOT Allen Chu Lorem ipsum dolor sit amet, consectetur adipiscing elit. In sodales dapibus dui, sed iaculis metus facilisis sed. Etiam scelerisque molestie purus vel mollis. Mauris dapibus quam id turpis dignissim rutrum. RECENT POPULAR COMMENTS Blandit Rutrum, Erat et Sagittis Adipcising Elit RELATED NEWS 26 May, 2017 \\ Sport News \\ No Coments Blandit Rutrum, Erat et Sagittis Adipcising Elit 26 May, 2017 \\ Sport News \\ No Coments Blandit Rutrum, Erat et Sagittis Adipcising Elit 32

34 05 Wireframe + User Testing Wireframe Single News (Mobile) Search ABC7 News SECTIONS Home \\ Sport News \\ Single News Blandit Rutrum, Erat et Sagittis. Lorem Ipsum Dolor, Sit Amet Adipsing 26 May, 2017 \\ Sport News \\ No Coments Lorem ipsum dolor sit amet, consectetur adipiscing elit. In sodales dapibus dui, sed iaculis metus facilisis sed. Etiam scelerisque molestie purus vel mollis. Mauris dapibus quam id turpis dignissim rutrum. Phasellus placerat nunc in nulla pretium pellentesque. Aliquam erat volutpat. In nec enim dui, in hendrerit enim. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Vivamus at tortor at est mattis aliquam non id est. Quisque pretium suscipit faucibus. Fusce vestibulum mollis interdum. Duis a 33

35 05 Wireframe + User Testing User Testing Script ABC7 News Web link: GOALS OF THE TESTING Check whether the user flows clearly and accurately. Whether users can quickly see the weather and traffic conditions and find the location of the news broadcast. Is the layout of the website consistent with the user's usage habits? Presentation format and font legibility on different screen size of devices TESTING SETUP, REQUIREMENTS6 & DETAILS Site to Test : Timing: Testing Set up: at least 3 users, more is always better INTRODUCTION KGO-TV, virtual and VHF digital channel 7, is an ABC owned-and-operated television station licensed to San Francisco, California, United States and serving the San Francisco Bay Area. The station is owned by the ABC Owned Television Stations subsidiary of The Walt Disney Company. PRETESTING QUESTIONS 1. What is your name? 2. What is your gender? (a) Male (b) Female 3. What is your age range? (a) Under 20 (b) (c) (d) (d) 51 or above 4. How would you self rate your experience in using the Internet? Beginner Expert 5. Do you often read news or are you interested (a) Yes (b) No (c) Maybe 34

36 05 Wireframe + User Testing User Testing Script 6. What type of news do you like or often see? (a) Most popular (b) Local (c) Sports (d) Entertainment (e) Politics (f) Others 7. Where will you read the news? (a) Newspaper (b) Website (c) Television 8. What do you hope to see on a news website? (a) Weather forecast (b) Traffic condition (c) Job opportunities (d) Local news (e) Others 10. Does this wireframe guide you to find exactly what you want? (a) Yes, very clearly (b) No, very confused (c) Maybe, can be better 11. Can you accurately find traffic conditions, weather forecasts and news reports? (a) Yes (b) No (c) Maybe 12. Can you clearly read the text on different devices? (a) Yes (b) No (c) Maybe 13. How is your user experience Terrible Excellent 9. What will attract you to continue to browse a news page? (a) Good user experience (b) Clear guidelines (c) Clear page layout (d) Attractive news TEST CONCLUSION Thank you for your answer and help, they are very useful for me. 35

37 05 Wireframe + User Testing High Levels Finding Through testing, the three investigators are interested in reading news and often browsing news sites and platforms, so they have a certain amount of experience. They are most interested in local news and entertainment news, and they are also interested in seeing weather forecasts and traffic conditions on news websites. Good visual guidance and a clear website layout will encourage them to continue reading news. They all think that the wireframe can clearly guide them to find the news they want, but the size of some fonts are not very comfortable for them to recognize, and some spaces do not maintain unity. 36

38 06 Visual Design & Prototype

39 06 Visual Design & Prototype Homepage (Desktop) Homepage (Tablet) Homepage (Mobile) 38

40 06 Visual Design & Prototype Category Page (Desktop) Category Page (Tablet) Category Page (Mobile) 39

41 06 Visual Design & Prototype Single News (Desktop) Single News (Tablet) Single News (Mobile) 40

42 06 Visual Design & Prototype Comparison Redesign ABC7 News Current Website 41

43 06 Visual Design & Prototype Comparison Redesign ABC7 News Current Website 42

44 06 Visual Design & Prototype Comparison Redesign ABC7 News Current Website 43

45 06 Visual Design & Prototype Mockup View website: 44

Meaning through design

Functions of design Meaning through design Ø attracts audiences Ø guides readers through the publication Ø communicates how to prioritize content and how to search for information Ø addresses the readers