HatoPost
A media/journalism application designed for the modern-day user.
Role
UX Researcher, UI/UX Designer
Tools
Sketch, Adobe Illustrator, InVision Studio, Miro
Duration
1 Month
Problem
With the growing online consumer base, more companies are shifting to digital mediums. 81% of Americans own smartphones and nearly three-quarters of U.S. adults now own desktop or laptop computers, while roughly half now own tablet computers and roughly half own e-reader devices. With the move to digital media products, consumers have more autonomy over the content they read. HatoPost is a hypothetical media journalism startup that has built its user base by offering a freemium (free premium) product. Due to its successful business growth, the company plans to design a premium service in addition to its existing free service.
OBJECTIVE
Design a solution to market users the option to opt for a premium subscription while maintaining its current freemium user base.
Discovery
RESEARCH
To gather more information on the topic, I sent out a questionnaire with the following questions:
What age group do you fit in?
What digital subscription service(s) do you currently use? (i.e. Netflix, Spotify, New York Times, etc)
What determines your choice of paid subscription for the services listed above?
What do you not like about the current subscription service(s) you use?
How was the process to subscribe to said digital service(s)? What was easy to understand? What was confusing?
What is the process to unsubscribe from your current subscription(s)? What did you like or dislike about this process?
I’ve gathered these key insights from 23 responses:
When it comes to picking a subscription service, most people choose a product because of convenience, none to minimal ads, price, and the amount of content provided
Some users noted that they enjoy being able to download resources and have them available for them offline
“I like it when I’m able to bookmark and download articles for later.”
Items in the product must be presented in an easy-to-understand fashion
“The things that I want are right there in front of me.”
The subscription and unsubscription process should be easy to understand and streamlined
I also did some competitive analysis on The New York Times, The New Yorker, and Spotify. Click here for my insights on that.
AFFINITY MAP
I took the information gathered from the questionnaire and mapped them out into an affinity map.
PERSONAS
I generated two personas from the information gathered from the research, Solo Reader and Shared Reader.
SOLUTIONS
I gathered the following solutions from my research:
Give users the freedom to switch between free service and paid premium at anytime
Clearly define the differences between free plan vs paid plan
Content must be organized and easy to navigate between categories
Give the user freedom to organize their content to their own collections
Design
USER FLOWS
After completing the discovery phase, I created two user flows of the red routes I wanted to focus on:
New user signing up for a free plan
Returning user switching to a paid premium plan
SKETCHES
I drew inspiration for my initial sketches from the information gathered from the competitor analysis and questionnaire synthesis. I drew up the Onboarding flow, Subscription flow, Home, My Stories, Topics, and More Actions pages.
Low Fidelity Wireframes
I transformed the sketches into grayscale low fidelity wireframes. I focused on creating the screens for the user flows: creating a free account, upgrading a free account to a premium account, and switching a premium account back to free.
1ST ROUND OF USABILITY TESTS
I performed the first round of usability tests on a prototype using the low fidelity screens to identify any usability issues and gather feedback on the product. The tests were conducted remotely between 5 different users.
I asked the users to test 4 different scenarios:
You are a first-time user of the application. Navigate through the pages available for someone without an account.
Create a free account.
Upgrade your free membership to a paid premium account.
Switch back to a free membership.
Key Highlights
⅘ users were confused between the difference between “Cancel Subscription” and “Cancel Membership” in the Membership screen and which one meant to cancel their premium membership
Recommendation: Change “Cancel Membership” to “Delete Account”⅖ users mentioned that they’d prefer to see their feed on the “Home” page first rather than have to click “My Stories”
Recommendation: Move Feed to Home page and add tabs to switch between “Feed” and “Today’s Stories”One user asked how the feed works if you have no account
Recommendation: Only show feed for people with accounts, those with no account see a “This page is only available for users with accounts” message
BRAND STYLE GUIDE
I chose a pigeon as my brand in reference to its history as news messengers back in the day. The brand name is a combination of pigeon in Japanese (鳩 = Hato) and post (as in post office). The brand colors were closely referenced from the primary colors of pigeons (making the bolder colors as the primary colors to give it more personality). I created the logo myself using Adobe Illustrator as a way to challenge myself in logo creation. I chose Apercu as my font as I needed a clean and readable text for the articles.
High Fidelity Wireframes
Based on feedback received from the usability tests, I iterated on my high-fidelity designs and incorporated elements of the style guide. “Cancel Subscription” and “Cancel Membership” were updated to “Manage Subscription” and “Delete Account” to avoid confusion. The Feed was moved to the home page from My Stories for easy access and only users who have accounts should be able to view their own personalized feed.
2ND ROUND OF USABILITY TESTS
I performed the second round of usability tests on a prototype using the high fidelity screens to identify any usability issues and gather feedback on the product. The tests were conducted remotely between 4 different users.
I asked the users to test 4 different scenarios:
You are a first-time user of the application. Navigate through the pages available for someone without an account.
Create a free account.
Upgrade your free membership to a paid premium account.
Switch back to a free membership.
Key Highlights
Most users expected to not be able to save articles in “My Stories” when accessing the page with no account
Recommendation: Create a blank state for when a user with no account accesses “My Stories”⅖ users noted that it would be nice to have a search feature or filters in “My Stories”
Recommendation: Add a search button and a “Sort By” dropdown in “My StoriesOne user noted that it would be nice to condense the articles on the homepage to be able to view more
Recommendation: Add a “View As” button to toggle between large previews and small previews
UPDATES
Following the feedback gathered from the 2nd usability test, updates were made on the Feed page to add a “View As” toggle for the articles, added a Sort By dropdown in My Stories, and added a blank state page for users that access the page without an account.
Retrospective
I created a product that increases transparency in subscription models and curates a feed for the user’s interest. I learned a lot and discovered a lot of interesting insights from each design iteration. Some major takeaways I’ve gathered are:
User interviews provide the most information
While questionnaires are great to gather information quickly, user interviews provide much more information that could get missed from questionnaires.
Prioritize key business features
Don’t try to clutter the application with too many features that could confuse the user and cause clutter.
User feedback is crucial
Usability tests can show usability pain points that can go missed at first glance and show common trends by users that could be useful in the design process.