UI/UX Case Study
Case study: Designing a Spotify for news app
A step-by-step process of taking an idea from wireframing to app launch
Brief: Newseon creates digestible, industry-specific audio playlists that can be listened to anytime, anywhere.
Design Process
- Empathize: Define client needs; conduct user interviews
- Define: Define problem statement
- Ideate: Create brand guidelines
- Prototype: Finalize brand guidelines and high-fidelity mockups
- Launch: Soft launch; iterate before a wider Product Hunt launch
Empathize
Client Needs
The client wanted to launch an MVP on Product Hunt as soon as possible in order to validate the idea and the business model. This meant limited resources, a limited budget, and a much tighter design philosophy. The list of deliverables included:
- A polished Brand Guidelines document
- High-fidelity mockups of the mobile app (should look consistent across iOS and Android)
- Mockup screenshots and Thumbnails for Product Hunt listing
We also delivered a product video ad for the launch as a bonus.
User Research
We started off by talking to 25 individuals with diverse backgrounds, industries, life goals etc.
Our goal was to connect with the users 1-on-1 and really understand what they care about. Investigating their daily habits, the music they listen to, their goals in life were all part of the interview.
Good design takes a user’s present state and helps them get to their desired final state
Key quotes from users
“Google keeps showing me news based on the things I search for.”
“The amount of information out there is overwhelming; I can’t keep up.”
“I want to read more so I can do more, but I just don’t have the time.”
We used Notion and their awesome Table View to organize our findings.
The goal of good design is not to look pretty but to bring the user closer to his/her goal.
Define
Problem Statement
Users are not happy with their current way of consuming news.
Is there a way we can build a more personalized news product that can fit better into a busy work lifestyle?
Identify Pain Points
We identified recurring themes from our conversations with users.
- News articles are too long. There is not enough time to read and retain information.
- There are not many articles with valuable content. The headlines are mostly clickbait. The read-to-value ratio is too low.
- Users are bombarded with irrelevant content.
- Endless content prevents user satisfaction; new content appears with every page refresh.
Goal
- Present the most useful and relevant content. 80/20 principle. 80% of the benefit should be felt by users with 20% of the work.
- A limited number of stories.
- Publish from reputable sources.
- Should be accessible hands-free.
Our Proposal
Build an app with a consistent look and feel to work on Android and iOS called Newseon.
We will build curated playlists of news articles similar to Rap Caviar as a music playlist on Spotify; the playlists will be focused on different interest groups.
We call the users that listen to at least 3 playlists, activated. Our success metric would be the number of people activated, measured week over week.
My role and team
I worked as the Lead Interaction and Visual Designer and Shagun Kazan worked on UX.
Ideate
Moodboard
With this mood board, we wanted to capture the spirit of an individual itching to change the world for the better. The idea of Newseon is to be a necessary tool for those who dare to think differently.
Define User Personas
Reading through the collected research, we created 2 personas that closely resembled the type of customers Newseon would be most useful for.
Andy Lane, 28
The business professional who wants to effortlessly consume relevant news topics in the shortest amount of time.
Works in a reputable firm as a Tech Consultant. In constant contact with mid-range enterprise customers.
Married. Lives in Toronto.
- Personality: Outgoing, loves to socialize. Concerned about User Data Privacy.
- Interests: Regularly listens to Apple Music. Subscription to NY Times and The Economist.
- Brands: Spotify, Android, H&M.
- Motivations: To be a knowledgeable individual in a group. Be informed about the up and coming technologies.
- Frustrations: Hard to set aside time to read the news. Information overload.
- Influenced by: Co-workers, Digital News Networks.
Sarah Roberts, 24
Studied Psychology. Freshly graduated. Has a significant student loan.
Single. Lives in NYC.
- Personality: Introverted, has a close circle of friends.
- Interests: Regularly listens to Spotify. Instagram and Snapchat user.
- Brands: Apple Music, Starbucks, Instagram.
- Motivations: To start her own business. Wants to influence the world.
- Frustrations: Overwhelmed by gender inequality in the work culture.
- Influenced by: Friends, Instagram.
Branding Guidelines
Once we defined our target personas, we put together a strong brand story with the colour #5000FF being the primary element.
The full Branding Guidelines document is available here.
Prototyping
Wireframing
We went through dozens of wireframe mockups. In the end, we settled on something that felt simple and intuitive to use.
High Fidelity Prototype v1
We then translated the wireframes into high fidelity prototypes.
The Journey of Ideal User
We engaged in the process of understanding how a user in a real-world situation might interact with the app. Becky Chung was nice enough to model for us.
Launch Day!
The real test is always in the wild.
The original design was launched on Product Hunt on 20/04/2019. It didn’t do so great. But we received a lot of great feedback which helped us get through the second iteration.
Things that worked
- A clean interface without big distractions made users feel less overwhelmed.
- Users were most active around 8–10 AM and 4–6 PM on the weekdays.
- The audio experience was preferred over reading during the commute.
Things that didn’t work
- Google Text-To-Speech was too robotic.
- The UI interface felt too bland.
- Could not play audio in background mode.
We went through the ideation phase with the client again and came out with a more fleshed-out design. In the second iteration, the UI looked more familiar to those using Apple Music and Spotify. In the end, this redesign was much better received. The activation rate jumped from 30% to 75%.
High Fidelity Prototype v2
We also shot a Youtube ad (Bonus!). Credits to Jason Tang for helping us film.
I’m now building my next startup Engyne that helps B2B SaaS startups grow using SEO & Content Marketing. Try free for 14 days!
