Learn Web Dev
Helping teenagers and young adults learn web development
Project Overview
The Problem
Teenagers and young adults do not have access to an e-learning app that provides the needed mentor support and learning balance they need.
The Goal
Design an app that provides free access to web development classes, mentoring support, personalized learning schedule and can also be accessible with little to no data required.
The Product
Learn Web Dev is a Lagos-based organization focused on e-learning. The organization needs a tool that helps teach teenagers and young adults about web development. Learn Web Dev primary target users include teenagers and young adults who are looking for a way to get started early in the tech industry and do not have the perfect resources that gives them learning balance.
My Role
UX designer leading the app and responsive website design from conception to delivery
Responsibilities
Conducting interviews, paper and digital wireframing, low and high-fidelity prototyping, conducting usability studies, accounting for accessibility, iterating on designs, determining information architecture, and responsive design.
Project duration
March 2022 to May 2022
Understanding the user
I conducted user interviews, which I then turned into empathy maps to better understand the target user and their needs. I discovered that many target users, who are mostly teenagers and young undergraduates, could not afford to pay for web development classes and think it would be difficult to couple the web dev class with other responsibilities . I also found out that some target audience also have other e- learning limitations such as access to good network, constant network access and personal mentoring. Many of the participants welcomed the idea of an e-learning platform that can be accessed offline.
Personas and Problem statement
Starting off, I took a user-centered design approach that proved to be quite effective in my design efforts. I conducted an interview and created empathy maps to understand the users I’m designing for and their needs. I discovered that many target users prefer to use online apartment finding as the perfect alternative to the usual physical method, as it is very stressful for working adults to manage that.
Oyin
Oyin is a university undergraduate who needs a free e-learning platform with personalized scheduling because they want to pass their web development class without affecting their university major
Michael
Michael is an high school graduate who needs free web development classes with offline access and personal mentoring because they want a guide through their web development classes.
Competitive Audit
An audit of a few competitor’s products provided direction on gaps and opportunities to address with the Learn Web Dev app.
Ideation
I did a quick ideation exercise to come up with ideas for how to address gaps identified in the competitive audit. My focus was specifically on personalized class scheduling and private mentor access
Starting the design
Digital wireframes
After ideating and drafting some paper wireframes, I created the initial designs for the Learn Web Dev app. These designs focused on quick and easy personalized learning schedule which helps balance learning with other activities
Usability study findings
To prepare for testing, I created a low-fidelity prototype which you can view here. I used this prototype to conduct an unmoderated usability study with 5 participants. Here are the main findings uncovered by the usability study:
1. Course readings
People could not easily identify the course readings while using the app.
2. Recommendations
People preferred to have the course recommendations on the homepage
3. Landing page
People needed a detailed and dedicated landing page
Understanding the user
I conducted user interviews, which I then turned into empathy maps to better understand the target user and their needs. I discovered that many target users, who are mostly teenagers and young undergraduates, could not afford to pay for web development classes and think it would be difficult to couple the web dev class with other responsibilities . I also found out that some target audience also have other e- learning limitations such as access to good network, constant network access and personal mentoring. Many of the participants welcomed the idea of an e-learning platform that can be accessed offline.
Refining the design
Mockups
Based on the insights from the usability studies, I applied design changes like adding the recommended courses to the homepage which can be accessed fully through vertical scrolling instead of a different page.
Additional design changes included adding dedicated landing page that allows users get into the experience from the get go.
Before usability studies
After usability studies
After usability studies
Accessibility considerations
1. IA
Initial focus of the home screen on personalized recommendations help define the primary task or action for the user.
2. Contrast
Used good color contrast and clear Call To Action buttons for easier use under low lighting
3. Navigation
Used Icons to help make navigation easier.
Refined designs
High fidelity prototype
The high-fidelity prototype followed the same user flow as the low-fidelity prototype, including design changes made after the usability study.
Refining the design
Sitemap
With the app designs completed, I started work on designing the responsive website. I used the Learn Web Dev sitemap to guide the organizational structure of each screen’s design to ensure a cohesive and consistent experience across devices.
Responsive designs
The designs for screen size variation included mobile, tablet, and desktop. I optimized the designs to fit specific user needs of each device and screen size.
Going forward
Takeaways
Impact
Users shared that the app actually made learning and scheduling super easy. One quote from peer feedback was that “the initiative is a good one and would help lots of youths”
What I learned
I learned that even though the problem I was trying to solve was a big one, diligently going through each step of the design process and aligning with specific user needs helped me come up with solutions that were both feasible and useful.
Next steps
1. Usability study
Conduct another round of usability studies to validate whether the pain points users experienced have been effectively addressed.
2. Research
Conduct more user research to determine any new areas of need.
3. Features
Add more features to improve overall experience for users.