tutortek case study.
Responsive Website & Mobile App:
Technology Skills Tutoring for Teens​
​
The Product
​
TutorTek is an application and website designed to connect teenagers with tutors for technology skills support. This analysis delves into the process of conceptualization, development, and refinement that led to the creation of this platform.
​
​
Timeline
August - September 2023 | 2 Months
​
​
My role
​
Lead UX Designer, overseeing every stage of the product development lifecycle, across both the responsive website and mobile app.
​
​
My responsibilities
​
Conducting user interviews, creating wireframes and prototypes, conducting usability studies, addressing accessibility, iterating on designs, implementing responsive design, and overseeing branding and logo design.
​
​
Tools
​
Figma, Photoshop, Illustrator, Miro
​
​
Background
​
This responsive website and mobile app were created for the Google UX Certification class.
Project Overview​
​
The Problem
​
Design an app and responsive website to help tutor teenagers in technical skills.
​
​
The Goal
​
To develop the TutorTek Website and App, facilitating seamless connections between users seeking technical tutoring for teenagers and proficient tutors. This initiative aims to empower users by offering tailored tutoring sessions, enabling them to either acquire new skills or enhance existing ones essential for academic success. Effectiveness will be gauged through student achievements and tutor ratings, ensuring a rewarding learning experience for all users.
​
​
User Research​
​
Engaging in user interviews and crafting empathy maps allowed us to delve into the personas and needs of the target audience. Through meticulous research, we identified two primary user segments: students aged 14-16 and 17-19. While these findings affirmed initial hypotheses about the Tutor Tek App, they also unveiled an inclination among users toward prolonged engagement rather than fleeting interactions. Challenges surfaced around securing tutors available for consistent after-school sessions and managing high tutoring costs.
​
​
Pain Points
1
Relevant
Subjects
Users who are looking for tutoring want to learn subjects that are relevant in 2024.
2
Time
Users of this app are
usually in school until
2:30pm and need a tutor that can accommodate
their timing needs.
3
Personality
Users of this app are
looking for tutors that
they like and can spend an hour with which won’t be painful.
4
Comfort
Students do not like
having to be in awkward situations so setting up sessions via the app eliminates awkward phone calls.
User Personas:​
​
​
“Your family legacy is the most important
part of being part of a family”
​
Primary Persona description, Colin
Through interviews and research, Colin emerged as the primary user persona, representing the needs, values, goals, and frustrations of our potential B2C user base. His focus centers on acquiring knowledge and skills to advance his expertise.
Infinity Board:
Competitive Audit​
​
The competitive audit revealed a scarcity of resources catering to technical skills tutoring, particularly with a lack of freely accessible options tailored for teenagers.
Visual Detail of Competitive Audit Spreadsheet
Starting the design​
​
Architecture
​
The site map is separated into 3 areas, the bottom right shows the main navigation and the top left is the initial navigation. The third area is the explore option, for those teens who do not want to sign up yet but only want to browse and it is shown with red lines.
TutorTek site architecture visual map
Ideation: Paper Wireframes
​
Equipped with a thorough sitemap and detailed user flows tailored to the TutorTek Mobile App and Responsive Website, we initiated the development process by crafting paper wireframes for the mobile application. This strategic approach prioritized mobile usability, considering the likelihood of users accessing the platform via their phones initially.
The emphasis during screen creation was onboarding, strategically designed to captivate teenage users and encourage further exploration. Various onboarding techniques, including videos, games, and relevant information, were explored to enhance user engagement.
6 Iterations of Paper Wireframes for Onboarding Screen
Digital Wireframes & Lo-fidelity Prototype
​
To effectively engage teenagers, the interface must strike a balance between maintaining their interest without overwhelming them. By adopting a simplistic design approach and incorporating a dynamic logo alongside a continuously updated list of subjects, we can sustain their interest and encourage exploration within the platform.
Digital Wireframe depicting Onboarding Screen
TutorTek Lo-Fidelity Prototype
Brand Development​
​
Logo Ideation
​
In the process of creating the TutorTek logo, the initial ideations centered on conveying concepts of learning, intelligence, and performance improvement. Exploring visual elements such as the brain, stars, and symbols of education, like an open book, were pivotal.
Delving deeper, attention turned to the incorporation of the three T's in "Tutor", "Technology" and "Teens" and the introduction of a character to embody wisdom and learning, resulting in the inclusion of an owl symbolizing knowledge and the open book resting atop its head, symbolizing openness to learning.
14 Ideations of Logo Progression for TutorTek
Finalized Logo
The final logo was chosen for its inviting character, particularly appealing to the teenage demographic. The representation of the open book signifies a student's commitment to learning, while the simplicity of the design ensures easy recognition and versatility across various mediums. Overall, the chosen logo encapsulates the essence of TutorTek—facilitating learning in a welcoming and accessible manner.
Final TutorTek Logo in Color
UI Design - UI Kit
This UI Kit graphic serves as a foundational resource for digital product design, consolidating essential design components, patterns, and guidelines into a centralized repository. Its purpose is to expedite the design process while ensuring consistency and coherence across user interfaces. By providing designers with reusable building blocks such as buttons, forms, typography styles, and icons, the UI Kit streamlines workflow, fosters collaboration, and promotes adherence to brand guidelines. Its versatility enables scalability and evolution over time to accommodate new design patterns and features, ultimately contributing to the delivery of high-quality digital products.
​
User Interface Kit for TutorTek
Study Type:
​
Unmoderated Usability Study
Location
Remote, USA
Participants
5 Participants
Length
30 minutes
Add Search Option
Users wanted a search subjects option to find
exactly the subject area they were looking for.
Refine Navigation
Users wanted some
more direction in how to navigate the app in the order that provides the most effective results.
Rescheduling
Ease
Users wanted to be able to edit the dates and times of their sessions easily after they were already scheduled.
The usability study provided invaluable insights into user preferences and requirements, aligning with best practices and the psychology of human behavior. Participants articulated a strong need for a search option to facilitate seamless content discovery, reflecting the principle of reducing cognitive load and enhancing user engagement by enabling efficient access to relevant information.
​
Users underscored the significance of intuitive navigation pathways, echoing principles of human-centered design that prioritize user comprehension and task completion. Clearer guidance was identified as a crucial element in streamlining navigation and fostering a sense of control and mastery within the app interface, aligning with psychological theories emphasizing the importance of perceived usability and user empowerment.
​
Furthermore, participants emphasized the imperative of ease in rescheduling sessions. Intuitive features for editing dates and times after scheduling sessions were deemed essential for enhancing user satisfaction and retention. These findings underscore the importance of integrating user-centric design enhancements into the Tutortek app to optimize user experience and satisfaction.
Lo-Fidelity Prototype Onboarding Screen shown before usability study and
Hi-Fidelity Prototype shown after usability study findings were implemented
Lo-Fidelity Prototype Tutor Preferences Screen shown before usability study and
Hi-Fidelity Prototype shown after usability study findings were implemented
Usability Study​
​
After the low-fidelity prototype was finalized, a Usability Test Guide was written and proposed. Participants from high schools were then recruited to take part in a Zoom virtual usability test.
​
​
​
​
​
​
​
​
​
​
There were 7 tasks created to test the usability and critical objectives of the app including, joining the site and creating a profile, creating a tutoring schedule, choosing subject areas of interest and choosing a tutor.
The test goals included the following:
​​
-
Identifying any significant errors or interruptions in task completion within the app.
-
Assessing whether users encounter difficulties with navigation or interface design.
-
Gaining insights into successful task completion paths and recognizing effective UI elements.
-
Evaluating the placement and timing of relevant information to ensure it meets users' needs effectively.
​
​
​
Findings
​
Refining the Design​
​
Hi-Fidelity Prototype​
​
​
​
TutorTek Hi-Fidelity Prototype
Accessibility Features​
​
​
Heirarchy
​
To enhance accessibility, we implemented headings with varying text sizes to establish a clear visual hierarchy. This approach ensures that users can easily navigate through the content, with larger heading sizes indicating greater importance or significance. By employing this strategy, we aimed to improve overall usability and readability for all users, particularly those with visual impairments or cognitive disabilities.
​
​
Text-to-speech
​
In addition, we integrated a speech-to-text feature. This functionality allows users to dictate their inputs instead of typing, catering to individuals with motor disabilities or those who prefer hands-free interaction. By incorporating this feature, we aimed to improve inclusivity and usability, ensuring that all users can interact with the app effectively regardless of their physical capabilities.
​
​
Multilingual Support
​
To bolster accessibility within the app, we incorporated multilingual support, enabling users to access content in various languages. This feature caters to a diverse user base, including individuals who may prefer or require content in languages other than the default. By offering different language options, we aimed to enhance inclusivity and usability, ensuring that users from diverse linguistic backgrounds can engage with the app comfortably and effectively.
Responsive Designs​
​
The designs for screen size variation include mobile, tablet and desktop. We optimized the designs to fit specific user needs of each device and screen size.
TutorTek Hi-Fidelity Responsive Mock-ups for iPhone, iPad and Laptop
Infinity Board showing User Comments from Usability Study
Going Forward​
​
Key Takeaways​
​
​
​
Impact
Quote from study participant:
​
“It is so great to be able to just go on my phone and browse tutors for exactly what I need. It is so easy! What a relief!”
Insights
In this case study, our exploration into designing a product for high school students yielded valuable insights into their preferences and behaviors.
We learned that while high school students appreciate adult-looking themes, and they also gravitate towards designs incorporating characters, which adds a relatable and engaging element to the interface.
Simplicity emerged as a key factor, with students favoring interfaces that are easy to navigate and understand with minimal distractions. Furthermore, our research highlighted the importance of providing seamless usability, as students frequently reschedule events and value the flexibility to do so effortlessly.
Most importantly, we discovered that high school students take their education seriously, emphasizing the need for our product to support and enhance their learning experiences. These insights have informed our design decisions and will guide us in creating a product that resonates with our target audience and meets their needs effectively.
Next Steps
​
In conclusion, the case study has provided valuable insights into the design and functionality of the TutorTek app and website. Moving forward, there are several key next steps to consider for enhancing the platform's capabilities and user engagement.
Add Ratings
A rating system for the tutors would be a valuable future offering.
Donations
Creating a donation section for those who want to give back and pay for students’ tutors.
Volunteering
Creating a volunteer area for tutors who want to give back and volunteer their time and resources.
Introducing a rating system for tutors would be a valuable future offering. This feature would enable users to provide feedback on their tutoring experiences, helping to maintain quality standards and assist other students in selecting tutors that best meet their needs.
​
Creating a donation section within the platform would provide an opportunity for users who wish to give back and support students' access to tutoring services. By facilitating donations, the platform can further its mission of promoting educational equity and providing resources to students in need.
​
Establishing a dedicated volunteer area for tutors who wish to give back and volunteer their time and expertise would be a meaningful addition to the platform. This feature would allow tutors to contribute to the community by offering their services pro bono, fostering a sense of altruism and collaboration within the TutorTek ecosystem.
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
Pitched Concept
​
To further enhance TutorTek's impact and reach, a proposed concept involves integrating a mentorship program. This program would connect experienced tutors with students seeking long-term guidance and support in specific subject areas or career aspirations.
By fostering mentorship relationships, TutorTek can provide personalized guidance and encouragement to students, empowering them to achieve their academic and professional goals. Additionally, the mentorship program would enrich the TutorTek community by promoting knowledge sharing and fostering meaningful connections between tutors and students.
