whipik | mobile app rebuild
Redesigning the mobile app of a short-story media platform to improve order content discovery and navigation experience
overview
Whipik is a short-story media platform with an aim to promote cultural diversity in the content publishing industry through immersive storytelling.
Whipik’s current MVP is available on the Apple app store, but the company is looking to relaunch their app.
My team was tasked with analyzing this version of the app, and rebuild and improve upon its features. Our primary goal was to improve Whipik’s user navigation and content discovery.
timeline: 3 weeks
role: project leader, ux researcher, ux/ui designer
tools: figma, figjam, google slides, google sheets, zoom, pen & paper
1. learning what to tackle
With Whipik’s existing user data, they discovered that their content was not as intuitive or appealing for consumers.
Whipik did not yet have metrics of in terms of user experience, and that’s where my team and I stepped in. We needed to take a closer look at users’ impressions and experiences with the original mobile application.
Whipik’s original mobile app
Whipik’s original mobile app was presented to 5 participants on a mobile device. They were requested to complete specific tasks on navigating to specific categories and stories.
Usability task results:
5/5 users were unsure of the type of media (e.g., e-book, podcast)
5/5 users were confused by some of the wording (e.g., meaning of term “batches”)
3/5 users wished suggestions was more personalized
3/5 users regarded “likes” and “comments” as unhelpful references in selecting a story
The overall user journey of the original Whipik app was generalized on the below journey map as a way to visualize the user’s interaction with the product and pinpoint specific areas of frustration. Note multiple points of confusion regarding searching for stories and understanding app features. These issues presented as clear barriers for users, and I knew that these areas, and potential others, needed to be further explored in order to improve this mobile app.
Journey map of Whipik’s original mobile app
2. exploring the issues
In order to gain more information on Whipik’s current information architecture and navigational experience, I also conducted a comprehensive heuristic evaluation of Whipik’s mobile app using Nielsen’s 10 principles.
Several challenges and opportunities to improve were uncovered, specifically in the areas of efficiency of use and aesthetic design (e.g., lack of auto-fill options in the search bar and unreadable text due to color contrast). Other significant heuristic findings are condensed in a spreadsheet in the below graphic.
Among the below graphics, you will also find a condensed comparative and competitive feature analysis with brands such as Wattpad, Medium, Instagram and TikTok. When analyzing their homepages, content, and navigation, research showed that these established and popular brands each included features such as a discovery page and the ability to create a user profile and share content with other users within the app.
Condensed heuristic evaluation for Whipik’s current mobile app
Condensed comparative & competitive feature analysis
Reviewing Whipik’s current usability challenges and feature analysis allowed my team to move forward with solution ideation. In order to meet our goal of improving Whipik’s content discovery and navigation, I guided the team in prioritizing certain functions and features that would help Whipik users engage with their mobile app.
With further research, it was decided that the below features would make Whipik more usable and competitive as a mobile application.
Competitive mobile app features:
Ability to rate stories and other content
Use and explore a discover page based on their interests
Find personalized suggestions on their home page
Share stories with other users within the app
View other user profiles
Receive notifications (new stories that interest them, suggested stories from friends, etc.)
Create content directly from the home page
Save story directly from the home page
I then designed and distributed a user survey, targeting individuals who are between the ages of 16-26 who were familiar with the above competitors. Our 29 survey respondents were globally located, from countries such as the United States, Germany, Nigeria, and the Netherlands and they came from a wide range of ethnicities (e.g., Asian, Black, White, etc.).
We learned the following information from our set of users:
Users often utilize reading and listening mobile apps such as Libby, Kindle, Spotify, Apple Podcasts, etc.
Users gravitate towards personalized content, which also keeps them on the mobile app longer
Users enjoy passively engaging with content (e.g., listening to stories while driving or doing chores)
Users seek out authors and content creators of underrepresented backgrounds to learn more about these cultures
User interview takeaways
5 respondents agreed to an in-depth interview on their mobile app use, habits, and impressions. The following synthesis of their interviews gave crucial information in terms of the direction of our project.
Below are themes strongly heard throughout the user interviews, signaling that these are user priorities when engaging with a content-based mobile app.
How Might We’s
These integral takeaways provided us pertinent information on what users would want out of an engaging mobile app experience. We then turned them into solid How Might We statements before ideating on solution hypotheses using our previous research gathering.
How might we provide personalized content to users?
Show curated suggestions based on user preferences
Craft an explore page tailored to users
How might we simulate a low-effort experience in terms of consuming content?
Easy and intuitive navigational experience
Less steps in achieving each user goal
Removing extra steps
Provide more information upfront
How might we create a reliable way for users to discover trusted story recommendations from other story lovers?
Easy-to-see rating system from users
Access to other users’ profiles, reading lists, people they follow
Create a method for users can share content with other users within the app
How might we showcase underrepresented authors?
Create recommended lists showcasing these authors on home page
Include information in author’s “about me” page and “author’s note” if relevant
Our user persona, Olivia, took form from the voices of our user interviews in terms of their goals and pain points. The HMW’s were created to cater to Olivia and provide solutions to her frustrations.
3. design, design, & more design
With all of our research in what Whipik functionally and aesthetically required, we then put our ideas into design. Through processes of sketching and creating wireframes, mockups for an improved Whipik app were created. I specifically collaborated in design for the home page and story card, and independently created the explore page. After creating prototypes, new usability tests were conducted to better understand the user’s perspective and to refine areas to meet the users’ needs.
These concepts were iterated upon and then implemented into our final mockups and prototypes. Below, you will find specific changes made to Whipik’s home page, story card page, explore page, and search page.
According to user feedback, we then prioritized:
Efficiency in accessing story details
Use of intuitive and universal icons
Emphasizing author’s note and background
Home page adaptations
Story card adaptations
Explore page adaptations
4. tada - the final product!
Using data and feedback from the usability tests, we designed the high-fidelity prototype of Whipik’s mobile application through Figma. Below, you may find specific design features and elements that have been redesigned from the previous website.
Watch the high-fidelity prototype videos below for a closer look at selecting stories and exploring the mobile app.
Be sure to take note of the updated primary navigation, efficiency in selecting objects, new options of choosing colors or multiple items, as well as a minimalistic design.
Updated home page and story card
Updated explore page
5. what’s next then?
Thanks for joining me on this journey! This project was only a 3-week sprint, and if given more time, I would have explore deeper into existing and potential features. Here are some thoughts of how I’d change my process or what I would work on next.
Onboarding
Provide an extensive onboarding process for first-time users to explain the purpose of the app and give users more options to select and filter tailored content
Create a story
Provide easy and accessible method for users to write original stories
“Create” icon is accessed in navigation bar
May help lowering the barrier for users to write stories
Author onboarding flow would start here for first-time authors
Give authors prompts and ideas to jumpstart their creativity
Notifications page
This page will accumulate updates on:
Followed creator’s stories and collection
Comments and replies on stories
Ratings and reviews on creators’ stories
Users have the option to tailor notification settings