Client: Trala, Inc.
Duration: 2 Months
Role: UX designer, UI designer, Graphic design, Motion designer
Platform: Mobile application
Tools:
Sketch, Figma, After Effect
Deliverables: Mockups, Style guide, Prototype, UI Assets (Icons, Buttons, Illustrations, and Animations in Json)
Projects:
1-Homescreen redesign;
2-New content layout;
3-Playboard and Sheet Music

We just made the new launch end of December, 2019. If you are curious about what I have done and how the app looks like, download it from Trala website and check it out ! 👉https://trala.com/

PROJECT 1
Homescreen Redesign

STAGE 01

RESEARCH

User interview
User feedback analysis

STAGE 02

IDEATION

Wireframing
Mockups building
User testing & Iterations

STAGE 03

SOLUTION

MVP and synthesis
UI design

01
BACKGROUND

Trala is an early-stage startup that helps from absolute beginners to advanced students to play violin and feel good playing it. Trala unlocks the world's most beautiful instrument to all ages and income levels and allows everyone to access a "Personal instructor".

02
THE PROBLEM

Trala first launched in 2017 and started collecting user data since then. When I joined the Trala team in early 2019, user interviews and user testing have been part of my working life. By talking to users and analyzing the user data, I found there are several problems users are facing. The most fundamental problem is that users have no idea about “What’s the app going to teach me?
Trala has been focusing on first timer’s first-day experience. However, due to the linear lesson structure, it’s hard for the first-timers to understand what valuable contents are Trala providing as well as the return users to navigate their progress.

Problems identified from user interview, user testing and user data.

The look of old version Trala: 1) Homescreen. 2) Video lesson. 3) Lesson complete screen

03
IDEATION

With the insights about Trala user and their problems, my teammate Lauren and I started ideation. We realized that any change to the app would affect the current user’s experience. The change shouldn’t only solve new user’s problems, helping them have a clear idea about what to learn with the app, navigate easily and track progress, but also could make the existing users have a smooth transition from the old version to the new version.

By rounds of discussion and preference test, the B2 concept was the most favorable approach. It grouped all the lessons and placed them in the order of difficulty. With the progress indicator incorporated, users would always know what’s the app teaching and what’s the next to learn.

04
VISUAL DIRECTION

Trala’s mission is to make violin education to every single person in a fun way. Despite a diverse and educational experience, Trala’s owner Sam has always looking for a FUN way to deliver valuable content to users. I saw this as a great opportunity to re-identify Trala’s brand and ensure the visual language is aligned with the brand. I came up with three style tiles and all of them were illustration based and with vibrant color.

Style Tile 01

Style Tile 02

Style Tile 03

05
FINAL SOLUTION

With the new layout structure and visual identity, we improved communication efficiency. New users are able to know what they can learn from Trala and which level they are at. Existing users can navigate themselves easily which increases the lesson complete ratio.

PROJECT 2
New content layout

Coming soon...

PROJECT 3
Playboard and Sheet Music
Coming soon...