Natively

Date

July - August 2021

Tools

Figma

Responsibilities

UX Research

Competitive Analysis

UX Design

Wireframing

High-Fidelity Mockups

Prototyping

Natively mobile app mockups

Context:
Natively is a language learning application for adults who are looking for short and digestible lessons to fit into their busy schedules. The target demographic is adults approximately 35-55 years old, who aspire to learn a new language but don’t have time for a rigorous course.

Team:
I was the sole UX designer on this project. I designed this project in conjunction with Google's UX Design Certificate Program.

Challenge:
Design an application to stand out in an already saturated industry. With power-house language apps like Duolingo, what makes Natively different? The UI of Natively will need to appeal to our target market as a more mature option, without sacrificing on course content or effectiveness.

Solution:
We moved forward with a mobile-first application that guides users through simple lessons in their target language(s). The application provides feedback after each question and has multiple levels for each language.

Project Overview

Below is an overview of the design phases of this project.

User Research

I began my process by speaking to people in the target demographic about the problems they typically encounter when evaluating language courses. The main user base identified is adults (40 - 65) who want to learn a new language in their spare time.

Based on my conversations, users are interested in learning a new language, but are too busy for an intensive course. Many online language platforms are expensive and have a set pace. Our users want to learn a language at their own pace with simple, short, lessons.

User persona for Joe, a 42 year old who wants to understand his wife and children better.

Ideation

After creating Joe's user persona, I did a brainstorming exercise called “How might we?” to ideate features that will make Natively stand out amongst competitors. Some of the questions that I came up with can be seen below.

The ideation exercise helped me define components to bring into my initial wireframes below, such as a progress bar so that participants will be able to view their progress. Additionally, when a user answers a question correctly, an encouraging message will pop up to motivate them to continue.

how might we questions

Wireframes

During the wireframe process, I made multiple variations of the language lesson layout. I brought my favorite features to the final wireframes. I focused on creating a logical information hierarchy with a minimal design.

wireframe

User Research

After preparing my low-fidelity designs, I conducted a remote, unmoderated usability study to identify problem areas and opportunities to improve my design. One example of the findings is highlighted below, where I added descriptions to the language level selection options so that users could make a more informed decision.

wireframes showing before and after usability study

High-Fidelity Mockups

After completing the first version of my mockups, I asked peers for feedback. Most feedback was related to UI design. For example, would the color scheme in these mockups appeal to the target user of adults age 35 - 55? Based on the comments, I designed a neutral version of the mockups with updated UI and a more polished tone.

Wireframe V1 with bold colors
Mockups V2 with neutral color palette

Interactive Prototype

This prototype guides the user through the first beginner-level Spanish lesson. There are three questions in the first lesson, and the user receives feedback after every attempt at answering a question. The first lesson revolves around learning basic phrases. Interact with the high-fidelity prototype below (click in the upper-right-hand corner to expand).

What's next?

There are additional features I'd like to contribute to this project, such as:

Add different question formats, such as matching or fill in the blanks.

Create a way to stop during a lesson and continue at a later time.

Perform additional usability studies to identify any pain points in the current application.

What did the clients have to say?

I believe there's always room for growth and improvement. In order for me to become a better designer, collaborator, and leader, I value the feedback I receive from my clients.

Customer testimonials

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

I was so lucky to find Karlyn to do UI/ UX work for a brand-new product that had significant investment behind it. As we needed to start asap and had lost our full time designer, a contractor was the only way to move forward quickly. Karlyn had the dashboard and data experience, which was rare to find.

She has been amazing to work with! She takes full initiative, doesn't wait to be instructed on every aspect but does her research and makes logical assumptions about the needs and direction since we had to collaborate asynchronously. With every meeting, she asked all the right questions, accurately understood our requests, and always delivered her iterations with great understanding of our needs and direction.

Her process is easy to understand and follow, and she delivers great results always prior to the next meeting and decision process.

I would absolutely recommend Karlyn for any contract or full time design role.

Sally H.

Head of Global Product Management, Lightcast

"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare."

Name Surname

Position, Company name

What were some key takeaways?

As the cliche´ goes, teamwork makes the dream work.

Know your user

As I realized during my high-fidelity mockup stage of the design, my initial UI concept did not align with the user persona created during the user research stage. After realizing this problem, I went back and made another attempt at a more polished UI design. I learned from this to always keep the user journey at the top of my mind when designing. This also reinforced the value of feedback and self-critique.