bannerbanner

THE BRIEF

USA TODAY is a reputable news source that reaches an older demographic and sports fans, however, misses out on an opportunity to expose a younger audience to relevant news content.

Our goal is to reimagine the cultural and lifestyle publication that promotes and maintains engagement through an entertaining, interactive media consumption experience, leveraging USA TODAY's existing journalistic reputation.

Client

School Project, working with Partners & Napier

Role

Group Project, UX Design, Visual Design, Interaction Design, Prototyping

Duration

12 weeks, Spring 2017

[unex_ce_button id="content_0nv15abvx" button_text_color="#353535" button_font="regular" button_font_size="14px" button_width="auto" button_alignment="center" button_text_spacing="2px" button_bg_color="#ffffff" button_padding="15px 60px 15px 60px" button_border_width="2px" button_border_color="#353535" button_border_radius="0px" button_text_hover_color="#7841e5" button_text_spacing_hover="2px" button_bg_hover_color="#ffffff" button_border_hover_color="#7841e5" button_link="http://aml8069.cias.rit.edu/wordpress/wp-content/uploads/2017/07/LungLee_USATODAY_deck_07.pdf" button_link_type="url" button_link_target="_blank" has_container="1" in_column=""]View Project Deck →[/ce_button]

FEATURES

USA Today can capitalize on this generation's affinity for mobile devices, and reaffirm their relevance as the go-to news source.

Features like sharing, skimming, and custom saving are second nature to this generation, so we focused on those interactions.

The features that I took ownership over were BeastMode, Custom Sharing, designing the article page, and collaborating on the home page. My fabulous teammate and I worked side by side, providing each other with a fresh pair of eyes and someone to bounce ideas off of. While this project was a team project, we both explored our own features from sketch to final comps.

Beast Mode

FOR THE ON-THE-GO

People don't read articles fully anymore, they rely on skimming pull quotes and images.

Acknowledging your busy context, Beast Mode provides a quick, digestible way to get your daily news.

 

Get the rundown in a flash ⚡️

Users can opt into this feature, and when they do, we let them know what they are getting into. 

From there, it's as easy as swiping through key excerpts and pull quotes to get the full gist of the article, without having to spend more time than you have.

USER FLOW

beast mode flow - beast modebeast mode flow - beast mode

Customized Sharing

FOR THE OWNER

This generation likes to take ownership over things that they share to social media because it is a digital representation of themselves.

Whether it be through custom text or image, the ability to empower the user to customize their shareable encourages them to take control over what they share.

 

Take control over the snippets you share 🎨

This feature gives you control over the content that lives in your social media. We want to give you the ability to add your personal touch to the content that lives on your profile.

Customize colors, filters, change the text to something more your style, and when you've shared the post, see it in action.

USER FLOW

beast mode flow - share (1)beast mode flow - share (1)

THE MAKING OF

Interested in how this project came to fruition? Keep on scrolling and learn about the in's and out's.

01 UNDERSTANDING

To align ourselves on this project, my teammate and I worked hand in hand on the research and analysis portion. Before we could get our hands on the pixels, we conducted a user survey, thorough competitive analysis to evaluate digital news in the wild, a current state breakdown, as well as a UI pattern library exercise.

- USER SURVEY

What do you get when 55 news consumers walk into a user survey...

We interviewed 55 individuals on their news habits, preferences, dislikes, and behaviors. After distilling down the results, we found the following:

 

Why?

People find themselves reading the news when it's relevant to them, to stay up to date, or based on friends recommendations/sharing.

 

What is important?

Relevance, source, and use of media were found to be the most important factors of an article to our user survey participants. Individuals were also influenced by if factual information was presented with evidence.

 

How & When?

Users primarily use their mobile devices to catch up on the news. Prime times for news consumption is in their free time and in passing from point A to B.

 

Sharing

We learned that there are three types of sharers. The "shares all the time", "shares rarely", or "never shares" type of folk. The "shares all the time" individuals find themselves sharing articles primarily through messaging and secondly to social media.

- COMPETITIVE ANALYSIS

Sneaking up on our opponents, to take them by storm.

Combing through the ethernet of news, culture, and lifestyle products, we acquainted ourselves with the space and the UI patterns that are standard to these products. We looked at products like Refinery 29's This AM, Bloomberg, Flipboard, Medium, and Vox and found these takeaways:

 

Successes:

  • modern design and up-to-date branding that reaches the target audience
  • Flipboard & Medium: Users control their experience and curate their own content

 

Opportunities:

  • Foster trust between the user and the application
  • Provide a more seamless experience going from web to mobile

02 STORIES, CASES, & FLOWS

Goals and research in hand, we set out to create user personas that would guide us and keep us honest in designs. We explored their motivations, how they would use the lifestyle application, and guided our use case and flows.

Josephine, 20

Josephine is a fashion blogger who is always on the lookout for the latest trends. While commuting to her job on the busy subway, she makes it a point to scroll through her Instagram and scans through her fellow fashion blogger's sites. She's an avid user of social media platforms and uses them to advertise and broadcast her thoughts about the latest trends.

Ashley, 27

Ashley has taken on planning her own wedding. She wants to stay up to date with current trends and anything relevant to her planning needs. As a nurse, she is very busy and has extremely long shifts. Her lunch and commute are her only free times to collect content to inspire her wedding plans.

Pete, 35

Pete is a creative in the tech world. He likes to stay up to date and find inspiration on the latest and greatest. As an obsessive email checker, he never misses a beat. His is extremely organized and thoroughly enjoys expanding his knowledge on any and all subjects.

03 VISUALS, IA, SKETCHES

We established a visual style together, before taking ownership of our separate features. After establishing a visual style and a clear information architecture, we went our own ways concepting and pushing our own features, coming together for critiques and talking through issues.

- STYLE GUIDE

stylestyle

- INFORMATION ARCHITECTURE

Information Architecture - 20170220 IAInformation Architecture - 20170220 IA

- SKETCHES

- WIREFRAMES

- FINAL COMPS

compscomps

Thanks for checking this out!

Like what you see? View my other projects below →

[unex_ce_button id="content_98w866c19,column_content_09koc4l06" button_text_color="#000000" button_font="semibold" button_font_size="15px" button_width="auto" button_alignment="center" button_text_spacing="2px" button_bg_color="#ffffff" button_padding="15px 60px 15px 60px" button_border_width="0px" button_border_color="#ffffff" button_border_radius="0px" button_text_hover_color="##29403A" button_text_spacing_hover="2px" button_bg_hover_color="#ffffff" button_border_hover_color="#ffffff" button_link="http://aml8069.cias.rit.edu/wordpress/work/humans-vs-zombies/" button_link_type="url" button_link_target="_self" has_container="" in_column="1"]Previous Project:
Humans vs. Zombies[/ce_button]
[unex_ce_button id="content_98w866c19,column_content_h4badzjj5" button_text_color="#000000" button_font="semibold" button_font_size="15px" button_width="auto" button_alignment="center" button_text_spacing="2px" button_bg_color="#ffffff" button_padding="15px 60px 15px 60px" button_border_width="0px" button_border_color="#ffffff" button_border_radius="0px" button_text_hover_color="#007aff" button_text_spacing_hover="2px" button_bg_hover_color="#ffffff" button_border_hover_color="#ffffff" button_link="http://aml8069.cias.rit.edu/wordpress/work/circles/" button_link_type="url" button_link_target="_self" has_container="" in_column="1"]Next Project:
Circles[/ce_button]