DONGYI
ZHANG
Stela App 2020
Project Brief
Stela, a subscription based comic reading app. Most of the content from the app are original made by in-house writers and artists. In this project, I will show the process of designing a new payment model for Stela App.
Timeline 6 weeks
Role Product Design
Methods IA mapping, Wireframes, Prototype, Usability testing, UX Flow, UI design
Tools Lucidchart, Figma, AdobeXD
Problems and Goal
The Problem
After pilot launch, data showed us that the consumption speed of contents in the app is much faster than the content production speed. Eg, an average-length chapter of a comic or graphic novel on Stela app will take 30 days to produce but a reader can finish reading it in about 3 mins. As to technical constraints of comic or graphic novel content development, the content growing speed won’t be able to catch up customers’ fast consumption speed.
The Goal
Objective was to balance content consumption needs versus production constraints, and maximize business benefits while building great customer experiences.
Outcome
Understanding Users & Stakeholders
We conducted surveys, interviews and brainstorm sessions to learn stakeholders and users pain points, opportunities and insights.
"when it comes to comics..."
For reading comics on mobile phone, readers aren't willing to commit to a subscription plan immediately.
Readers are looking for quick and easy way to have a bite on the content first before paying.
Readers wants more flexible paying options to fit their specific reading needs when deciding to purchase contents.
90% current subscribers subscribe for only one or two comic titles and only closely follow up these stories, rarely following other stories.
"Why and why not subscription?"
The subscription model Stela employed right now is $9.99 per month to get access to all content in the app. It helps build customers' loyalty, but it speeds up content consumption, limits extra monetization of existing contents and makes it harder to grow revenue for the company.
Explore Potential Solution
The research made it clear what's the business needs and how different users would consume the app differently. After summarizing the information from user interviews and data analysis, It was the time to sketching different solutions to help business and users.
What we tested
After team discussion We decided to go with solution A and I completed the whole user flow and wire frame to have tests with out target users.
Usability Testing Results
1. People don't understand
I surprisingly found that the "redeem" concept is too complicated and the progress bar is not clear to convey the idea to reader.
this was a typical user reaction
2. People don't like it
Once customers found they only can read 1 chapter everyday, they become frustrated
How about merging them into one ?
After some brain storming with founder and product manager and low-fi wireframe user test, we decided to combine the subscription model and the rental model.
Users can choose subscribe for 3 month or one year to get all content in the app. They also can choose to rent the books they want. Customers have 30 days to start reading and 72 hours to finish it after start reading.
NEW FEATURES NARRATIVE
1. Rent a single book or volumes
Customers can choose the comics they are specific interested in to rent. Meanwhile, since some of comics have a lot of chapters. We decided to split them into several volumes.
2. Subscribe for 3 months or 1 year
Users can still choose to buy a 3-month pass or 1-year pass to have access to the unlimited content in Stela app.
3. Customize your library
All the comics could be added to collection, rentals and wishlist. Customers can build their own library to get what they want efficiently.
UX Flow
Creating UX flow helps me to understand the whole user journey and discover all the screens. Based on feature narrative, I began to construct the user experience flow, taking into consideration the following:
1. First time user, renting experience
3. Return user(rented), reading experience
2. First time user, subscribe experience
4. Return subscriber, reading experience
Mid-Fidelity Wireframes
Before starting creating a high fidelity visual design and any other implementation, I created prototypes to test the solutions with users and understand how the new solutions works.
Design Exploration
As new UX introduced following new payment model, the layout, hierarchy and "call to action" of the series info page needs redesign following existing design system.
I started by auditing the existing UI with old payment model to identify what needs to change when new payment model employed.
1. Two tabs for series info and chapters
Merge them into one page would make it flow more direct and simple.
2. Chapters condition
Try to make"read, unread, last read" conditions more clear through different type setting.
3. The position and size of the button
Those 3 buttons are too small to act on and position could compete too much with new CTA buttons
First Proposal
After I presented this proposal, I got the feedback from founder, PM and our target users. Major complains including, first, too many call-to-actions button clustered on one screen, causing confusion and hurt user experience; Second, the lack of hierarchy of the page layout makes it hard to navigation through the page. So my next action was to simplify layout and adjust hierarchy.
Second Proposal
In this iteration, the page is simple and clean. There is now only ONE Call-to-Action button on each screen and the hierarchy leads the eye easily navigate through the page.
But new problems are challenged including, first, I missed adding ' expiration date' to the UI as new payment model will require; second, the horizontal volume layout interrupts the vertical navigation flow of the page.
With those questions and thoughts, I made further explorations of the page layout and finalize the high fidelity UI design as below.
High-Fidelity Design
Style Guide
Interaction Design
Measuring the Success
According to first Usability test results, we decided to run A/B test for market place screen and test this experiment with a small group of users to evaluate if this new payment model performs better.
To measure the success of this test we define to track
-
First interaction count, how well does the new payment model offer attract attention.
-
Checkout success rate, measure how many customers finish the rental checkout process or subscription purchase.
What I have learned from this project?
As the product designer in this project, I take on a variety of research, design thinking and product management responsibilities. This end-to-end design experience gave me a good learning on thinking product design in as a whole and looking into every detailed action in the user flow. Everyday I came across new problems and challenges and I kept asking, discussing, learning and quickly iterating.
I found keep doing different tests and validating the ideas before launching any features could save a lot design loopholes at early stages. And to defining a proper measurements for success is one of the keys to validate the design solutions.
For complex UX problems research is a must. I couldn’t have designed a product users love without the help of the people who will actually use it. The user interviews and usability tests revealed unexpected insights.