Katherine Lu's Project

Throughout the UX Design Program, you’ll build out a job-ready portfolio. Below is a breakdown of UX graduate Katherine’s portfolio project Rally, a language learning app. If you’d like to check out her full portfolio, head to her website.

Speaking about her career change journey, Katherine said:

“I sought a new career direction in UX/UI design because it merges my creative and analytical skills. I am deeply interested in what motivates people, and am prone to thinking about and explaining concepts visually. UX design motivates me to incorporate the skillset I’ve developed working in HR and workshop facilitation with my creative and artistic skills, so it feels like satisfying work that represents who I am.”

Find out more about Katherine’s career change journey in this article: Alumni Spotlight: Organizing World Information Architecture Day

RALLY

BRIEF Language learning apps and tools are so accessible nowadays that it’s easy to find many people currently “learning a language.” These tools, however, lack a vital component of learning — immersion.

GOAL I wanted to design a product that provides a way for people to learn a foreign language through practical lessons and conversation practice with live video chat.

DISCOVERY In November 2018, I started the discovery phase with a comparative analysis of language apps and user interviews with people who have experience learning a foreign language. I wanted to address their goals, motivations, and pain points when it comes to learning languages.

From the interviews, I learned:

• Users want control and visibility over their curriculum.
• People want to learn not only the language, but also the culture to contextualize material.
• Users dislike repetition in exercises.
• Many people seek video-based exercises.

After refining this information, I sketched out the main flows, and iterated on the designs with rapid prototyping. I wanted the onboarding to be an opportunity to showcase that Rally is different from other language learning apps with its video-based learning material and video chat.

USER PERSONAS​

With the data gathered from comparative analysis and user interviews, I created personas that represent two types of users from the target demographic.

USER JOURNEYS AND TASK FLOWS

To further understand my personas Amelia and Jackson, I created user flows and task analyses. These flows also served as my starting points to map out the information architecture of my app.​

Jackson’s Objective As an adult learner, Jackson wants extra support when it comes to learning a foreign language so he can showcase his skills at work.

Amelia’s ObjectiveAs a social young adult, Amelia wants to share her vocab list with her friends so they can also learn and be ready for their trip.

CARD SORTING

I refined my preliminary information architecture with a hybrid card sort. I chose a hybrid card sort because I have categories in mind, but I am still open to suggestions. Based on my results, I integrated a co-existing hierarchy and made other changes, highlighted in yellow.

LOW- AND MID-FIDELITY PROTOTYPES

With the IA established, I sketched out the main flows, and iterated on the designs with rapid prototyping. I wanted the onboarding to be an opportunity to showcase that Rally is different from other language learning apps with its video-based learning material and video chat.

USABILITY TESTING

Once I had my mid-fidelity prototype ready, it was time to test out my design! I held six moderated in-person and remote usability tests.My test objectives were:

• Observe points of friction and areas of delight
• Decide which options to make available in the tab menu based on user expectations

​After categorizing the data, I used a rainbow spreadsheet to make better sense of what my priorities should be in the next iteration.

From this data, I discovered that, as a designer, I tend to inundate one screen with too much function, which overwhelms and confuses the user. For example, the second screen in my Balsamiq wireframes ought to separated into two screens.

PREFERENCE TESTING

I conducted a preference test on Usability Hub to determine which onboarding screen users preferred. Screen A is the original design while I modeled Screen B’s layout and copy after an established app’s onboarding. I was surprised to discover people liked the original.

UI DESIGN

Once I addressed the top issues to solve based on Nielsen’s severity ratings, it was time to breathe life into the app with color and UI elements.​

FINAL UI DESIGN

In the last round of iterations (for now), I made changes based on peer feedback and WCAG accessibility guidelines. Redesigning my mockups increased the contrast in a way I was not expecting, which also meant changing my own branding guidelines.

DESIGN LANGUAGE SYSTEMS

I documented UI elements to ensure the look and tone of the app remain consistent. As I improve upon the design, the guidelines will have to be referred to and updated accordingly.

​​​​​​​​​​​​