Scottsdale Public Library
The team
1 × product manager 2 × product designers 6 × engineers 1 × researcher 1 × marketer
Type
Mobile app
Mobile app
Overview
Background
One of the biggest themes of the pandemic was pursuing new interests and skills through remote learning. Since I have experienced both negative and positive sides of remote learning, I wanted to investigate how to better serve this user group. I particularly saw an opportunity to reassess popular online learning platforms.
Challenge
Speaking with friends and family, I discovered that many of them want to learn new skills but fail to initiate the process. Their constraints included factors like limited time, motivation, and money. These pain points lead me to believe that existing platforms were not adequately meeting peoples’ needs. With the goal in mind to empower people to take control of their learning, I asked myself:
Challenge
Speaking with friends and family, I discovered that many of them want to learn new skills but fail to initiate the process. Their constraints included factors like limited time, motivation, and money. These pain points lead me to believe that existing platforms were not adequately meeting peoples’ needs. With the goal in mind to empower people to take control of their learning, I asked myself:
How might we help people start learning despite their constraints?
Spoiler Alert!
I've prepared the final designs and prototype for you to explore if you should like to jump ahead. It will also be linked at the end of the case study.
Jump to solution →
Design Process
Although listed in order below, my design process for each project can vary depending on what existing information exists and what problem we are solving. I also keep in mind that projects may require me to go back to certain steps as I iterate and uncover new insights.
1. Research
2. Define
3. Ideate
4. Design
5. User test
Research
To create a solid base for this project, I needed to understand my target audiences' experiences and what pain points were important to address. I set objectives to help guide the research process:
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 wanted to familiarize myself with the current market for learners. What have the trends been? What new challenges are people facing? I found 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 these services follow the same structure. The user pays a fee and is allowed to access course videos.
Unfortunately, this format is not very engaging and requires upfront monetary commitment. The similarity between these competitors started to reveal a white space in the market.
Unfortunately, this format is not very engaging and requires upfront monetary commitment. The similarity between these competitors started to reveal a white space in the market.
User Interviews
To better empathize with learners, I arranged interviews with 5 people interested in learning new skills. I listened to their motivations, online learning experiences, and challenges. With the use of color-coded sticky notes, I started to see recurring themes.
.jpg)
Key Themes
The patterns revealed four key themes where I saw the most opportunity to help potential learners.
Redirection
Originally, I went into this project thinking the focus of the app would be on careers. The "Fear" and "Work and Play" themes I uncovered after talking to users shifted my direction. What I found to be true was:
1. Many people wanted to explore leisurely hobbies and learn skills for fun.
2. Fear was a big hurdle to conquer. 5 of 5 interviewees spoke about the fear and anxiety that comes with learning something new.
1. Many people wanted to explore leisurely hobbies and learn skills for fun.
2. Fear was a big hurdle to conquer. 5 of 5 interviewees spoke about the fear and anxiety that comes with learning something new.
Define
Now I wanted to 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. Journey maps helped me better visualize the path and frustrations a user would experience. This allowed me to identify more opportunities at the low points in the user journey.
.png)
Brainstorming solutions
How might we?
“How might we” statements helped me start brainstorming a list of possible solutions without committing to decisions too early on. This process also helped me compile a list of what product features would be most important to create the MVP.
Task flow
With the features taking more shape, I decided to create task flows to help me visualize what screens and elements the app would need as Cassie moved through her journey.
.jpg)
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 uncover initial design challenges early on.
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.
I went for a clean, friendly, and modern look that would be easy to navigate based on users' interests.
Usability Testing
Testing and Iterating
Because I believe testing in mid fidelity gives great insight into the basic structure of the screens, I conducted usability testing on midfi’s rather than hifi’s. I conducted five remote usability tests observing how participants navigated through the design and found five key insights 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
- 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
- Users would rather see session details first, but the instructor bio is still important
- Instructor bio moved lower but still visible above the fold
.png)
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
- 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 & Prototype
After compiling this list of priority revisions from my usability tests above, 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 certain features.
.png)
.png)
View the mobile prototype below, or click here to view it in Figma.
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 good contrast that would be friendly, fun, and welcoming to learners as they opened the app. The contrast of colors also made sense for accessibility purposes.
As for colors I decided to go for bright colors with good contrast that would be friendly, fun, and welcoming to learners as they opened the app. The contrast of colors also made sense for accessibility purposes.
.png)
Learnings & next steps
Having the opportunity to bring an idea to life from start to finish was exciting as I got to focus on something I care about and saw a real need for. I experienced several points where my project shifted as I uncovered new insights and I was able to adapt the focus.
Ideally, my next steps here would be working to bring the app to life. I’d love to work with a developer to explore more about design documentation and the handoff process.
Ideally, my next steps here would be working to bring the app to life. I’d love to work with a developer to explore more about design documentation and the handoff process.