Unfold Case Study | Juan Jacinto
The average Millennial gets 74% of their news from online sources. My colleague and I tackled the challenge of designing news for this unique generation.
Our solution: Unfold.
Overview
Millennials have instant access to news through computers, cell phones, and social media. The news is no longer a task they have to go out of their way for; it is just a part of a Millennial’s daily life. The overload of news options has made it difficult to determine what is credible and unbiased. Anyone can publish their opinions by starting a blog or posting on social media.
Through my research, I found that this generation has unique goals and challenges when keeping up with the news. Most of these goals and problems are not being addressed.
Challenge
The challenge was to design a news app for Millennials. I was to design around the feelings and understandings of a generation focused on change. The project timeline was five weeks.
My Role
The team consisted of two UX/UI designers, Mike Ludwikoski and myself.
My role in the project was:
- User Interviews & Survey
- Creative Brief, User Stories, and Personas
- Sitemap and Sketching
- High-Fidelity Designs and Wireframes
Project Deliverables:
- Creative Brief
- User Interviews, Surveys, Competitive Analysis
- Persona, User Story Map, Sitemap
- 10x10 Sketches, Wireframes, High-fidelity Mockups, 2 Interactive Prototypes (wireframe prototype and high-fidelity prototype)
Design Process
I followed a human-centered design process with my focus being on the user’s needs, goals, and pain points. My design process was about empathizing, defining, ideating, prototyping, and testing.
Research
Survey
I wanted to gain more insight into Millennials and their relationship to news, so I created a survey asking these five central questions:
1. Where do you mainly consume your news?
2. What do you like/dislike about your current news options?
3. Where are you when you consume news?
4. What topics do you like to stay updated on?
5. How have you determined if a news source is reputable?
User Interviews
After receiving 18 survey responses, I began conducting in-person user interviews. I asked the same survey questions, and the responses were similar. Patterns in the research started becoming evident. I analyzed the data and began defining Millennials’ goals and pain points.
Defining Pain Points
1. Millennials feel like the news is too sad.
2. Millennials consume news quickly and on the go.
3. Millennials are frustrated by the biased news.
4. Millennials do not question the reputability of news if it’s coming from a “popular source.”
Persona
I compiled my research to create a persona outlining the goals and pain points of Millennials. I would refer to my persona Paul Cruz when a difficult design decision would arise. This tool would help remind me that I am designing to solve real people’s problems. When thinking of adding a feature, I’d look back to my persona and ask myself if this feature would help solve the problem.
Approach
Ideation
I brainstormed possible solutions to address each pain point.
1. Millennials feel like the news they are seeing is too negative.
Hypothesis: Allowing users to select the type of news they want to receive would help them avoid ‘negative’ news.”
2. Millennials want to consume their news quickly.
Hypothesis: Allow users scan several pieces of content at once and give them a way to quickly digest the content.
3. Millennials are frustrated by the biased news and don’t feel like they get the full story.
Hypothesis: Allow users to find content on the same subject from different sources.
4. Millennials tend not to question news if it is coming from a “reputable source.”
Hypothesis: Give Millennials content they trust by featuring reputable news sources.
User Story Maps
I created a user story map to prioritize features for the MVP. I referred to my persona and got rid of ideas that were not addressing the problems I previously defined.
My colleague and I would often ask ourselves, “How would this help our persona, Paul Cruz?” By referring back to the persona, I took my opinion out of the equation and focused on the user’s problems and needs.
Information Architecture
To get a better idea of the design’s structure, I created a sitemap. I wanted to understand how each component would communicate with the others.
Solution
Sketches
I started sketching what these solutions would look like visually. I used a sketching method called 10x10’s (crazy 8’s), and here I sketched out ten iterations of each idea that would come to mind. To produce as many ideas as possible, I would sketch out even the craziest ideas. The purpose was to be prolific and create as many sketches as possible. After sketching, my colleague and I went through each sketch and discussed which would work best for our users. The final ones were then selected based on our conversation.
Wireframes
With the sketches as a starting point, I began building the wireframes. These early designs gave me perspective on the structure of the app. Wireframing was helpful because I could quickly iterate on ideas.
Wireframe Prototyping
I created a prototype in InVision and conducted several usability tests. I had users complete a list of tasks to test the navigate of the app. The user testing led to some interesting findings.
Wireframe Usability Testing
Here are some of the patterns found in the usability testing
1. Couldn’t find the breaking news section.
2. Were distracted by the various features on the article screen.
3. Enjoyed the personalized news bubbles.
4. Were confused by the related stories in the article section.
I began iterating on the design with these usability testing patterns in mind.
Usability Testing Iterations
Breaking News
Users struggled to find the “breaking news” section. The trending and breaking news sections were so similar that I merged both sections.
Articles
Designing the article page was challenging. There were a lot of features that needed to fit on the screen, and it was difficult to keep decluttered. Users were confused by the options to bookmark, share, send, and comment on an article. They couldn’t figure out the difference between share and send. The confusion kept them from sharing the article. To solve this problem, I merged the send and share features. Now users can send articles through the messaging feature and share articles by tapping on the same icon.
Related Stories
While on the article page, users were distracted by related articles. I moved the “related articles” section below the article they were currently reading and this proved to be less distracting to the user.
High-Fidelity Mockup
I created the high-fidelity mockup in SketchApp. Since I was designing for younger users like millennials, my goal was to add a modern and fun feel to the design. Millennials are more comfortable using smartphones than other generations. Because of this, I knew I had more leeway when designing complex features. I had this in mind when creating the “interest bubbles” shown below. Although I had more freedom with the design, I didn’t want to get carried away with the complexity of it. I still wanted to keep the app useable.
High-Fidelity Prototype
Below is a video of our interactive high-fidelity prototype. The prototype was built in Framer by my colleague Mike Ludwikoski.
Retrospective
If I were to revisit this project, I’d want to spend more time defining the problem. I would have also liked to have not gotten caught up in the wireframes and instead dedicate more time to other aspects of the process. I would also add more white space and declutter some of the pages a bit more.
My skills were challenged when:
- The project’s scope was too big, and I had to figure out which features to remove.
- The UI had too much going on. I had to figure out how to keep the same functionality with a clean and decluttered design.
