Tools
Figma
Adobe Illustrator
ProtoPie
After Effect
Lottie
Audacity
Team
3 UX/UI Designer
5 Full stack Developer
Role
UX Designer
UI desiger
Graphic design
Timeline
13 Weeks
My Responsibilties
UX Research, Onboarding Process Design, Graphic Design, Branding, Landing Page Design, UX Methodology Implementation, User Journey Mapping Accessibility Integration, Competitor analysis, User Experience (UX) Design, Wireframing, Responsive Design, Front-end Development Collaboration.
Problems
The challenge at hand involves improving children's auditory health, with hurdles including inadequate access to audiologists, prolonged appointment wait times, and the risk of hearing damage from loud environments.
1
Define
User interview - Pain Points
-
Limited Access to Audiologists: Parents struggle to schedule appointments with audiologists, leading to delays in diagnosis.
-
Lack of Awareness: Many parents don't realize the importance of regular auditory health monitoring.
-
Difficulty in Detecting Hearing Issues: Parents find it hard to spot signs of hearing problems in their children.
-
Concerns about Environmental Noise: Parents worry about their children's exposure to loud environments.
{persona}
2
Research
Some Insight From Audiologist Interview
-
Signs of worsening hearing loss: Speech delays, lack of reaction to sounds, repetitive questioning.
-
Common symptoms: Speech delay, unclear speech, developmental delays.
-
Audiologists' queries: Visits to doctors or specialists after checkups.
-
Reasons parents consult audiologists: Ear infections, routine health checkups, detecting hearing disabilities.
-
Hearing disabilities and balance issues in children: Usually unrelated.
-
Home testing advice: Mind headphone noise and surrounding environment.
Competitor analysis
For Hearing Test Sound
-
We referred to the Hughson-Westlake procedure for the pure-tone test. This is a widely used method of manual audiometry that presents tones at different frequencies and intensities which is decreased until the level that the individual cannot hear by 10 dB and increased until the tone is audible again by 5 dB. We simplified this method and used the flow on the right, considering the development feasibility with time constraints.
-
We set the minimum intensity in the pure-tone test at 20 dB considered normal hearing and the maximum at 70 dB considered moderately severe hearing loss, as our main objective is to detect potential hearing loss at an early stage without harming children’s ears.
-
Regarding the frequency, 500, 1000, 2000, 3000, 4000, 6000, and 8000 Hz tones are tested.
Pure-Tone test method: Modified Hughson-Westlake
-
Mark the softest sound (dB) for each frequency (Hz).
-
1-2sec for each sound
-
Interval should be longer than test sounds.
-
Repeat this process for each frequency
3
Analysis & Planning
User Stories
User stories helps us to focus on the end-user by describing functionality from the user's perspective.
{Screen shot of user stories }
User Flow
Low-fidelity Wireframes
Usability Testing
After monitoring children's interactions, we realized that the previous approach was distracting from the main purpose. We simplified the test for better focus.
Casting a mascot was unclear for users, as it did not effectively communicate what they needed to do. Consequently, we opted for concise text explanations and used an icon as a sound indicator.
We changed the UX writing, Because we realized the importance of conveying seriousness without inducing unnecessary worry, which can be achieved by using clear language in a calm manner.
4
Design
Mood Board
We begin by conceptualizing ideas, themes, and visual concepts on a mood board. From there, we move on to UI design.
UI Kit
01. Typography
03. Logo
05. Dynamic animation
02. Color
04. Mascot & Illustrations
06. Icons
07. Buttons
08. Cards
High -fidelity Wireframes
5
Prototype
Steps:
-
Click on Find Animal Card
-
Take test
-
Volume up you will listen to sound.
-
To stop you can refresh the prototype from top left.
Prototype of Ear Training Quiz implemented in ProtoPie.
6
Testing
Heuristic Evaluation
In Heuristic Evaluation we cover :
-
Visibility of system status
-
Match between system and the real world
-
User control and freedom
-
Consistency and Standards
-
Help Users Recognize, Diagnose, and Recover From Errors
-
Error Prevention
-
Recognition Rather Than Recall
-
Flexibility and Minimalist Design
-
Aesthetic and Minimalist Design
-
Help and Documentation
{Screen shot of our Heuristic Evaluation }
7
Launch
Design Handover To Developers
We categorize each feature into sections. Subsequently, we gather all essential files, including design assets, the design system, annotations, and sticky notes, meticulously arranged within Figma, all set for Dev mode to streamline the transition.
{Screenshot of figma handover screen }
8
Iteration
Bug Bash
After handing over the design to the development team, they commenced building the product. Upon completion of the build, we conducted a bug bash for testing purposes and documented all identified bugs on Jira for resolved.
Necessary design changes were implemented based on developer's feedback.
{@Screenshot of Jira Board wiht bugs findings }
After Project
We had post-mortem meeting, also known as a retrospective, it is typically held after the completion of a project to evaluate its successes, failures, and areas for improvement.
Why project was Successful?
Teamwork Collaboration : Jira , Slack
Our designers and developers collaborate closely, leveraging our expertise to craft a unified product. With effective communication and weekly agile meetings, we ensure alignment. Our dedicated team consistently delivers exceptional results.
