Project Duration
Winter 2018 (2 months)
Team
the design team is made by Andrew and me
My Role
Product Designer, UI Designer
Stela App 2019
Stela, a subscription based reading app, provides customers with thousands pages of exclusive comics and novels.
_gif.gif)
PROBLEM
The original Stela app has several usability problems which make it inconvenient for readers to find content efficiently. Some major issues were:
1.Disorganized and overwhelming content
2.Confusing IA and 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
Branding: A clean and modern visual system; A new logo
NEW LOGO
DESIGN SYSTEM
The Home page is the place of discovery, providing the lates and hottest stories.
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.
In the Browse page, readers can pick stories from different genre
In My Library, 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.
PROCESS
Current Design
User Pain Points
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 User Flow
Based on the user stories, I created user flow focusing on category and personalization. I put several individual sections on home page and also list all genres we have on Browse page. Meanwhile, I add the page of library.
New Feature
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.
Wire Frame
OTHER SCREENS
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.
Available Now
