App and Responsive Website for Note-take Themes
Note-take Themes reached out to design an app that will help people with motor impairments record their notes.
App and Responsive Website for Note-take Themes
Project URL: Hi-Fidelity Prototype
Tools: Adobe XD | Figma
Client Name: Note-take Themes
Completed Date: September 01, 2023
Table of contents
Project Overview
Note-take Themes is a fictional service I used for my Google UX Designer Certification project. The purpose of this project was to create a product for common good. Note-take themes is an online service focused on helping people with motor impairments or busy individuals to take, record notes and access them on the go on multiple devices.
The Problem
Current note-taking templates don’t support advanced voice over features for people with motor impairments.
The Goal
Design an app that will help people with motor impairments record their notes and a website for busy individuals that are in need for a note taking templates on the go.
My Role
My role was to lead the app and responsive website design from conception to delivery.
My Responsibilities
My responsibilities included conducting interviews, paper and digital wireframing, low and high-fidelity prototyping, conducting usability studies, accounting for accessibility, iterating on designs, determining information architecture, and responsive design.
Understanding the User: Research Summary
A competitive audit revealed that current market for note taking services has a gab. I used data from competitive audit to develop interview questions, which were then used to conduct user interviews. During user research, I conducted interviews and created empathy maps to better understand the users I’m designing for and their needs. A primary user group identified through the research were people with motor impairments and busy individuals looking to take notes on the go and access them from all devices.
User Research Pain Points
1. Time
Busy individuals need to take notes on the go from any device.
2. Gab on the market
People with motor impairments need an app supporting advanced voice over controls.
Persona: Kimberly
Problem statement: Kimberly is an Army veteran with motor impairments who is in need for note-taking app offering advanced voice over control features because current note-taking apps don’t offer it.
User Journey Map: Kimberly
Mapping Kimberly's user journey revealed how easy would it be to record notes.
Prototyping
Ideation -> Paper Wireframes -> Digital Wireframes -> Low-Fidelity Prototype
An ideation exercise helped me to come up with some useful features for the app. Then I created paper wireframes, a draft showing iterations of home page of the app on paper to ensure that the elements that made it to digital wireframes would be well-suited to address user pain points.
Ideation Process
Main User Flow: Create and Save New Notebook
Usability Study
I conducted a usability study for a Low-Fidelity prototype. Five participants, three males and two females, between ages of 18-65 were asked to complete unmoderated usability study. Research questions this usability study tried to answer were:
- What can we learn from the user flow, or the steps that users take to create the notebook?
- Are there any parts of the user flow where users get stuck?
- How easy or difficult was the app for users?
Usability Study Findings: Research Insights
1. Add Filter Option to Available Themes
4 out of 5 participants wished available themes could be filtered.
2. Add Blank Template
All participants were looking for a blank template that can be customized.
3. Add Save as option
3 out of 5 participants didn’t like to drag and drop files to place them in desire category. Save as option was added allowing to choose category and subject while saving the file.
Refining the Design
Mockups | High-Fidelity Prototype | Accessibility
Mockups: Home Screen Changes
Filter option for available themes and blank template were added.
Save as option was added allowing users to place their new notebook into category or subject while saving the file.
Main User Flow: Create New Notebook
Accessibility Consideration
The design is accessible to users who may have an impairment or disability.
Provided access to users who are vision impaired through adding ALT TEXT to images for screen readers.
Clear labels for interactive elements that can be read by screen readers.
Large button on a dashboard allows easy activation of voice over control feature.
Takeaways: Impact & Results
The users described the app easy to use and straight forward. Most users found the flow of creating new notebook easy.
What I Learned
Throughout the project, I learned the importance of research and testing. The usability study revealed so many details I’ve missed. Also, peer review allowed me to reconsider my design for better. I experienced that design is on going process. Each iteration pushed my design further.
Next Steps
Conduct another round of usability studies to validate whether the pain points users experienced have been effectively addressed.
Conduct research on how successful the app is among users with motor impairments.