Example Mobile UX Case study
This is a fictional case study example of a mobile news feed application, called News Blast framed as a case study. If you want more details on how to layout a case study, check out this article: https://uxdesigncasestudy.com/ux-case-study-layout/
Mobile New Feed App
Designed a news feed mobile application for a publishing startup.
Conducted user research, prototyping, and created wireframes and mockups for final delivery.
⭐️ 5 star app reviews in the app store.
Local news apps represented the lowest amount of app usage, but in a different survey, was the highest rated in what users were most interested in.
Our team saw this as an opportunity to address this need.
Sketching & Ideation
I sketched out some ideas quickly to create some early concepts that I can use for paper prototyping, to gather some customer feedback.
After iterating through sketches, I created a paper prototype to test with some potential customers to validate the product ideas.
I created this prototype, after some rounds of feedback from the paper prototype.
I recreated some of the flows using InVision- the hotspots work in this prototype.
• New for you carousel
• Topic pages
I tested my prototype with customers, and received some great feedback. I iterated through each round of tests, incorporating feedback on the fly. Here’s the synopsis of feedback.
• Users liked varied content in their feed
• Friend shares was preferred
• Relevance and personalize content over “popular”
Information Architecture Map
I created a simple navigation, with the key areas: New, Trending, and Profile. New and Trending reflected aggregated local news and content sources.
Based on the research and customer feedback, I tried out different layouts, and different ideas. Here’s a few approaches.
In this exploration, I wanted to use the first carousel to highlight popular articles and combine it with topic modules, and trending magazines.
• Popular articles are driven from how many reads and shares the article has, not by relevance or personalization
• Topics/Interest modules populate at various times to continuously gather interests over time, to tune their feed
In this exploration, I categorized the popular articles into collections with a single topic. Articles are also presented as a list.
• Popular “collections” of articles
• Article lists
We learned customers prefer relevance and personalization over the most “popular” content. The final design focused on the user’s favorites and preferences, but with the goal of encouraging discovery.
Discovery Focused Modular Design
Overall Design Goals
The goal of the design was to create a content rich feed with discovery features, and continuously surface topic selection modules to keep learning.
The modular design, enables us to create a flexible design driven by historical behavior.
The layout focuses on personalization, and relevance to ensure the user is always seeing content they want to see.
Community engagement is driven by granting members the ability to curate, and create magazines to encourage engagement.
Discover New Things
While the feed is heavily influenced by relevance, our goal is to keep introducing new topics to discover.
The mechanisms for this are: topic modules, popular articles, and auto generated collections.
These were the key screens I created. I did both the visual and interaction design, and used standard iOS elements for the iconography.
Main content feed
Drill-in from Collection tile
High level flows for key screens
Animations and prototypes
I created a scale effect for the article, as it comes into view, to add some visual interest, and reinforce the view has changed.
I created this prototype in Keynote.
The mobile app shipped with glowing reviews on the app store. Here’s a comment, and the overall rating.
This is my new go-to app! I always find amazing content from people in my community to keep everything relevant.