DONGYI
ZHANG
Stela App 2.0 Rebranding
PROJECT BRIEF
Stela app is a subscription based comic reading mobile applications on iOS and Android. The App streams a growing library of original comics and mbooks to its reading community on demand.
Along with the business growth and repositioning of the product on the market,
the company needs a new look of its mobile app 2.0. Here I would like to show
my work on the new design of Stela App UX/UI and logo.
Timeline 6 weeks
Role Product UX, UI design, Visual direction, Copywriting, PM
Methods IA mapping, wireframing, prototyping, usability testing, UI/UX design, Visual design
Tools Lucidchart, Zeplin, Sketch, Adobe XD, Photoshop, Illustrator
2.0 NEW LOGO
VISUAL SYSTEM
2.0 UXUI DESIGN & PROCESS
APP 1.0 IA Map Auditing
I started with mapping out the IA of Stela App 1.0 to understand all existing features and UX flow.
Problem
The original Stela app has several usability problems which make it inconvenient or frustrated for readers to find content efficiently. Some major issues were:
1.Disorganized and overwhelming content
2.Confusing navigation
3.Lack of hierarchy and inconsistent CTA
Goals
Usability: A clear and efficient navigation system
Business: Increase the ratings, subscription rate and retention rate
Process
I moved forward to audit existing design through usability testing with target users to spot pain points and define user story.
User Story
1. As a new user, I don't want to spend too much time on scrolling to see all the covers. I just want to find some eye catching stories from the genre I love.
2. As a return user, I want to efficiently get what I read before and what I was interested in last time.
New UX Flow
Based on the user stories, I redesigned the IA flows focus on navigation hierarchy and personalization. I went through several rounds of discussion and flow testing with engineers, PMs and target users to validate usability and confirm tech support for implementation.
To organize information in an easily digestible way, we decided to use cards and lists design. Card allows flexibility for different types of information and can be quickly applied to many pages on Stela App.
Some key changes including:
1. The Home page is the place of display and discovery, providing the latest and hottest stories.
2. In the Browse page, readers can browse and pick stories across different genres.
3. In My Library page, users can customize their own reading list by adding stories to collections. They can also quickly get access to the latest reading materials in recent reading list.
New Features
1. Three New Button–Home, Browse, My library
design reason: Clearly showing 3 main access to different page, helping user explore the app
2. Card Design
design reason: Grouping stories' cover from same category to a card with shadow to make the content more organized.
3. Genre Label
design reason: Helping users to go through all genres.
4. Vertical list of stories
design reason: Listing all stories with thumbnails to give users access to all stories and save space.
5. "Collection" option
design reason: Allowing users to save the stories they liked to start read efficiently in future.
Wireframe & Low-fi Prototyping
High-fidelity UI Design
RESULT
The ratings increased from 3.6 to 4.2 in Apple app store and increased form 3.8 to 4.0 in Google Play.
WHAT I HAVE LEARNED
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. There is new problem and challenge everyday and I kept asking, discussing, learning and quickly iterating.
I found keep doing different tests and validating the ideas before moving to high-fidelity designs could save a lot design loopholes at early stages. And the testing results and feedback from user interviews help me keep a refreshing eye when auditing and redesigning a existing UX flow.
To get the final design implemented and launch, I would like to thanks for all the support from back-end engineers, front-end developers, product manager and all designers. Proactive communication through the full design circle with cross-functional stakeholders yields tangible design solutions.