Tech Whiz Prototype
Tech Whiz is an app/website for teenagers or anyone who wants to learn technical skills in their freetime. Tech Whiz makes it convenient for users to pick up the app/website at any time and start learning valuable technical skills.
Conceptual Web & App Design
Problem
Teenagers feel behind and/or want to better prepare for their future. Available educational websites lack a technical curriculum which is in increasing demand for kids and teens to learn.
Note: This is a conceptual project I completed as part of Google's UX Design program.
Solution
Design an app/website that allows teenagers an easy and free way to improve their technical skills no matter their skill level or if they're on the go.
Overview
Project Duration: September 2022 - October 2022
My Role: User Research, Wireframing, Prototyping, Usability Testing, Responsive Design
Tools Used: Adobe XD
Empathize
User Research
I created personas, user stories, and user journey maps to understand the users I’m designing for and their needs. Most interview participants agreed that learning technical skills is valuable and should be taught in school. Besides school, there aren’t many resources geared towards teenagers to help them learn technical skills.
The feedback received through research made it clear that users would be open and willing to learn technical skills if they had access to a fun tool to help teach them.
Personas
In order to understand my key users better, I created two personas:
Define
User Stories
User Journey Maps
I created a user journey map of Kai's usual experience of learning technical skills to help identify possible pain points and improvement opportunities.
I also created a user journey map of Noah's mobile experience of the same task to help identify possible pain points and improvement opportunities for mobile users.
Problem Statements
Kai is a high school student who needs an exciting way to learn technical skills in their freetime because they feel behind and want to be better prepared for the future.
Noah is a high school graduate who needs a fun way to freshen up on their technical skills while on break because they want to prepare for college.
Noah is a high school graduate who needs a fun way to freshen up on their technical skills while on break because they want to prepare for college.
Competitive Analysis
After completing my user research, I conducted a competitive analysis of websites and apps that shared similar target audiences and provided similar services as Tech Whiz. I assessed each competitor by accessing their websites and installing their apps (if they had one).
Some gaps identified across the platforms included:
-
Unoptimized mobile experience
-
Lacking technical skill curriculum
-
Boring and overly formal layout
-
Requires sign in/paid subscription
-
Overwhelming and inconsistent
-
Lack of description
-
Weak information architecture
Some opportunities discovered based on my competitor analysis:
-
Optimize the app and website for accessibility
-
Simplify any material without reducing the quality or educational value
-
Strategically build the information architecture confirming it serves users needs and is geared towards the appropriate audience
-
Create material that generates user retention
-
Develop a strong brand identity that is consistent between desktop and mobile
Ideate
Crazy 8's
Beginning my ideation phase, I did a quick Crazy 8's exercise to come up with ideas for how to address gaps identified in the competitive audit. My focus was specifically on minigames and creating returning users.
Explanation for my ideation:
-
Screen 1 is welcoming back the user.
-
Screens 6 and 7 are menus to select what skill the user wants to work on that day.
-
Screens 3 through 5 are a look at some games that would be available to play (matching and typing).
-
Screen 8 appears after a lesson is completed. Users gain experience towards their level and receive in-game rewards.
-
Screen 2 appears when the user is ready to sign out.
Sitemap
After sketching ideas for what the app might look like, I needed to solidify the organization of the screens within the app and website.
Prototype
Paper Wireframe
Starting the prototype stage, I sketched out paper wireframes for the app's home screen and game menus.
The images to the left were the initial sketches and the image to the right is the refined version of the home screen. Stars were used to mark the elements of each sketch that would be used in the initial digital wireframe.
Digital Wireframe
Following my paper wireframes, I transferred the designs onto Adobe XD. The design below shows the digital wireframe of the home screen.
The design focuses on easy navigation and keeping the user focused and motivated to learn.
Lo-Fi Mobile Prototype
To prepare for usability testing, I created a low-fidelity prototype that connected the user flow of selecting a category and completing a minigame related to the category chosen.
Test
Research Plan
I tested the usability of the main user flow using the low-fidelity prototype. My main goals were to:
-
Evaluate the overall usability of the app.
-
Make note of any difficulties for further iteration/improvement.
-
Collect feedback from users on ease of navigating app.
Usability Study
To test my design, I tested the low-fidelity prototype on 5 imaginary users with an unmoderated usability study. Each participant conducted 3 tasks:
-
Select a category and then a subcategory
-
Select an activity from the menu
-
Play through and finish the game and then return to the home screen
In the document below, you can see observations I made about each participant's attempt.
Affinity Diagram
Using my notes from above, I integrated the information into an affinity diagram.
Themes and Insights
Patterns identified:
-
It was observed that 2 out of 5 participants had trouble navigating through the menus. This means that the layout and user flow of this specific action should be revised to make it easier and clearer to the user.
-
It was observed that 2 out of 5 participants had trouble playing the game. This means that the layout, description, and user flow of this specific action should be revised to make it easier and clearer to the user.
-
It was observed that 2 out of 5 participants were confused by the names of categories. This means that the organization and naming of categories needs to be revised to make it clearer to the user.
Insights identified:
-
Based on the theme that: the layout and user flow of menu navigation should be revised to make it easier and clearer to the user, an insight is: inserting a description on each screen that helps guide the user.
-
Based on the theme that: the layout, description, and user flow of the game should be revised to make it easier and clearer to the user, an insight is: inserting a descriptive title and directions on how to play.
-
Based on the theme that: the organization and naming of categories needs to be revised to make it clearer to the user, an insight is: inserting a description and descriptive title for each category and subcategory.
Implement
Visual Design
Entering the final stage of development, visual design was locked in and a sticker sheet was created to guide me through working on the interface design.
Refining the Design
Change #1: Based on the insights from the usability study, I included category names and titles, as well as placeholder images depicting the titles. This allowed users to identify the activity shown more easily.
Change #2: Additional design changes included adding category names and titles to each technical skill, providing a clearer design for users to be able to choose the activity best suited for them.
Change #2: Additional design changes included adding category names and titles to each technical skill, providing a clearer design for users to be able to choose the activity best suited for them.
Hi-Fi Mobile Prototype
The high-fidelity mobile prototype followed the same user flow as the low-fidelity prototype, including design changes made after the usability study.
Ideate
Sitemap
After completing the final prototype for the mobile app, it was time to think about how it would be transeferred over to a responsive website.
Prototype
Digital Wireframe
Using the sitemap and the mobile prototypes for reference, I was able to create a digital wireframe for the web version of Tech Whiz. The design below shows just one screen of my digital wireframe - two versions of the homepage.
Homepage
Alternate Homepage
Lo-Fi Desktop Prototype
After making the wireframe, I made the low-fidelity desktop prototype.
Implement
Mockups
The designs for screen size variation included mobile and desktop. I optimized the designs to fit the specific user needs of both devices and screen sizes.
Hi-Fi Desktop Prototype
Finally, it was time to create the high-fidelity desktop prototype.
Reflecting and Looking Ahead
While designing the Tech Whiz app and website, I learned that even though the problem I was trying to solve was a big one and technically demanding 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 include:
-
Add more educational material for users to learn technical skills.
-
Conduct research on how successful the app is in reaching the goal of helping teenagers learn technical skills.
-
Provide incentives and rewards to users for successfully completing material (and leveling up).