Web Dev Tutor
App and responsive website | Project
How I designed a cross-platform experience to help connect with a web development tutor.
Purpose: People want to learn web development, but they don’t know where to start. A tutor with industry experience can guide and mentor adult learners to become educated web developers.
Goal: Design an app and website that will help tutor adults to learn web development and improve their learning experience.
My role: Create, design and deliver the user experience of a responsive website for viewing web development tutorials on multiple devices.
Screenshots
Project overview
About: Design a learning app and responsive website to help tutor adults in web development.
Purpose: To design a mobile app and responsive website to find and view web development tutorials that is easy and quick to use on various devices including mobile, tablet and desktop.
Duration: April to May 2022.
Tools: Figma, Figjam, Miro, Photoshop and Google Docs.
Project goal
Design an app and website that will help tutor adults to learn web development and improve their learning experience.
Design role in the project
I managed all stages of the project process including user research, testing and usability studies, wireframing, prototyping, designing low and hi-fidelity mockups, including accessibility and iterating on designs.
I designed the project using the design thinking UX process:
1 Empathise 2 Define 3 Ideate 4 Prototype 5 Test
Target audience
The target audience is for primary target users include university students and adults who would like to learn web development from a tutor.
Key challenges
Paint points:
-
Most users had difficulty knowing where to start learning web development online.
-
Most users expect easy ways to learn from the many resources already online.
-
Most users want to learn to get a job from studying.
User research
To understand the users and their needs, I conducted interviews and created empathy maps. I identified the primary user group as adults wanting to learn web development from a tutor with modern industry experience.
Most interview participants reported wasting time just passively watching videos instead of having someone with industry experience to help guide them with personalised learning plans and hands-on tutorials.
User persona - Meet 'James'
Problem statement: James is busy studying and working who needs guidance and support to learn web development to work as a professional web developers.
User journey map
Mapping James’s user journey revealed how helpful it would to recommend videos based on skills, experience and likes, and provide a user view history and library profile.
Paper wireframes
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 developing services that a tutor could provide online.
Digital wireframes
After ideating and drafting some paper wireframes, I created the initial designs for the Web Dev Tutor app. These designs focused on delivering personalised guidance from a tutor to users to learn web development. Easy access to personalised learning recommended by the tutor. Gamify the learning experience to keep repeat and regular learning.
Low-fidelity prototype
To prepare for usability testing, I created a low-fidelity prototype that connected the user flow of logging in to view a tutorial and contacting the tutor.
Usability study findings
Findings from the usability study helped guide the functional designs from wireframes to low-fidelity mockups.
Findings:
-
Most users had difficulty knowing where to start learning online.
-
Most users already know of the many resources online and expect easy ways to to get tutored online.
-
Most users want to learn to get a job from studying.
Mockups
Based on the insights from the usability studies, I applied design changes like providing a clear section from the home screen to browse upcoming tutorials and weekly targets to build consistent learning streaks and habits.
The second usability study gave feedback to additional design changes included adding a calendar to book tuition with the tutor.
Main user flow
High-fidelity prototype
The high-fidelity prototype provided an expanded user flow to include booking a tutorial and chat with the tutor, including design changes made after the usability study.
Sitemap
With the app designs completed, I started work on designing the responsive website. I used the Web Dev Tutor sitemap to guide the organisational 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 optimised the designs to fit specific user needs of each device and screen size.
Accessibility considerations
Reduce learnability of the website by featuring primary navigation to simply book, chat or learn with the tutor.
Clear labels for interactive elements and image alt tags that can be read by screen readers.
Provide colour contrast ratio of at least 4.5:1
Business impact
The app and website turns new users into returning users and the tutored service elevates the learning experience. One quote from user feedback was that “The Web Dev Tutor helps mentor me to become a professional web developer.”
Result
People know YouTube and the numerous videos already online. They want to take their career to the next-level by finding someone with industry experience to guide and mentor them to learn modern web development.