Anatomy of a UX Case study layout
Let’s walk through a fictional example of a mobile news feed application, called News Blast framed as a case study.
Section 1: Provide a project overview
Frame the design problem, process, and results in a quick summary. You also want a screen from the final product, so your audience has some context of the project. 👇🏼
Mobile New Feed App
PROJECT DETAILS
Designed a news feed mobile application for a publishing startup.
DESIGN PROCESS
Conducted user research, prototyping, and created wireframes and mockups for final delivery.
RESULTS
⭐️ 5 star app reviews in the app store.
Section 2: Set up the design problem
If it’s a redesign, show before screens. If it’s a new design, show us the problem that users had by not having it. 👇🏼
Design Problem
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.
Section 3: Show your process
Show that you have arrived at your design using a user-centered process. Methods and approach will vary on each project.
Provide a visual summary of how you approached the design challenge. 👇🏼
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.
Let’s keep going on process, and show more.
Paper Prototyping
After iterating through sketches, I created a paper prototype to test with some potential customers to validate the product ideas.
Did you notice that? 👆🏼
📲 Prototypes showcase interactivity.
Anytime you talk about prototyping, even if it’s paper- Show your work. Create a video or a gif of how the prototype works, link the prototype if it’s hosted somewhere.
Here’s an example showing an interactive InVision prototype. 👇🏼
Interactive Prototyping
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.
KEY INTERACTIONS
• New for you carousel
• Topic pages
Section 4: Customer focused
Let’s bring the user into the user-centered process. This can be through data, actual live research, or usability testing. Depends on the project. 👇🏼
Customer Feedback
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.
KEY LEARNINGS
• Users liked varied content in their feed
• Friend shares was preferred
• Relevance and personalize content over “popular”
All right, let’s move on to finalizing the design.
Section 5: Creating flows and mapping the experience
🗺 You may need a flow map, IA map, or customer journey map.
It depends on your project. Either way, you’ll want to capture the overall architecture of the design at this point. 👇🏼
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.
Section 6: Interface design iteration
Now you show your wireframes, visual design, anything that relates to the final layouts.
Be specific about your role, and what you did. If you didn’t do the visual part, say that. If you didn’t do the research, you can say that too. 👇🏼
Design Iterations
Based on the research and customer feedback, I tried out different layouts, and different ideas. Here’s a few approaches.
Iteration 1:
In this exploration, I wanted to use the first carousel to highlight popular articles and combine it with topic modules, and trending magazines.
KEY CONCEPT:
• 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
Iteration 2:
In this exploration, I categorized the popular articles into collections with a single topic. Articles are also presented as a list.
Key Concept:
• Popular “collections” of articles
• Article lists
Section 7: Design Approach
You’ve shown us your iterations. Now tell us why you’ve decided on the design you did. Describe the User Interface, so the audience can understand your design thinking👇🏼
Design Approach
After customer feedback, we learned that 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.
Show us your design thinking.
Describe with detail:
• Why you chose the layout you did
• What business rules are driving it
• Any technical constraints or feedback from your users used as an input
👇🏼
Discovery Focused Modular Design
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.
KEY PRINCIPLES
Customer Focused
The layout focuses on personalization, and relevance to ensure the user is always seeing content they want to see.
Driving Community
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.
Section 8: Final design
Now it’s time to show your final work. All final mockups/wireframes, everything high fidelity. No tiny mockups. Your work needs to be seen 🌟.
Include prototypes or links to final design work that’s shipped. Anything to show it was final. 👇🏼
Final Design
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
Trends page
Article page
Drill-in from Collection tile
High level flows for key screens
Animations and prototypes
Carousel
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.
Section 9: Results
So what happened? You did all this amazing work- did it ship? Were there improvements? Was there a happy customer?👇🏼
Results
The mobile app ship to 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.
5.0 Stars
The launched app has an average of 15 minutes of in-app engagement, which exceeded our target metric of 10 minutes.
You’re done!
This is the basic structure of a UX case study. Your methods may differ from each project, because every design problem has a unique problem set. But your focus on the customer, design solution, and results should be in every case study.
Read Next: Organizing your UX portfolio