top of page
-
Reorganization of daily headlines
-
Advertisements design
SOLUTION PROVIDED
MY STORY WITH USA TODAY
This is one of the collaborative projects I finished at USA Today on the Consumer Experience Team. Collaborating with Mark ( Product Manager), Megan (Ads Revenue Manager) and Ryan (Product Management intern), we were challenged to redesign our mobile front page and improve the reader browsing experience, including reorganizing the headlines and the placement of advertisements.
MY ROLE
UX Research
Iteration
Visual support
Prototyping
DESIGN TOOLS
Sketch
Keynote
Invision
UserTesting.com
I very appreciate a fantastic summer working with my talented colleagues, they gave me incredible supports and always respected my thoughts. Here are some good memories.
PROJECT TIMELINE
PRESENT TO ADS REVENUE TEAM
CURRENT MOBILE WEB DESIGN
Readers can only see one story, the ad takes too much screen.
It is hard for readers to catch up missed daily headlines
SOLUTION
ADDING MORE CATEGORIES
There are 11 categories in the current layout, including News, Sports, Life, Money and etc. Based on our user research, four new categories are added to the main menu, which are Must read, Recently breaking, Popular and Most recent. They can satisfy users different needs to catch up the news they are interested in.
The methods for creating the content of the four new categories
Must read: Our editors' picks
Recently breaking: Time
Popular: The number of readers
Most recent: Time
CAROUSEL
A card style carousel is used for organizing the headlines. It has eight horizontally scrollable stories.
STICKY ADVERTISEMENTS
In the first view of the new design, readers only see a sticky ad which will stay at the top of the page as you scroll through.
300*250
The size that USA Today uses on its front page now
414*150
The size that readers will see in the new design
414*780
The size that actually displays the advertisement
DESIGN PROCESS
DESIGN PROCESS OVERVIEW
DESIGN PROCESS OVERVIEW
I used the Two Diamond Design Method for this project, it divided the design process into four stages: Discover, Define, Develop and Deliver.
The model illustrates that to discover the best ideas, the creative process should be iterative, which means the ideas should be developed, tested and refined a number of times, with the weak ones dropped out in the process.
DISCOVER
DISCOVER
Market Research
Important findings
-
Keep in mind that users tend to begin scanning from the top of the page, and resent having to scroll past a lot of chrome to get to the information they actually want to read. Thus, we need to not only consider the overall content-to-chrome ratio, but also ensure that helpful information is prioritized nearer to the top of a page in order to grab people's interest and supply them with the information related to their task as soon as possible.
-
Not surprisingly, the larger an advertisement, the more disruptive it is. On a small device, a vertically large ad consumes far too much valuable space, displacing the main content.
-
The median age of those who visited any newspaper website in the past month is 41.4. Those who used a mobile device to engage with newspaper media have a median age of 38.6. And those who use only a mobile device exclusively for newspaper digital content—not a desktop or laptop computer with a median age of 34.7.
Competitive Research
Based on our research about our main competitors, we found there are six design elements which are most used: Sorting, Big images, Bold texts, Sectioned categories, Carousel, Labels.
User Feedback From Opinion Lab
Ads
Navigation
Comment
Performance
Design
Other
On our desktop website, there is an area called Opinion Lab where the users are able to submit their feedback or questions about USA Today. We collected the feedback over the period of 2 weeks and classified them into six groups.
In-person User Interview
We interviewed 15 news products users to know about their thoughts about our brand and product, also know about their ideal mobile website browsing experience. Here are some important feedback from our users:
1/5
Interview Ads Revenue Team
The next step is, we interviewed Megan, who is the Ads Revenue Manager and an expert in Ads. Because we wanted to change ads, we needed to know how USA Today collaborate with investors, how to decide which sizes of ads to use, how to decide where to display ads, etc. She gave us some very useful references and important knowledge about ads.
1/5
The users finds it hard to quickly catch up on the news today.
INSIGHTS
INSIGHTS
The users want the advertisements to be organized smarter.
The users want to see more stories in the first view.
SPECIFY THE CHALLANGE
SPECIFY THE CHALLENGE
I narrowed down the challenge to a specific pain-point:
Make readers get daily news quickly and easily, at the same time, decrease the reading disruption caused by ads.
BRAINSTORMING
IDEATION
Sorting headlines
By organizing headlines in limited space to improve the user experience of the first view of the mobile homepage, the users would be able to cath up the daily headlines quickly and easily.
Adding more categories
Based on the user research, four new categories are added to the main menu, which are Must read, Recently breaking, Popular and Most recent. They can satisfy users different needs to catch up the news they are interested in.
Auto-changed ads gallery
Sorting headlines make the users stay longer on the headlines, which also add their time to see the ads. The ads are changed every ten seconds. The benefit of this design is increasing the revenue by displaying more ads, also keeping the full size of the ads, which our advertisers like.
SOLUTION PROPOSAL
SOLUTION PROPOSAL
SOLUTIONS
Solution 1
Half screen Carousel+Half screen Ads gallery
This solution will completely change user habit. They don't need to scroll way down to find the stories they are interested in. It implements a carousel to lift important content (8 articles) of each category into a condensed area based on criticality.
Why are the ads changed
automatically?
In my new design, I moved all headlines in different categories to the carousel, which means I cut down the length of the homepage. In the original design, there are three 300*250 ads and three 250*50 ads inserted. However, there is not enough space to insert the ads like before. Revenue is an important element I should pay attention to.
Carousel makes readers spend more time on the top of the screen, which gives us more time to show different ads.
Solution 2
3/4 screen Carousel+1/4 screen ad
The first ad on the home page is at the bottom will expand from 250*50 to 250*300 when users scroll up
Why these categories in the menu?
In order to give more screen for stories on the first view page, I used the small size of ad. However, according to the information from Ads Revenue Team, advertisers like the ads in 250*300, it also has influence for our revenue, of course we charge more for big size ads. An expandable ad is the solution which can make users, advertisers and USA Today happy.
Moreover, animated ads can attract more attention from readers, which makes them see the ads.
Why use expandable ads?
SOLUTIONS ANALYSIS
SOLUTIONS
SOLUTIONS ANALYSIS
SOLUTION 1
Pros
-
Decrease users time to catch-up missed headlines
-
Navigation is easy to use
-
Increase income by display more ads
-
Keep the most popular size of ads in the first view page
Cons
-
Navigation is completely changed, users need more time to get used to it, and potentially lose some users
-
The size of the ad is still too big for users, especially for the first time users
SOLUTION 2
Pros
-
Small size of ad obviously improves the user experience, especially user-friendly for the first time users
-
Users get more stories
Cons
-
Advertisers may not like the size of the ad
-
Less space to display the content of the ad
-
More work for developers.
User Interview
PROTOTYPE
PROTOTYPE AND INTERACTION
SOLUTIONS
Solution 1
Solution 2
More exploration about the interactive ads
INTERNAL DISCUSSION
INTERNAL DISCUSSION
SOLUTIONS
We had the internal discussions and voting for the two solutions. Solution 2 is the winner because we all believe it is easy to implement and keeps a better balance about the user experience and commercials.
USER TESTING
SOLUTIONS
USABILITY TESTING
I used the usertesting.com for usability testing. I also interviewed 25 users in a shopping mall and heard about their thought about the new design.
Positive feedback
-
Overall, users like the new version of the mobile webpage. They thought the navigation is clear, it was easy for them to find the news they were interested in.
-
They were positive about the display of the ads, they thought the ads didn't disrupt their reading experience.
-
They like the carousel becuase it shows a lot of content, it is scrollable, users can check the “must read” without clicking the whole section so they can stay on the homepage.
-
The ad is a solid block so it attracts users' attention easily.
-
They like to look at the ad.
What can be improved
-
Label categories in different colors.
-
Let users easily find that the carousel can be scrolled horizontally.
VISUAL DESIGN
UI KIT
SOLUTIONS
#009BFF
#F8F8F8
#666666
FIRST AD DESIGN GUIDLINE
SOLUTIONS
FIRST AD DESIGN GUIDELINE
414*780
414*150
-
The 414*150 ad should show the most important information about the ad, such as company name, price, ad main content, etc.
-
Using solid color as the background color.
bottom of page