Katherine Lu's Project

Katherine Lu's Project

Katherine Lu

katherine tg

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.”

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.

swot analysis 1

affinity map

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.

amelia persona 1 orig

jackson persona orig

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.​

amelia user journey

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.

jackson task analysis orig

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.

amelia task analysis orig

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.

ia orig

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.

low fi wireframes 1 orig

balsamiq low fi orig

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.

affinity mapping orig

rainbow spreadsheet orig

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.

preference testing

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.​

ui elementsv1 2 orig

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.

ui elements v2 orig

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.

ui guidelines 001 origui guidelines 002 orig​​​​​​ui guidelines 005 2 origui guidelines 006 orig​​​​​​hero image orig

Other Portfolios