Learny
Portfolio Project | UX Design | UX Research | 2023
About the Project
The Product:
Design a user experience for social good. Portfolio project for Google's UX Design Certificate Program.
Project Duration:
September 2023 - October 2023
Project Overview
The Problem:
People who don’t have a steady income but are looking to receive an education can’t afford the schooling that it takes to get a better education.
The Goal:
Design a user experience for social good. Create an online learning tool that allows people without income to get the education they need to be equipped for the workforce.
My Role:
UX/UI Designer & Researcher
Responsibilities:
User Research | Wireframing | Prototyping | Creating User Stories | Creating Personas | Conducting Interviews | Iterating on Designs
User Research
Research Questions
For the research questions that would be asked in the usability study, I wanted to determine:
Usability Study
I performed moderated usability studies for both the mobile and desktop version of my product, measuring Time on Task, Conversion rates, and System Usability Scale as the KPIs. I also conducted a competitive analysis on other products with similar experiences to understand what the strengths and weaknesses are in this industry.
Persona
Problem Statement
Kenny is a 45-year-old father with no income who needs to get an inexpensive quality education online because he needs a better education to get a more secure job to provide for his family.
User Journey Map
Click Path
The user starts the user journey by searching online for a “free education” program. They find “Learny” and create an account on the website, providing income details and goals for their education. The user then browses available free courses or searches for a specific program. The user begins the program and completes it on their own time, receiving a certificate and allowing them special access to jobs from the program creator.
Wireframes & Sitemap
I started with a Crazy Eights exercise to jot down as many ideas as I could for the homepage and then repeated this process for the other screens. I then transferred the design I liked most into a paper wireframe and added some other ideas that came into fruition as I was creating the paper wireframes.
This is a sitemap for the Learny app if I were to continue building it out into a full-fledged product. I analyzed many other competitors in the market that offer the same product and used their websites to build my own sitemap for Learny.
Prototypes & Iterations
Low-Fidelity Prototype
After conducting the usability study on my low-fi prototype, I found 3 major pain points that needed to be addressed.
- Because there was no search option, users who want to search for a program or course would have to scroll through the slider until they found what they were looking for.
- Users were unsure who the program/course instructors were when enrolling.
- Users wanted to know where they placed in regards to the other participants in the course/program when they completed a lesson or activity.
After synthesizing these results, I found that users wanted:
- Users want to the ability to search for programs/courses.
- Users want to know who’s teaching the course or program before enrolling.
- Users want to know where they rank out of their classmates after submitting an assignment/quiz.
Using this information, I began iterating on my designs and creating a revised low-fi prototype to test with the same group. Once finished, I began working on refining my designs and creating hi-fi prototypes.
High-Fidelity Prototype
For my final portfolio project, I was tasked with creating my wireframes and prototypes for both mobile, tablet, and desktop screens using Figma. I created the designs using Progressive Enhancement, ensuring that the design would be responsive throughout all screen sizes.
Mockups
There were a few changes made from the low-fi wireframe to the hi-fi mockup. After performing the usability
study, I found that users prefered a larger button for the “continue learning” section to draw their attention to it. The progress bar at the top of the screen was also confusing as people could be taking multiple programs, so I moved the progress bar down into the “continue learning” section for better association.
Final Design
Takeaways
I learned that there are different use cases that would require you to build using Progressive enhancement, Graceful degredation, or a mobile-first philosophy. I also learned the differences between dedicated apps and responsive apps, and
look forward to building more of each in the future.
Click this link to view the high-fidelity prototype for Learny.