The Challenge
With the increasing popularity of digital design, many are finding the need to become knowledgable with design softwares. However, self-teaching can be challenging and many of these learners often find themselves needing some help.
How might we provide quick and accessible assistance for those learning new design softwares?
The Idea
Tutora is an online tutoring service dedicated to design softwares for people attempting to learn design softwares. This platform should be built with flexibility in mind to allow for accessibility considerations. It is with this in mind that "Tutora" should be built with web-responsive considerations for various screen sizes.
Duration
January 2023 - March 2023
Skills Involved
- User research & Personas
- User flows
- Web-repsonsive design
- Information architeture
- Wireframing, Mockups, & Prototyping
- Usability testing
Understanding The User
In order to better understand and identify the needs of the target users of Tutora, qualitative research was conducted in the form of interviews with 10 different participants. The information helped form the insights below.
Pain Points
Access
Many learners find it difficult to get access to proper and quality tutoring
Specificity
Online searching often
doesn’t provide answers
for specific problems that
learners are experiencing
Flexibility
In person tutoring can
often be inconvient due
to lack of flexibility for
tutors and learners
User Persona
Kayla
Kayla is a student in college and she’s been getting involved in various organizations in school that requires her be able to use some of the programs in the Adobe Suite. She’s been watching YouTube tutorials to teach herself to use Photoshop but lately she’s been running into some issues and setbacks. She would try and search for solutions online but none of them fully answers her specific problem. Her school doesn’t really have an art and design department to offer her help or tutors. Kayla wants to have access to an online design tutoring service to help her with her questions.
Building the Website - Early Stages
Planning Out the User Flow
Based on all the information gathered and insights formed, I created a core user flow for the task of connecting with a tutor. This will inform my wireframing and prototyping process for Tutora.
Information Architecture
In order to help myself lay out the wireframes and prototype, I also constructed a basic sitemap of Tutora.
Wireframe & Low-fidelity Prototype
The primary user flow was wireframed and laid out to create a low-fidelity prototype which was used for a usability study to inform the next steps of the design process.
Home/Menu Pages
While the main case study focuses on the website, I also explored the responsive design considerations for the Tutora's web app with the wireframes below.
Web App Wireframes
Finding a Tutor Flow
The main focus of the low-fidelity prototype is for users to navigate the prototype and connect with a tutor.
Building the Website - Refinement
Usability Study
Using the low-fidelity prototype, I conducted a usability study to recieve critiques and feedback on my early design in order to then make necessary changes to the website.
Online Sessions
All test sessions were conducted through Zoom with the Figma prototype
Main Flow Tested
Participants were asked to navigate their way through the prototype and find a tutor
6 Participants
The participants consisted of 3 males and 3 females, 5 of them in their 20s with 1 in his 30s
Minimal Interference
Participants were asked to perform all tasks with minimal guidance from the moderator (me)
10 - 15 Minute Sessions
All 6 sessions ran for 10 -15 minutes from start to finish.
Vocal Reasoning
Participants were asked to convey their thought process vocally throughout the tasks.
Usability Study Results and Insights
Task Progress
Users wanted a way to show them how many steps they have left in the tutoring finding process.
Selection
Users want to be able to select multiple programs to get help with to increase convenience.
Design Updates
Based on the usability tests, I implemented various changes to the design concepts including the ones in the mockups shown below.
Added Interactive Element
A button was added to the screen after a skill has been selected to allow users to add multiple skills to get help with
Task Completion Bar
In order to track where the user is in the tutor finding process, a progress tracker was incorporated at the very top of the screen
High-fidelity Prototype & Mockups
Below is a run through of the main work flow to connect with a tutor on the Tutora website.
In the interest of continuing with the exploration of screen responsive design, I also created some mockups for the web app. This is simply a vision as to what the Tutora site may look like when used through a mobile device.
Style Guide
Colors
#56C64E
#DBDBDB
#FFFFFF
Typography
18pt, 25pt, 30pt
Montserrat Bold
THE QUICK BROWN FOX JUMPS OVER THE LAZY DOG
the quick brown fox jumps over the lazy dog
Headline text
Emphasis text
Button text
18pt
Montserrat Regular
THE QUICK BROWN FOX JUMPS OVER THE LAZY DOG
the quick brown fox jumps over the lazy dog
Body Text
Takeaways
During the designing process for ‘tutora’, I learned the importance of creating a responsive design for websites. Taking accessibility into consideration is one of the most important parts of user experience design as it allows for more equity among users with different abilites and backgrounds. Usability testing was also absolutely vital as it provides useful inisights for iteration.