Skillbox

Role
Product Design
Product Strategy
UX Research
Branding
Tools
Figma
Miro
Type

Mobile app

Overview

Background

One of the biggest trends during the pandemic was pursuing new skills and hobbies through remote learning.  As someone who participated in remote learning and witnessed the rapid growth of online class platforms, I became interested in investigating the unique experiences and needs of remote learners.

The more I spoke to people, the more I saw an opportunity arise from a white space in the market. 

Challenge

Speaking with friends and family, I discovered that many of them wanted to learn something new, but failed to initiate the process.  Their common constraints included limited time, motivation, and money. This lead me to believe that existing platforms were not doing enough to meet peoples’ realistic needs. With the goal to help people begin their learning journeys, I asked myself:
How might we help people start learning despite common constraints?

Spoiler Alert!

I've prepared the final designs and prototype for you if you should like to jump ahead. It will also be linked at the end of the case study.
Jump to solution →

Design Process

My Process

Although listed in order below, my design process varies by project depending on what problem we are addressing. I also apply an iterative cycle as I uncover information, receive feedback, and make changes.
1. Research
  • Market research
  • Competitive analysis
  • User interviews
  • Affinity mapping
2. Define
  • User persona and journey map
  • How might we statements
  • Task flows
3. Ideate
  • Wireframe sketches
  • Mid-fidelity wireframes
  • Information architecture
4. Test
  • Prototyping
  • Usability testing
  • Iterating on findings
5. Design
  • Style guide
  • Logo design
  • High-fidelity design and prototype

Research

To create a solid foundation, I needed to better understand my target audiences' experiences with learning and figure out which pain points would be most important to address. Speaking to people directly would help me gain more personal insights. I set research objectives to help guide this stage of the process:
Research Objectives
  • Understand what people currently do to learn new skills/hobbies
  • Uncover the motivations behind wanting to learn new skills/hobbies
  • Understand the unique needs of online learners
Market Research
I also wanted to familiarize myself with the current market for learners.  What have the trends been?  What new challenges are people facing with remote learning? I found a few compelling statistics from polls conducted by the Washington Post and Linkedin professionals:
Competitive Analysis
A competitive analysis of 4 popular online learning platforms revealed that many of them utilize the same structure.  The user pays a membership fee and is then allowed access to course videos and articles.

Unfortunately, this format is not very interactive and requires an upfront monetary commitment that a new user might not be so willing to pay. The evident similarities between these competitors and a lack of alternatives started to reveal a white space in the market.
User Interviews and Affinity Mapping
To better empathize with learners, I arranged user interviews with 5 people interested in learning new skills or hobbies.  I listened to and recorded informatino about their motivations, previous online learning experiences, and personal challenges.

With the use of color-coded sticky notes, I organized these bits of information and started to identify some recurring themes.
Key Themes
I identified four key themes from peoples' feelings and motivations when learning a new skill. Each theme represented an opportunity to better serve learners and help them reach their goals.

Redirection

I initially went into this project thinking the focus would be on learning new skills to get promoted or change one's career, however, analyzing the key themes shifted my direction. I learned that:

1. People were equally as interested in learning new things for their personal
   enjoyment, career skills were not the main focus.

2. Fear is an unexpected yet major hurdle. Intimidation and fear of failing can
   often stop people from even trying to learn a new skill.

Define

Now I wanted to narrow down the focus on who we are designing for.
User Persona
With the interview insights in hand, I created personas that represented the key takeaways and concerns of a real user. User journey maps helped me visualize the path and frustrations a user would experience at different points in their journey. This allowed me to identify more opportunities for my design based on the journey's low points.

Brainstorming solutions

How might we?
“How might we” statements were a great tool to start the brainstorming process. I compiled a list of possible solutions without feeling like I had to commit to a decision too early on. This exercise also helped me start a list of which product features would be most important to prioritize in the minimum viable product (MVP). The most essential features would come first.
Task flow
With the features taking more shape, I created task flows to help me visualize exactly what screens and elements the app would need as Cassie moved through her journey. Task flows allow me to be thorough and not overlook minor interactions.

Design

Sketches
As I started to sketch, I referenced interview insights and noted the essential features my interviewees mentioned.  The goal with sketches was to start creating visual hierarchy of these separate parts and to uncover initial design challenges early on before I moved into Figma.
Mid-fidelity wireframes
After receiving first-pass feedback on sketches from fellow designers as well as my mentor, I created grayscale mid-fidelity wireframes. I made sure to incorporate features inspired by my interviewee's needs, such as the flexible one-time session format and inclusion of live mentor feedback.

I went for a clean, friendly, and modern look that would be easy to navigate based on users' interests.

Usability Testing

Testing and Iterating
I believe testing in mid-fidelity gives great insight into the basic structure of the screens without getting too caught up on the details. I conducted five remote usability tests observing how participants navigated through the design and found critical points to iterate on:
1. Enhancing the "next available" scroll

- Users try to select dates in the “next available” section before they use “select dates” CTA button at the bottom

- Added “view calendar” in the next available section, and “view all dates” at the end of horizontal scroll
2. Information hierarchy

- Users would rather see session details first, but the instructor bio is still important

- Instructor bio moved lower but still visible above the fold
3. Sliders to checkboxes

- Slider doesn’t work well if you want to choose one specific thing and not a range

- Changed "session length" to check boxes because sessions would only be taught in standard increments

Hi-Fidelity Wireframes

After compiling a list of priority revisions from my usability tests, I brought my screens into hi-fidelity with those iterations.  At this point I was also able to think more about UI aspects and branding, which also enhanced the findability of features.
View Figma Prototype →

Branding

As I worked on hi-fidelity wireframes and revisions, I started to develop the style guide and logo.  I developed a few logo ideas, but ultimately focused on making sure the design was responsive and readable on different screens. 

As for colors  I decided to go for bright colors with high contrast that would be friendly, fun, and welcoming to learners as they opened the app.  The colors also made sense for accessibility purposes.

Reflection

Working on an end-to-end project exposed me to many areas beyond just UX design. Starting with identifying a need, coming up with a viable solution, and seeing those ideas take shape after research and testing was an exciting process that made me evaluate the product as a whole.

Learnings
  • User testing always reveals unexpected behaviors. Until you test your prototype with real people, you will only have the ideal concept in your head of how you think things should work.
  • The importance of style guides. Style guides helped me keep the app consistent throughout. I was also able to design more efficiently pulling colors and components from the guide.
If I had more time
  • Work on building the portal view for teachers
  • Complete additional user testing
  • Handoff to developers and assist with execution

Next project