Curate
Mobile App / UX/UI Design / Branding / Testing
CURATE
Curate is an app for entertainment lovers that will help users track books, film, and TV shows that they have already consumed, or they want to consume next. The app will also give recommendations based on their interests. Curate strives to ensure the user stays up to date with all their passions so they never miss a beat.
OBJECTIVES
Design an end-to-end mobile app
Create the brand, including logos, color palette, and typography
TIMELINE
2 weeks, 40 hrs/week
MY ROLE
Solo student project for DesignLab
User Research
Information Architecture & User Flows
Wireframing
Logos & Branding
UI Design
Usability Testing
1. EMPATHIZE
I started this project with a research plan for both primary and secondary research. Here are the research goals I created based on the brief and objectives:
Learn what users are currently doing to track things they want to consume in the future.
Determine how users stay up to date with things happening in entertainment.
Understand the most popular types of media and what factors are relevant for each.
Research pain points involved with finding new things, staying up to date, and tracking media that users have consumed.
Figure out the process a user goes through with each type of media - discovering, consuming, and tracking.
See how much weight users put into reviews, and whether they write or read them.
INTERVIEWS
I recruited participants for interviews from my network of friends, family, colleagues, and classmates.
# of participants: 3
Ages 26-29
Summary:
Different types of media were favored, and different genres, but all participants require relevant information and enjoy discussing with others.
Needs: relevant information, reviews, real-time updates, curated recommendations.
Pain points: multiple subscriptions, remembering recommendations, investing time.
Desires: seeing what friends are consuming and discuss, reading article reviews, awareness of things they’ve previously consumed, reading books more, never missing anything, being part of a larger discussion.
“A lot of people talk about podcasts or TV shows at work so I usually listen or watch those so I can join in.” - Heather
MARKET RESEARCH
I conducted secondary research via a literature review into young people and their media habits to learn more. This is what I found:
Young people today have all types of media at their fingertips, with 94% of them owning a smartphone.
They spend 18 hours a day consuming some type of media, and check their phones 43 times per day - 5.4 hours of this is on social media.
60% have a streaming service like Netflix, and 71% have a music streaming service like Spotify.
68% of millennials binge watch TV (3+ episodes in one sitting), mostly drama & comedy. 90% multitask while watching TV.
Most read 5 books per year on average, and prefer books in print to digitally.
COMPETITIVE ANALYSIS
I researched some direct and indirect competitors to learn more about their strengths, weaknesses, and features.
2. DEFINE
The second stage began with compiling my research findings to define a user persona that would display the needs and behavior patterns that were found in the research.
USER PERSONA
Based on the user research, I created a user persona that fit within the most common hybrid adopter archetype. This persona kept be user-focused as I headed toward designing the app.
USER JOURNEY MAP
I created a user journey map to visualize the user’s process when using the app to be reminded of their thoughts and feelings along the way, and uncover opportunities for the design.
APP MAP
I created an app map to envision the layout and hierarchy of the various screens and features. It also helped me focus on the essential user flows that I would have to design for.
TASK FLOW
I created a couple task flows that explore the main function of the app when the user first downloads and uses it. The recommender feature will be a unique offering that adds value to the app so I wanted to map out the flow of how to get there and use it.
USER FLOW
Then I created a more complex user flow that shows different routes and actions our persona could take while exploring and using the app for the first time. The different colored arrows represent different flows, depending on whether the user decided to engage with onboarding, adding something to their list, creating an account, or linking another account to Curate.
3. IDEATE
Once I had identified the key user flows, screens, and features I’d need, I began sketching different ideas, followed by wireframes and polished UI designs.
SKETCHES
I created a few different versions of the app but ultimately landed on the below sketches for the first version of the app, taking the user through all the main features.
WIREFRAMES
Building on my sketches, I created wireframes using Figma for the main features and screens of the app to help me lay all the elements out on a grid and visualize the flow in more detail.
BRANDING
Before starting on the UI designs, I wanted to solidify the branding by creating a style tile including a color palette, typography, and brand new logos. I decided to go for a “dark mode” look which a lot of entertainment streaming services use and users are becoming familiar with. I wanted the brand to feel expert, cool, informative, and timely. Due to the high contrast in background and text colors, all color combinations are compliant with accessibility standards.
UI DESIGNS
I created polished UI designs for the main screens in the flow, bringing the wireframes and the style tile together to create the bones for the Curate app. This includes onboarding, the user’s list, a media profile page, search feature, rating capability, a curator chatbot for recommendations, an identifier tool using photo or sound, the user’s settings/account, and integration with other accounts the user has like Netflix.
4. PROTOTYPE
I created a prototype using Figma to give the app a real feel, focusing on the interactions and processes the users would face as they go through the app for the first time.
5. TEST
Using the Figma prototype, I completed usability testing to test the whole end-to-end app for Curate to see how real people would interact with the interface, and what areas could be improved. I used the Figma Mirror app to make the Curate app feel as real as possible.
USABILITY TESTING
# of participants: 3
In person using the Figma Mirror app
Ages 27-31
Summary:
Positive feedback toward the UI, brand, and overall concept
Testers were able to learn and go quicker with each subsequent task
Biggest hangup was with the phrasing of “bookmark”, “past”, “current”, and “next” - the actions and categories were very unclear to all testers
The bottom navigation icons were not immediately clear to testers even after learning what they were
Integrating Netflix was easy, but none of the users knew what would happen as a result
“So I guess I’d add this to my current list. Like I haven’t read or seen it yet.” - Catherine
AFFINITY MAP
I created an affinity map to organize all the usability testing feedback. These are split into positive or negative feedback, and the third column includes recommendations for updates with prioritization. The feedback is color coded depending on what part of the app it relates to. This helped me to decide what was a priority revision to move forward with.
6. ITERATE
Based on the findings from usability testing, I prioritized the top revisions and updated the designs.
REFLECTION
This project involved the most self-directed and design process for me. With so few constraints, I really had to stick to the timeline I had set for each stage and deliverable in order to stick to a realistic scope for the project.
Since this was my first end-to-end app design, the app map and user & task flows were extremely important to get down so I could make sure to cover all the screens and interactions necessary to realistically use the app.
The most interesting part of this design process was usability testing and seeing very specific areas where users got confused, and improving those process to be as clear as possible.
NEXT STEPS
This is what I’d prioritize if I had more time to work on the project:
Re-test the new phrasing for adding items to their lists to see if they are understood better
Do research on how to take TV features to the next level - i.e. notify users when their shows are back on air, when shows are playing live, how they can watch, etc.
Create the community feature so users can recommend things to each other
Test again!