Win Wise
CONTEXT
Continuing education is critical -- and sometimes required -- for career development, but it's not always fun. Win Wise is a mobile-first website that puts a fun spin on continuing education with motivating and engaging learning competitions. This case study was part of a project as a DesignLab student.
Introduction
BACKGROUND
This suggests that there is potential in this market for an online-learning product, but first I needed to find out what people are learning, what keeps them motivated, and how they learn best.
Online learning is predicted to grow by more than 200% between 2020 and 2025.
THE CHALLENGE
Most people take online courses to develop career-related skills, but they find traditional learning monotonous.
Some people take courses voluntarily, while others are required to take them for work. No matter the reason for taking the course, folks find it difficult to stay engaged.
THE SOLUTION
Make continuing education engaging with gamification.
Win Wise uses competition-based lessons that engage users and connect them with colleagues.
PROJECT CONSTRAINTS
Inability to implement the solution.
This case study was for a course assignment at DesignLab, so the product wasn't developed.
Fictitious business.
Since I wasn't working with a real business, I researched common business goals for learning apps to simulate this aspect of the project.
The Process
Discover
RESEARCH GOALS
Competitor analysis.
Determine any gaps in the current market of online learning platforms.
Market research.
Gather information about how users learn new skills online
Survey.
Learn more about users, and screen participants for user interviews.
User interviews.
Understand why users learn skills online, the challenges they face, and what keeps them motivated.
COMPETITOR ANALYSIS
There's an opportunity in the market for a product with video lessons, a learning community, and gamification.
Three competitors had lessons with videos, two competitors had a community feature, and only one offered gamified lessons, but none offered all three. This suggests that there is an opportunity in the market for a product with video lessons, a learning community, and gamification.
SKILLSHARE
DUOLINGO
LINKEDIN LEARNING
YOUTUBE
MARKET RESEARCH
68% of online students are experienced professionals, and people learn best by setting goals, doing hands-on activities, taking frequent breaks, and gamification.
The findings from my market research suggest that the potential target users for the website are experienced professionals. The findings also suggest that the following features should be included for an effective learning experience: goal setting, hands-on activities, short lessons, and gamification.
SURVEY
Professional
Development
Learn a new
language
71.4%
28.6%
Reason for Learning
Visual
Reading/
Writing
85.7%
14.3%
Learning Style
I created a survey to serve as a screener for the user interviews and collect quantitative data about how people learn new skills online. The results suggest that the majority of participants learned new skills for professional development and that they learn best when content is presented to them visually.
USER INTERVIEWS
Participants learn new skills online for professional development purposes, and they prefer when lessons are short and gamified.
I conducted user interviews with six participants. The majority of participants learned new skills online to advance their careers or to complete required continuing education. They also mentioned that they prefer when lessons are short and gamified.
Define
AFFINITY MAP INSIGHTS
Theme 1: Learning for professional development purposes
-
66% of participants learned for professional development
-
Some of the reasons included advancing their career required training, and transitioning to a new career
Theme 2: Participants prefer visual lessons and hands-on practice
-
66% of participants preferred visual lessons
-
50% learn best when there is hands-on practice after a lesson
Theme 3: Gamified lessons keep participants motivated
-
50% of participants like when lessons feel like a game
4/6 participants learned for professional development
4/6 participants prefer visual lessons (i.e. videos) as opposed to written ones
3/6 participants learn best when there is hands-on practice after a lesson
3/6 participants like gamified lessons
PERSONAS
Based on the insights I gathered from the user interviews and affinity mapping, I discovered that the majority of participants fell into one of three groups: professionals learning to advance their careers, switch careers, or keep their current jobs. Since the majority of participants fell into the group of "career maintenance," I focused on solving the problem for these users and created the following persona:
.png)
THE PROBLEM
Professionals need to complete education courses at various stages in their careers, but they think traditional learning is monotonous.
HMW QUESTION
How might we help a software engineer at a competitive tech company learn new programming skills so that they can keep their job and potentially earn more money?
Ideate
IDEATION PROCESS
After a couple of brainstorming sessions, I generated the following ideas that could solve the user's problem:
Help users stay on top of professional development
Career
Progress Tracker
Pair lessons with hands-on activities
Hands-On Lessons
Connect users learning the same skills
Learning Forum
Gamification of continuing education lessons
Competitive Learning
STORYBOARDS
To help build empathy for users and convey how they will go through the steps of interacting with a competition-based learning website, I created a storyboard from the perspective of the persona. The storyboard helped me connect the research findings to design solutions.
Design
INFORMATION ARCHITECTURE
After determining the website's features, I conducted an open card sort to validate user-centric content requirements and understand the user's mental model. The insights I gathered from the card sort helped me determine the structure of the website's sitemap.
.png)
.png)
USER FLOWS
I created user flows to ensure that I captured the specific workflow of the users through their perspective. The user flows I created were made to show how users will move through the website to accomplish three goals: sign up for Win Wise, search for a course, and find a friend and compete.
Sign Up
.png)
Search for a Course
Start a Competition
.png)
MID-FIDELITY WIREFRAMES
Once I determined the information architecture of the website, I brainstormed possible solutions using low-fidelity wireframes. I started with low-fidelity wireframes so I could quickly validate ideas by requesting feedback and uncover issues with design early on. After receiving feedback about my low-fidelity wireframes, I created mid-fidelity wireframes in Figma. Creating mid-fidelity wireframes helped me work through specific features and flows and bring more clarity to the steps within each flow by gathering feedback.
DEVELOPING THE WIN WISE BRAND
Since Win Wise is an education company, I wanted to design a logo that symbolized wisdom, intuitive development, and achievement. To portray these values visually, I created a logo with an owl wearing a crown. Since owls often symbolize wisdom and crows are synonymous with achievement, I felt that the combination of the two was the best way to represent the brand. For the primary brand colors, I chose dark blue and turquoise. Dark blue is synonymous with trust and reliability, while turquoise evokes the feeling of energy and excitement.
UI KIT
HIGH-FIDELITY MOCKUPS
The next step in my design process was to apply the Win Wise brand to the mid-fidelity wireframes in Figma so I could create a prototype and test the website with users.
Test
I conducted moderated usability tests with six participants using Figma and Google Meet. Each participant completed three tasks: sign up for Win Wise, search for a course, and find a friend and start a competition with them. During the usability tests, I collected data for the following success metrics: time on task, task completion rate, error rate, and satisfaction rating.
RESULTS
9.8/10
Sign up
for Win Wise
8.8/10
Search for
a course
9.6/10
Find a friend and
compete with them
UNEXPECTED RESULTS
Difficulty using keyboard.
1.
84% of participants struggled with the keyboard interaction in the prototype
2.
"Where is the course?"
84% of participants struggled finding the target course.
Recommended Courses vs. Search Results Page
3.
66% of participants had trouble differentiating the “Recommended Courses” section from the search results page.
4.
"Can I filter courses by difficulty?"
33% of participants asked if there was a way to filter courses by difficulty
HIGH-PRIORITY REVISIONS
1. Remove keyboard for future testing.
During the usability tests, participants struggled with the keyboard and would often get stuck on any step that involved typing. Since every flow involved typing, this was an issue that was very frequent and severe. I removed the keyboard and replaced it with a touch-to-fill interaction to prevent further issues during future testing.
2. Change "Recommended Courses" section
The "Recommended Courses" section and the search results page looked too similar to users and caused confusion when finding the target course. To differentiate the "Recommended Courses" section, I changed the background color to a light gray, increased the weight and size of the header, and switched the layout from a list of cards to a carousel of cards.
3. Add option to filter courses by difficulty
Although the "filter" icon was already present in V1, I designed the filter pop-up menu so users can see and use this feature in future tests.
Next Steps
FUTURE FEATURES
Community forums.
1.
During user interviews, 50% of participants mentioned that they valued being a part of a learning community, so a community forum is the next feature I would add.
2.
Ask an expert.
50% of participants also mentioned that they value expert advice when learning a new skill. Based on these results, I'd add the "Ask an Expert" feature next.
Reflection
PROJECT CONSTRAINTS REVISITED
Inability to implement the solution.
Since I didn't work with developers, I'm not sure if the features of the website are feasible.
Fictitious business.
Since the website wasn't developed and the business was fictitious, I wasn't able to measure the website's performance against business KPIs.
LESSONS LEARNED
A design is only as good as the assumption you've based it on.
Before beginning this case study, I assumed that users relied on habit-forming to learn new skills. By empathizing with users during interviews, I learned that gamification and connecting with others is valued more when learning a new skill. This helped me realize the importance of empathy in the UX design process.