top of page

Stela App 2.0 Rebranding



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


Screen Shot 2021-03-16 at 3.08.04 AM.png





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.

Stela 1.0 IA Map.png




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




Usability: A clear and efficient navigation system

Business: Increase the ratings, subscription rate and retention rate



I moved forward to audit existing design through usability testing with target users to spot pain points and define user story.  

current problem.webp

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.

new UI frame.png

Wireframe & Low-fi Prototyping

wireframe prototype.gif

High-fidelity UI Design




The ratings increased from 3.6 to 4.2 in Apple app store and increased form 3.8 to 4.0 in Google Play.



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.  

< Previous Project
Next Project - CMS / CRM tool >
bottom of page