*For best experiences, please view project on desktop browser
UI Design
UI Design
Inclusive Design
Inclusive Design
Accessibility Design
Accessibility Design
Gesture Recognition
Gesture Recognition
Motion
Motion
SignSpeak
SignSpeak
SignSpeak empower beginners with straightforward, practical lessons in American Sign Language (ASL), dedicated to make the learning process both enjoyable and informative for hearing & hard of hearing community. To focus on everyday signs that bridge the gap between cultures and spoken languages.
SignSpeak empower beginners with straightforward, practical lessons in American Sign Language (ASL), dedicated to make the learning process both enjoyable and informative for hearing & hard of hearing community. To focus on everyday signs that bridge the gap between cultures and spoken languages.
I served both as UI, UX designer in the project, working from idea to execution for comprehensive system of language learning app. This app aims to connect learners, educators, and the deaf community across the United States, providing an immersive and interactive learning experience.
I served both as UI, UX designer in the project, working from idea to execution for comprehensive system of language learning app. This app aims to connect learners, educators, and the deaf community across the United States, providing an immersive and interactive learning experience.
Role
Role
User Interface Designer
Researcher
User Experience Designer
Prototyper
Timeline
Timeline
August 2023 - December 2023
14 weeks
Team
Team
Solo Project
Overview
Overview
In the United States, 48 million people have experienced hearing issues at some point in their lives, and only one-third of them are elders.
This means the remaining two-thirds are individuals just like us. I am one of them, with minor hearing issues that only partially affect my daily life. These challenges often go unnoticed or unrecognized until we ourselves experience the difficulty of hearing and the blurring of words. It's at this point that we begin to understand the profound impact hearing loss can have on daily life.
In the United States, 48 million people have experienced hearing issues at some point in their lives, and only one-third of them are elders.
This means the remaining two-thirds are individuals just like us. I am one of them, with minor hearing issues that only partially affect my daily life. These challenges often go unnoticed or unrecognized until we ourselves experience the difficulty of hearing and the blurring of words. It's at this point that we begin to understand the profound impact hearing loss can have on daily life.
More importantly,
More importantly,
For those born Deaf or Hard of Hearing and hearing people who want to learn sign language for various reasons, finding the initial context to learn is challenging.
For those born Deaf or Hard of Hearing and hearing people who want to learn sign language for various reasons, finding the initial context to learn is challenging.
How might we create an online platform online platform to introduce, educate, and engage users in the world of sign language?
Learning a language without feedback leads to misunderstanding and decreased confidence. Therefore…
Introducing SignSpeak,
A real-time gesture recognition app is designed to assist beginners in visually & culturally understanding sign language.
Learning a language without feedback leads to misunderstanding and decreased confidence. Therefore…
Introducing SignSpeak,
A real-time gesture recognition app is designed to assist beginners in visually & culturally understanding sign language.
Learning a language without feedback leads to misunderstanding and decreased confidence. Therefore…
Introducing SignSpeak,
A real-time gesture recognition app is designed to assist beginners in visually & culturally understanding sign language.
Design
Design
Not just another language learning app.
It's about embracing a culture with confidence and authenticity.
Not just another language learning app.
It's about embracing a culture with confidence and authenticity.
SignSpeak equips self-learners with immediate feedback and applicable skills to ensure respectful engagement within the Deaf Community.
SignSpeak equips self-learners with immediate feedback and applicable skills to ensure respectful engagement within the Deaf Community.
The process behind these decisions…
The process behind these decisions…
Research
Research
My Goal
Research, strategize and design an engaging learning environment that sparks curiosity in beginners and sign language learners, aimed at extending their involvement in Deaf community events and meetups.
Understand context of American Sign Language
Growth of Hard of Hearing
Growth of Hard of Hearing
In the US, 1 of 20 have hard of hearing, and only 1/3 are 65+ seniors
In the US, 1 of 20 have hard of hearing, and only 1/3 are 65+ seniors
Rarely recognize as they wear cochlear implant/ hearing aid/ condition less severe
Rarely recognize as they wear cochlear implant/ hearing aid/ condition less severe
Expensive Learning Cost
Expensive Learning Cost
Offline academia courses taught in college cost over $2000+
Offline academia courses taught in college cost over $2000+
Many turned to online resources with a lack of personalized lesson plan
Many turned to online resources with a lack of personalized lesson plan
Accessibility & Inclusivity
Accessibility & Inclusivity
Only 22% of the platforms offer accessibility features
Only 22% of the platforms offer accessibility features
Need of emphasis on universal design for learning (UDL), gesture-to-text technologies, multimedia captioning, and responsive design
Need of emphasis on universal design for learning (UDL), gesture-to-text technologies, multimedia captioning, and responsive design
Competitive Analysis
Current User Journey
Competitive Analysis
Current User Journey
Competitive Analysis
Current User Journey
Interview Findings
To gain insights into user needs & wants, 4 interviews were conducted with experienced / beginner of sign language learners. Through the interviews, I found common pain points and wants, leading to development of persona and contextual inquiries
Establishing Persona
Establishing Persona
Ideation
Ideation
*Hover over each HMW to see design solutions
*Hover over each HMW to see design solutions
HMW
Create a course with self-directed tasks to enhance engagement and structure?
HMW
Create a course with self-directed tasks to enhance engagement and structure?
HMW
Create a course with self-directed tasks to enhance engagement and structure?
HMW
incorporate slow-motion feedback to enhance the learning process
HMW
incorporate slow-motion feedback to enhance the learning process
HMW
incorporate slow-motion feedback to enhance the learning process
HMW
integrate daily scenarios into language practice to enhance communication confidence
HMW
integrate daily scenarios into language practice to enhance communication confidence
HMW
integrate daily scenarios into language practice to enhance communication confidence
HMW
Create a campaign to correct misconceptions about hearing aids & cochlear implants in the Deaf community?
HMW
Create a campaign to correct misconceptions about hearing aids & cochlear implants in the Deaf community?
HMW
Create a campaign to correct misconceptions about hearing aids & cochlear implants in the Deaf community?
Low Fidelity Prototype
Advance the ideation process by transforming design concepts and information architectures into concrete models for validation
Before Before moving on to UI design, I prioritized solidifying the concept and visual language
Questions to be solved:
Design Principles
Branding
Design system now or later?
Design Principles
Design Principles
To ensure interactive playfulness that is easy for beginners to engage, the design language evolved around "Simplicity, Balance Study & Practice, and Active Tone"
To ensure interactive playfulness that is easy for beginners to engage, the design language evolved around "Simplicity, Balance Study & Practice, and Active Tone"
Simplicity
Visually driven language
Focuses on reducing clutter
Removing extraneous details
Balance Study & Practice
Equilibrium between guided learning & application
Real world Usage
Active Tone
Recognize diversity of users
Exploration of learning
Motivation & encouragement
Explore Design Language
Explore Design Language
Explore graphic elements with mood board design to best deliver the brand attributes above into consistency of design for brand alignment?
Explore graphic elements with mood board design to best deliver the brand attributes above into consistency of design for brand alignment?
Grayscale & Colors
Grayscale & Colors
brand name origin
Sign Language + Speak for Communication
Sign language is a language itself, not in spoken format, but with the right practice, it can “speak”/ visualize to others to facilitate communication
Logo
Mascot - Palmie
Logo
Mascot - Palmie
Features
Features
Process
Once visual language and design system is solidified, I started
design interfaces on features
Design Overview
Design Overview
Learn from interest
interactive
lesson/ games
make use of learning
uncover culture &
address misconceptions
personalized
display settings
Learn from interest
interactive
lesson/ games
make use of learning
uncover culture &
address misconceptions
personalized
display settings
Learn from interest
interactive
lesson/ games
make use of learning
uncover culture &
address misconceptions
personalized
display settings
Usability Testing
Usability Testing
Design Iterations
Change of design decisions based on 2 rounds of user test to ensure
cohesive design language, system, usability, and functionality.
Change of design decisions based on 2 rounds of user test to ensure
cohesive design language, system, usability, and functionality.
Feature 1 - Onboarding
Onboarding
Learn from Interests
Center elements
Refine Shape Language
Visibility
Onboarding
Learn from Interests
Center elements
Refine Shape Language
Visibility
Onboarding
Learn from Interests
Center elements
Refine Shape Language
Visibility
Search for specific lessons
Search for specific lessons
Separated from Home, become new tab on nav
Feature 2 - Interactive Lessons & Games
Interactive Lessons/Games
Unified Colors
Refine Top Navigation
Unit Corresponding Cards
Increased Visibility
Interactive Lessons/Games
Unified Colors
Refine Top Navigation
Unit Corresponding Cards
Increased Visibility
Interactive Lessons/Games
Unified Colors
Refine Top Navigation
Unit Corresponding Cards
Increased Visibility
clear hierarchy
vector illustration
center elements
minimalistic
Minimalistic Design
Removed Unnecessary Features
Increased Hierarchy
crowded info
barely visible fontsize
70% matching needs
more importance
Feature 3 - Make Use of Learning
Community Connections
Optimized White Space on Screen
Clarified Icon Purposes
Indication of Participation Outcomes and Details
Easy Finding in Joined Events
Community Connections
Optimized White Space on Screen
Clarified Icon Purposes
Indication of Participation Outcomes and Details
Easy Finding in Joined Events
Community Connections
Optimized White Space on Screen
Clarified Icon Purposes
Indication of Participation Outcomes and Details
Easy Finding in Joined Events
Feature 4 - Uncover Culture & Address Misconceptions
Respectful Signing
Interactive Quiz in Testing Knowledge
Clear Selection of Choice
Refined Navigation
Graphic for Display
Respectful Signing
Interactive Quiz in Testing Knowledge
Clear Selection of Choice
Refined Navigation
Graphic for Display
Respectful Signing
Interactive Quiz in Testing Knowledge
Clear Selection of Choice
Refined Navigation
Graphic for Display
Next Steps
Next Steps
What I learned
What I learned
Engaging Visual Brand Identity
Creating mood board, logo design, and principles to customize upon brand
The Power
of Gamifi-cation
Track learning progress with lesson/map view, using mascot to be motivational
Simplicity in cognitive loads
Minimizing un-necessary features on screen, less overwhelming on choices
intuitive learning experience
Bite-sized lesson division and speeds in user’s own learning for commitment
Engaging Visual Brand Identity
Creating mood board, logo design, and principles to customize upon brand
The Power
of Gamifi-cation
Track learning progress with lesson/map view, using mascot to be motivational
Simplicity in cognitive loads
Minimizing un-necessary features on screen, less overwhelming on choices
intuitive learning experience
Bite-sized lesson division and speeds in user’s own learning for commitment
Engaging Visual Brand Identity
Creating mood board, logo design, and principles to customize upon brand
Simplicity in cognitive loads
Minimizing unnecessary features on screen, less overwhelming on user choices for covenience
The Power
of Gamifi-cation
Track learning progress with lesson/map view, using mascot to be motivational
intuitive learning experience
Bite-sized lesson division and speeds in user’s own learning for commitment
Explorations on Hand Gesture Recognition Prototype
CREATED IN LENS STUDIO
Signs of words & numbers
Worked with pre-trained models
Added in text display on screen
Role
User Interface Designer
Researcher
User Experience Designer
Prototyper
Timeline
August 2023 - December 2023
14 weeks
Team
Solo Project
Overview
In the United States, 48 million people have experienced hearing issues at some point in their lives, and only one-third of them are elders.
This means the remaining two-thirds are individuals just like us. I am one of them, with minor hearing issues that only partially affect my daily life. These challenges often go unnoticed or unrecognized until we ourselves experience the difficulty of hearing and the blurring of words. It's at this point that we begin to understand the profound impact hearing loss can have on daily life.
More importantly,
For those born Deaf or Hard of Hearing and hearing people who want to learn sign language for various reasons, finding the initial context to learn is challenging.
Next Project
Next Project
Next Project