top of page
45cover.jpg

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 

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

VISUAL SYSTEM

GUIDE1.jpg
GUIDE2.jpg

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.

Stela 1.0 IA Map.png

 

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.  

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.

2.0IA.png

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
wireframe2.0.png

High-fidelity UI Design

2.0UI.png

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.

rating.png
rating2.png

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.  

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