typo*
My fresh take on touch typing training, integrating an on-screen keyboard for an intuitive gamified learning experience with precision-focused streak challenges.
Timeline
Mar - May 2023
Tools
Figma
Team
Individual
Type
Personal Project
OVERVIEW
Problem Statement
In the post-pandemic digital landscape, where 88% of corporate and academic work had shifted online, efficiency in typing had become critical. Errors and slow typing speeds can cause frustration and delay in work completion. Therefore, improving typing proficiency is essential for timely and accurate task execution.
EMPATHISE
User Research
After putting out a brief survey and interviewing 6 individuals ranging from students to working professionals across various industries, I've categorized the typing habits and challenges into three distinct personas:
01 The Speed Typist
-
Ages 20-30, Students & Young Professionals
-
Frequently makes typing errors due to prioritizing speed over accuracy.
-
Boasts an impressive typing speed, often exceeding industry averages.
02 The Careful Composer
-
Ages 25-40, Professionals & Academics.
-
Maintains a low error rate with careful typing practices.
-
Achieves a decent typing speed that balances efficiency with precision.
03 The Expert
-
Ages 30-45, Senior Professionals & Analysts.
-
Rarely makes errors, showcasing high levels of accuracy in typing.
-
Exhibits excellent typing speed while maintaining error-free work.
Persona Pain Points
-
Students aim to meet deadlines for assignments without delay.
-
Developers and Programmers seek to minimize coding errors.
-
Employees working with data-intensive tasks strive to avoid typing errors that could result in complications.
IDENTIFY
Objectives
-
To instruct users about blind typing and how they can one day type without looking at the keyboard and pressing any wrong keys.
​
-
Gamify typing for users to make their journey full of fun so that they have a sense of motivation to work on it daily.
​
-
Help them monitor their progress towards efficient typing and reduce their stress about their work deadlines.
CREATE
Design System
Color Palette
Once the website's framework was established, I curated a color palette that projected calmness, motivation, and peace, essential for focused and optimistic learning.​
Typography
For the typography, I selected 'Avenir' and 'Museo' for their readability and modern look, after considering various options. These choices aimed to make the design familiar to users. Additionally, I developed a basic design system with primary components for the app interface, aligning with the UI design choices.​
PROTOTYPE
Wireframes
I started off by sketching the low-fidelity wireframes to visualize the basic web interface. ​
Final Screens
The following are the screens of typo*.​
Onboarding & Profile
Analyze your progress in a graphical way.​
REFLECTION
What did I learn?
-
This project gave me the liberty to experiment with the visual design aspects of interface design without considering technical limitations. I learned a lot while playing around with different layouts, interactions, and styles.
​
-
This project helped me hone my interface design skills by learning how to build an extensive design system from scratch.
​
-
This project helped me analyze a problem space holistically, diving deep into user-level interactions when needed.