Client: Trala, Inc.
Role: UX design, UI design, Graphic design, and Motion design
Platform: Mobile application
Tools: Sketch, Figma, and After Effect
Deliverables: wireframes, mockups, prototypes, UI assets.
Projects:
I. Homescreen Redesign
II. New Content Layout
III. Playboard and Sheet Music Redesign
IV. Retention

On December 16th, Trala launched a brand new design with a fresh user experience. My new design resulted in the app's highest lesson complete rate. Users are now completing an average of 24 lessons per week, up from 7 before the launch. If you are curious about what I have done and how the app looks, download it from Trala website and check it out !
👉https://trala.com/

PROJECT I

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 developing a violin learning app that teaches users how to play the violin. The violin lessons are powered by signal processing that listens to users play their real violins and gives instant feedback. With the mission of making world-class music education accessible to everyone, Trala focuses on fun and educational content, as well as intuitive user experience.

02
THE PROBLEM

Trala first launched its app 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 responsibilities. By talking to users and analyzing user data, I found that there are several problems users are facing. The most fundamental problem was that users had no idea about what the app would teach them. Trala focused on first-timer’s first-day experience and had a linear lesson structure to help users start their first lesson as quickly as possible. However, due to the lack of clarity with its format of lesson plan, many first-timers couldn't understand the goal of the app and many return users found it was hard to navigate themselves. With insights about Trala users, we decided to resolve the most pressing problem:

"I don't know what I can get from the app because I can't find a simple way to overview the content and navigate myself to the specific part I may want to learn."


By looking into the user data, survey results, talking to users and testing the app with user, the team and I identified the problems that users were facing.

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

03
THE CHALLENGE

Due to the limitation of resources, we had to keep all the lesson contents as they were. The educational logic was one aspect we had no authority to alter at this moment.

The app was online and with more than then thousand active users. Any change to the information architecture would affect the current user's experience in making learning progress. We needed to find a way to help the existing users with a smooth transition, as well as to minimize the impact on their learning progress. The new design also had to resolve the new user's problems, helping them have a clearer idea about what to expect with the app and navigate easily.

04
IDEATION

We understood the goal of the product owner and violin educators after many communications with them. With the business goal, education goal and user goal in mind, I started brainstorming with my teammate Lauren and eventually came up with several concepts.

We posted all the concepts on white board and started a intense discussion

After rounds of discussions and preference tests, 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 and precise level description incorporated, users would always know their learning status and progress, as well as what to expect next.

05
VISUAL DIRECTION

In addition to his violinist background, Trala’s owner Sam has always been looking for a fun way to deliver valuable content to users. I saw this as a great opportunity to redefine Trala’s brand and ensure that the visual language was aligned with the brand. I came up with three style tiles that conveyed Trala’s spirt. All of them were illustration based and with vibrant colors.

Style Tile 01

Style Tile 02

Style Tile 03

06
FINAL SOLUTION

With the new layout structure, information hierarchy, and visual identity, we improved communication efficiency. New users were able to know what they could learn from Trala, where should they start learning, and which level they belong to. Existing users could navigate themselves easily.

PROJECT II
New Content Layout

01
THE PROBLEM


"I want to success, but I don't know what to do and how should I do?"


Through surveys, user interviews, and the lesson completion data, we found that the contents were not delivered in a way that could help users learn violin effectively and efficiently. Users struggled to determine if they were ready to advance and lacked ways to make improvements. Through communication with violin educators, we realized that the contents weren’t aligned with their teaching philosophy. The App is effective at communicating music concepts and demonstrating technical skills to users, but failed to inform users ways to improve their skills, nor interactively help them practice.

02
THE CHALLENGE

We saw the problems our users were facing. We also saw the insufficiency of the current lesson plan to address those issues. We were determined to resolve these issues and improve the product. However, none of us had a clear view of what could be done or potential impacts on the product. Teaching content was the soul, the core value and the fundamental of the app. Revamping the content means complete overall of the product, which was not only a challenge but also a major risk factor.

03
WHAT TO BUILD

We kicked off the project with three productive meetings with the product owner Sam, violin educators Geoff and Rachel, the developer Vish, the videographer Orel, and myself. During the first meeting, we started with discussions on missing contents from the current lesson plan and on new skills and features to be included. However, due to the complex nature and different perspectives of the group, after a couple of hours of discussion, we didn’t find a satisfactory way to resolve our issues. At that point, we were showing users plenty of content, but we didn’t find a way for users to effectively and efficiently digest these contents. As a violin learner and designer, I was able to visualize in my mind what was discussed, and simultaneously transform the information into wireframes mentally. So I thought I could contribute from a more practical perspective. I asked the group to imagine that they are the learners and hope to play a song that they love, what would they want to do. This question stimulated good conversations and finally led to the song-based lesson plan strategy, where for each song, we ask the users to listen to the song, understand related theory/skills, Exercise, and at last play the song with our playboard. I was happy that, though I wasn’t a violin specialist, I was able to guide our conversation by thinking constructively and by putting myself in the shoes of our users. 

My quick ideation during the meeting. I grouped the contents into three categories to learn, exercise, and play. The concept was accepted by the team and we were on the right track at this point

As the discussions continued, I started to get a sense that involving violin educators to the UX ideation exercise was not the best idea. They were professionals to teach violin but had no experience in visualizing their teaching method with a digital product. Therefore, I suggested that instead of having them develop details on how each lesson should look like in the app, a better way was to have the violin educators take 3 sample songs and work out the contents for each song. From there I would then started my design process from the information architecture. This piece of advice turned the whole process much more efficient.

The content list was worked out by my teammates. The level 1 course was all about the fundamentals, teaching people basic concepts and postures. The levels afterward would be learning songs.


04
UNDERSTAND THE INFORMATION

I worked on the information architecture and the user’s learning journey. With the content list, I performed a card sorting exercise and tried to logically arrange all lessons in a logical structure. The structure should not only be effective at delivering lessons to users but also be conscious and encouraging about daily practice. 

Card sorting exercise for the level 1 course.

05
CONCEPTUALIZATION AND ITERATIONS

After organizing all the contents for level 1 (Fundamentals) in a clear and logical structure, and understanding user’s learning journey, I came up with two concepts. However, by talking to Sam, I realized the levels other than level 1 were actually the core value of the new change. These levels were the core in teaching users play and users should spend most of their time on them by practicing with a playboard. Therefore, I did a card sorting exercise again for a song course and sketched out a concept where I categorized the contents into Learn, Play, and Exercise. 

Left: The two concepts I generated for level 1 content
Right: The concept I came up in the discussion with Sam

Based on the concept, I quickly drew it out into wireframes. Users would start from INTRO, and the CTA on the top part would always show the next lesson to start. After INTRO, it is the LEARN lessons. Once the LEARN lesson was done, it moved to the bottom of the page in a new category called "REVIEW". Once users complete all the lessons, the top section would be the playboard afterward. The user would always come back to quickly start practice.

The preliminary wireframes of my concept

In the meantime, Geoff, the violin educator, worked on the lesson plan. Based on my concept, he categorized the lessons into Learn, Play, Exercise. However, there were a few issues. There appeared to be too many lessons for each song. The “Learn” lessons and “Exercise” lessons were mixed up and it was hard to fit them into the new lesson structure designed by me. I tried to optimize the wireframe to support the lesson plan, but I’m also cautious about the shortcomings of the lesson plan from the user experience standing point. To resolve those issues I initiated a conversation with Geoff and other stakeholders. Finally, we agreed on simplifying the lesson plan to provide users a more intuitive learning experience and help them focus on practice rather than watching tutorials. 

Lesson Plan I got from violin educators

Based on the new lesson plan, I created the 2nd round wireframe

I truly enjoyed being part of the project from day one. As a team, we collaborated closely with each other and found solutions to address our issues in an efficient manner. Despite various challenges, I was able to step up on multiple occasions, think critically and creatively, to help move the project forward. I’m particularly proud to be able to influence the decisions by putting myself in the shoes of users.

06
USER TESTING

My development team quickly built an MVP(Minimum Viable Product) for me to do testing with users. With the objectives to gain insights from users, check if the user can perform the tasks we proposed and get user reactions and feedback, I worked out a test plan and tested the new design with a number of users face to face. All of them could successfully finish the tasks, but some were confused with certain details such as microcopy. I also realized that I put much weight on Day-One experience compared to Day-Two and completion status. Based on those feedback, insights, and findings, I iterated on the wireframes.

The tasks and questions we designed for the user testing

"Today's Plan" was introduced for Day 2 experience


07
VISUAL DESIGN AND THE RESULT

I had no struggle in visual design for this project as it had similarities to an earlier project. On top of making the visual design consistent and elegant, I also made sure that my user interfaces worked to create a fluent user experience. In order to achieve a top-class user interface experience, I consulted experts in this field with more experiences and explored various design communities to collect useful feedback and advice.

I applied the style guide to wireframes and tested with different visual options

The Mockups I delivered to the the development team

The new design was released on Dec 16, 2019. With the new learning experience, users are now completing an average of 24 lessons per week, up from 7 before the release. The team was very pleased with this result.

PROJECT III
Playboard and Sheet Music Redesign

Coming soon...

PROJECT IV
Retention

Coming soon...