DeafStory
DeafStory
AN AR APP EMPOWERS DEAF COMMUNITY
AN AR APP EMPOWERS DEAF COMMUNITY
Overview
Overview
As one of the entries in the D&AD New Blood Award, I was inspired by the brief set by PENGUIN, which would like to break books into the mainstream cultural conversation and encourage readers to engage with books in innovative formats. I chose to create DEAFSTORY, an augmented reality social app that make users understand the achievements of deaf community, and connect to others who shared the similar interests or needs.
As one of the entries in the D&AD New Blood Award, I was inspired by the brief set by PENGUIN, which would like to break books into the mainstream cultural conversation and encourage readers to engage with books in innovative formats. I chose to create DEAFSTORY, an augmented reality social app that make users understand the achievements of deaf community, and connect to others who shared the similar interests or needs.
As one of the entries in the D&AD New Blood Award, I was inspired by the brief set by PENGUIN, which would like to break books into the mainstream cultural conversation and encourage readers to engage with books in innovative formats. I chose to create DEAFSTORY, an augmented reality social app that make users understand the achievements of deaf community, and connect to others who shared the similar interests or needs.
My Role
My Role
My Role
Sole UX/UI Designer
Sole UX/UI Designer
Sole UX/UI Designer
Sole Visual Designer
Sole Visual Designer
Sole Visual Designer
Duration
Duration
Duration
Duration
Three months
Three months
Three months
Tools
Tools
Tools
Figma, Adobe XD, Photoshop, Illustrator, Maze, Usability Hub, Paper & Pencil
Figma, Adobe XD, Photoshop, Illustrator, Maze, Usability Hub, Paper & Pencil
Figma, Adobe XD, Photoshop, Illustrator, Maze, Usability Hub, Paper & Pencil
Design Process
Design Process
Design Process
Discovery
Discovery
Discovery
I have conducted remote interviews to deeply understand users’ needs, motivations, goals and points of friction. In the interviews, I have learnt that all users would like to see an inclusive and accessible learning environment in schools. They are willing to learn, deliver and promote signed versions of teaching materials. However, they stated they would prefer a solution accounted for 1. Content richness, 2. Content quality and 3. Fast working pace.
I have conducted remote interviews to deeply understand users’ needs, motivations, goals and points of friction. In the interviews, I have learnt that all users would like to see an inclusive and accessible learning environment in schools. They are willing to learn, deliver and promote signed versions of teaching materials. However, they stated they would prefer a solution accounted for 1. Content richness, 2. Content quality and 3. Fast working pace.
I have conducted remote interviews to deeply understand users’ needs, motivations, goals and points of friction. In the interviews, I have learnt that all users would like to see an inclusive and accessible learning environment in schools. They are willing to learn, deliver and promote signed versions of teaching materials. However, they stated they would prefer a solution accounted for 1. Content richness, 2. Content quality and 3. Fast working pace.
Problem Statement
Problem Statement
Problem Statement
Potential Solution
Potential Solution
Potential Solution
Use Cases
Use Cases
Use Cases
While most of the bibliography only include hearing celebrities, creating a platform for users to instantly access to remarkable stories of deaf people through electronic devices. Provide real-time interactions, sharing functions and self-learning mode that will lead to solutions that tailored to the users’ specific needs.
While most of the bibliography only include hearing celebrities, creating a platform for users to instantly access to remarkable stories of deaf people through electronic devices. Provide real-time interactions, sharing functions and self-learning mode that will lead to solutions that tailored to the users’ specific needs.
While most of the bibliography only include hearing celebrities, creating a platform for users to instantly access to remarkable stories of deaf people through electronic devices. Provide real-time interactions, sharing functions and self-learning mode that will lead to solutions that tailored to the users’ specific needs.
The idea for DeafStory surfaced to enhance the confidence of deaf students and have the hearing students and teachers learn signed language according to the teaching content. We will know the app works when there are large majority of users using the app to watch signed translations, message with others and share to the social media platforms.
The idea for DeafStory surfaced to enhance the confidence of deaf students and have the hearing students and teachers learn signed language according to the teaching content. We will know the app works when there are large majority of users using the app to watch signed translations, message with others and share to the social media platforms.
The idea for DeafStory surfaced to enhance the confidence of deaf students and have the hearing students and teachers learn signed language according to the teaching content. We will know the app works when there are large majority of users using the app to watch signed translations, message with others and share to the social media platforms.
There is only 2% of 34 million deaf children in the world could access to sign language in early childhood. This causes them suffer from various developmental delays.
There is only 2% of 34 million deaf children in the world could access to sign language in early childhood. This causes them suffer from various developmental delays.
There is only 2% of 34 million deaf children in the world could access to sign language in early childhood. This causes them suffer from various developmental delays.
An app that inspire users by the achievement attained by the deaf community, encourage sharing to others who might maintain misconceptions, and connect with others.
An app that inspire users by the achievement attained by the deaf community, encourage sharing to others who might maintain misconceptions, and connect with others.
An app that inspire users by the achievement attained by the deaf community, encourage sharing to others who might maintain misconceptions, and connect with others.
Identifying the need of bridging the perceived gap between hearing and non-hearing community
Identifying the need of bridging the perceived gap between hearing and non-hearing community
Identifying the need of bridging the perceived gap between hearing and non-hearing community
Identifying scenarios when contextual flexibility is needed
Identifying scenarios when contextual flexibility is needed
Identifying scenarios when contextual flexibility is needed
This research phase help me brainstorm the possible creative solutions which are flexible and feasible to cater all-rounded needs from various user stories.
This research phase help me brainstorm the possible creative solutions which are flexible and feasible to cater all-rounded needs from various user stories.
This research phase help me brainstorm the possible creative solutions which are flexible and feasible to cater all-rounded needs from various user stories.
I have then created a site map to better organise the informational structure of my app and how is the effectiveness of the visual elements enhancing the overall user flows. I have conducted open card sorting to revise the structure. The result indicates that it is better to combine the Chat Room function under one umbrella function with other interactive activities, which I named as Connection. I have also added sub-categories under Art division after participants comment the similar categories are confusing.
I have then created a site map to better organise the informational structure of my app and how is the effectiveness of the visual elements enhancing the overall user flows. I have conducted open card sorting to revise the structure. The result indicates that it is better to combine the Chat Room function under one umbrella function with other interactive activities, which I named as Connection. I have also added sub-categories under Art division after participants comment the similar categories are confusing.
I have then created a site map to better organise the informational structure of my app and how is the effectiveness of the visual elements enhancing the overall user flows. I have conducted open card sorting to revise the structure. The result indicates that it is better to combine the Chat Room function under one umbrella function with other interactive activities, which I named as Connection. I have also added sub-categories under Art division after participants comment the similar categories are confusing.
Supported by the evidence provided in the research stages, I start sketching low-fidelity wireframes with pen and paper. Continuous iterations were made in different fidelity stages to improve the app’s functionality and aesthetics.
Supported by the evidence provided in the research stages, I start sketching low-fidelity wireframes with pen and paper. Continuous iterations were made in different fidelity stages to improve the app’s functionality and aesthetics.
Supported by the evidence provided in the research stages, I start sketching low-fidelity wireframes with pen and paper. Continuous iterations were made in different fidelity stages to improve the app’s functionality and aesthetics.
Ideation
Ideation
Encouraging Exploration and Connection
Ideation
Encouraging Exploration and Connection
Encouraging Exploration and Connection
I prepared usability testing by creating a scenario and tasks descriptions to ensure an easy and clear testing experience for my participants. I conducted 10 remote preference tests and amend the user flows and designs based on the valuable insights gained from the tests.
I prepared usability testing by creating a scenario and tasks descriptions to ensure an easy and clear testing experience for my participants. I conducted 10 remote preference tests and amend the user flows and designs based on the valuable insights gained from the tests.
I prepared usability testing by creating a scenario and tasks descriptions to ensure an easy and clear testing experience for my participants. I conducted 10 remote preference tests and amend the user flows and designs based on the valuable insights gained from the tests.
Some participants pointed out that it is confusing for them to scroll down to the end of the page to find the "Save " button.
Some participants pointed out that it is confusing for them to scroll down to the end of the page to find the "Save " button.
Some participants pointed out that it is confusing for them to scroll down to the end of the page to find the "Save " button.
Iterations
Iterations
Iterations
To improve this, the position of the "Save" button is fixed to the bottom of screen whenever users scrolling. Moreover, the colour is changed to blue with an overlaying box added to make the visuals more eye-catching.
To improve this, the position of the "Save" button is fixed to the bottom of screen whenever users scrolling. Moreover, the colour is changed to blue with an overlaying box added to make the visuals more eye-catching.
To improve this, the position of the "Save" button is fixed to the bottom of screen whenever users scrolling. Moreover, the colour is changed to blue with an overlaying box added to make the visuals more eye-catching.
Participants reflect that they are frustrated to click the chat icon in a chatroom environment. It would be more familiar to them with the interactive chat box appeared right after they enter the chat room.
Participants reflect that they are frustrated to click the chat icon in a chatroom environment. It would be more familiar to them with the interactive chat box appeared right after they enter the chat room.
Participants reflect that they are frustrated to click the chat icon in a chatroom environment. It would be more familiar to them with the interactive chat box appeared right after they enter the chat room.
Instead of displaying the app's bottom navigation bar, a sticky text bar is placed in the bottom to encourage instant communication. To make the app more accessible, an audio chat option is also available to cater the needs of different users.
Instead of displaying the app's bottom navigation bar, a sticky text bar is placed in the bottom to encourage instant communication. To make the app more accessible, an audio chat option is also available to cater the needs of different users.
Instead of displaying the app's bottom navigation bar, a sticky text bar is placed in the bottom to encourage instant communication. To make the app more accessible, an audio chat option is also available to cater the needs of different users.
There are participants that pointed out that it is difficult for them to find the "Save" and " Share" icons in the detailed deaf stories pages. Besides, they found confusing to refer to the signed version.
There are participants that pointed out that it is difficult for them to find the "Save" and " Share" icons in the detailed deaf stories pages. Besides, they found confusing to refer to the signed version.
There are participants that pointed out that it is difficult for them to find the "Save" and " Share" icons in the detailed deaf stories pages. Besides, they found confusing to refer to the signed version.
There are participants that pointed out that it is difficult for them to find the "Save" and " Share" icons in the detailed deaf stories pages. Besides, they found confusing to refer to the signed version.
To improve these issues, an icon with hand signal, signed version of the story, will replace the " Share" icon. Moreover, a bar in white at the bottom the page make the icons more visible to users.
To improve these issues, an icon with hand signal, signed version of the story, will replace the " Share" icon. Moreover, a bar in white at the bottom the page make the icons more visible to users.
To improve these issues, an icon with hand signal, signed version of the story, will replace the " Share" icon. Moreover, a bar in white at the bottom the page make the icons more visible to users.
#1 Key Finding: Users prefer to minimize the scroll down action
#1 Key Finding: Users prefer to minimize the scroll down action
#1 Key Finding: Users prefer to minimize the scroll down action
#2 Key Finding: Users avoid second layer of navigation
#2 Key Finding: Users avoid second layer of navigation
#2 Key Finding: Users avoid second layer of navigation
Solution: Show sticky CTA buttons on the page
Solution: Show sticky CTA buttons on the page
Solution: Show sticky CTA buttons on the page
Solution: Replace chat history with chatroom
Solution: Replace chat history with chatroom
Solution: Replace chat history with chatroom
Solution: Place relevant and universal familiar icon buttons in one page
Solution: Place relevant and universal familiar icon buttons in one page
Solution: Place relevant and universal familiar icon buttons in one page
#3 Key Finding: Users avoid second layer of navigation
#3 Key Finding: Users avoid second layer of navigation
#3 Key Finding: Users avoid second layer of navigation
Before
Before
After
After
Before
Before
After
Before
Before
After
I used illustrations as the pop-up images at the first stage of scanning the book-page, as well as the signed translation detailed pages in the app, to engage with users in an uplifting way and get them excited to engage with the deaf stories.
I used illustrations as the pop-up images at the first stage of scanning the book-page, as well as the signed translation detailed pages in the app, to engage with users in an uplifting way and get them excited to engage with the deaf stories.
I used illustrations as the pop-up images at the first stage of scanning the book-page, as well as the signed translation detailed pages in the app, to engage with users in an uplifting way and get them excited to engage with the deaf stories.
I used illustrations as the pop-up images at the first stage of scanning the book-page, as well as the signed translation detailed pages in the app, to engage with users in an uplifting way and get them excited to engage with the deaf stories.
I used illustrations as the pop-up images at the first stage of scanning the book-page, as well as the signed translation detailed pages in the app, to engage with users in an uplifting way and get them excited to engage with the deaf stories.
I used illustrations as the pop-up images at the first stage of scanning the book-page, as well as the signed translation detailed pages in the app, to engage with users in an uplifting way and get them excited to engage with the deaf stories.
I used illustrations as the pop-up images at the first stage of scanning the book-page, as well as the signed translation detailed pages in the app, to engage with users in an uplifting way and get them excited to engage with the deaf stories.
Character
Design
Character Design
Character
Design
The app’s main colours were blue and orange. The oranges evoked positivity and enthusiasm, while the blues maintain dedication and calmness.
The app’s main colours were blue and orange. The oranges evoked positivity and enthusiasm, while the blues maintain dedication and calmness.
The app’s main colours were blue and orange. The oranges evoked positivity and enthusiasm, while the blues maintain dedication and calmness.
The app’s main colours were blue and orange. The oranges evoked positivity and enthusiasm, while the blues maintain dedication and calmness.
For the typography, I used Mullingar, a warm serif font with soft edges, as the headlines of the pop-up images, to give the app a sense of approachability and versatility. For all other content text, I used Fira Sans to ensure the legibility.
For the typography, I used Mullingar, a warm serif font with soft edges, as the headlines of the pop-up images, to give the app a sense of approachability and versatility. For all other content text, I used Fira Sans to ensure the legibility.
For the typography, I used Mullingar, a warm serif font with soft edges, as the headlines of the pop-up images, to give the app a sense of approachability and versatility. For all other content text, I used Fira Sans to ensure the legibility.
For the typography, I used Mullingar, a warm serif font with soft edges, as the headlines of the pop-up images, to give the app a sense of approachability and versatility. For all other content text, I used Fira Sans to ensure the legibility.
Colour &
Typography
Pale Yellow
Pale Yellow
Pale Yellow
#FFF4DB
#FFF4DB
Light Orange
Light Orange
#FFC392
#FFC392
Sky
Sky
Sky
#99D6FF
#99D6FF
#99D6FF
Black
Black
#000000
#000000
#FFFFFF
#FFFFFF
#FFFFFF
White
White
White
Light Grey
Light Grey
#7E7E7E
#7E7E7E
Pale Yellow
Pale Yellow
#FFF4DB
Light Orange
Light Orange
#FFC392
#FFC392
Sky
Sky
#99D6FF
Black
Black
#000000
#000000
#FFFFFF
White
Light Grey
#7E7E7E
#FFF4DB
Light Grey
#7E7E7E
Light Orange
#FFC392
Black
#000000
Onboarding and Homepage Exploration
Networking
Scanning and Registration process
Networking
Onboarding and Homepage Exploration
Networking
Scanning and Registration process
After
Though I have conducted in-depth user researches before producing prototypes, I found it will only be credible after the amendment was made based on the usability testing results. The biggest error occurred with the onboarding process is they could not recognise the save button until they scroll down to the bottom of interface. I redesigned it in the next iteration, which also remind me that time saving is the number one priority in users’ mental models, though they are used to vertical scrolling mode.
Moreover, I also conducted a preference test to see which version of colour mode participants preferred. This make me understand the sense of colour combinations are different among my personal taste and users’ feelings. Keeping users’ needs front and centre is critical to enhance the usability of the app.
Collecting constructive criticism from different groups of people is of paramount importance in improving my design. Not only did I asked comment from deaf teacher , but also hearing teachers and parents with hearing kids. For example, one interviewee who is a primary teacher, raised a question what to motivate hearing parents to learn sign languages at home. As parents would be also users of my app, their experience should be taken into more in-depth consideration.
I would also like to increase the accessibility of the app, especially for grey users. As there are increasing numbers of working parents in the world, most of their children are raised by grandparents. Therefore, the needs of older users who maybe less tech-savvy should be addressed as well.
Though I have conducted in-depth user researches before producing prototypes, I found it will only be credible after the amendment was made based on the usability testing results. The biggest error occurred with the onboarding process is they could not recognise the save button until they scroll down to the bottom of interface. I redesigned it in the next iteration, which also remind me that time saving is the number one priority in users’ mental models, though they are used to vertical scrolling mode.
Moreover, I also conducted a preference test to see which version of colour mode participants preferred. This make me understand the sense of colour combinations are different among my personal taste and users’ feelings. Keeping users’ needs front and centre is critical to enhance the usability of the app.
Collecting constructive criticism from different groups of people is of paramount importance in improving my design. Not only did I asked comment from deaf teacher , but also hearing teachers and parents with hearing kids. For example, one interviewee who is a primary teacher, raised a question what to motivate hearing parents to learn sign languages at home. As parents would be also users of my app, their experience should be taken into more in-depth consideration.
I would also like to increase the accessibility of the app, especially for grey users. As there are increasing numbers of working parents in the world, most of their children are raised by grandparents. Therefore, the needs of older users who maybe less tech-savvy should be addressed as well.
Though I have conducted in-depth user researches before producing prototypes, I found it will only be credible after the amendment was made based on the usability testing results. The biggest error occurred with the onboarding process is they could not recognise the save button until they scroll down to the bottom of interface. I redesigned it in the next iteration, which also remind me that time saving is the number one priority in users’ mental models, though they are used to vertical scrolling mode.
Moreover, I also conducted a preference test to see which version of colour mode participants preferred. This make me understand the sense of colour combinations are different among my personal taste and users’ feelings. Keeping users’ needs front and centre is critical to enhance the usability of the app.
Collecting constructive criticism from different groups of people is of paramount importance in improving my design. Not only did I asked comment from deaf teacher , but also hearing teachers and parents with hearing kids. For example, one interviewee who is a primary teacher, raised a question what to motivate hearing parents to learn sign languages at home. As parents would be also users of my app, their experience should be taken into more in-depth consideration.
I would also like to increase the accessibility of the app, especially for grey users. As there are increasing numbers of working parents in the world, most of their children are raised by grandparents. Therefore, the needs of older users who maybe less tech-savvy should be addressed as well.
Though I have conducted in-depth user researches before producing prototypes, I found it will only be credible after the amendment was made based on the usability testing results. The biggest error occurred with the onboarding process is they could not recognise the save button until they scroll down to the bottom of interface. I redesigned it in the next iteration, which also remind me that time saving is the number one priority in users’ mental models, though they are used to vertical scrolling mode.
Moreover, I also conducted a preference test to see which version of colour mode participants preferred. This make me understand the sense of colour combinations are different among my personal taste and users’ feelings. Keeping users’ needs front and centre is critical to enhance the usability of the app.
Collecting constructive criticism from different groups of people is of paramount importance in improving my design. Not only did I asked comment from deaf teacher , but also hearing teachers and parents with hearing kids. For example, one interviewee who is a primary teacher, raised a question what to motivate hearing parents to learn sign languages at home. As parents would be also users of my app, their experience should be taken into more in-depth consideration.
I would also like to increase the accessibility of the app, especially for grey users. As there are increasing numbers of working parents in the world, most of their children are raised by grandparents. Therefore, the needs of older users who maybe less tech-savvy should be addressed as well.
Reflection
Reflection
Reflection
After
After
High-Fidelity Designs
High-Fidelity Designs
High-Fidelity Designs
Scanning and Registration process
Onboarding and Homepage Exploration
The app’s main colours were blue and orange. The oranges evoked positivity and enthusiasm, while the blues maintain dedication and calmness.
For the typography, I used Mullingar, a warm serif font with soft edges, as the headlines of the pop-up images, to give the app a sense of approachability and versatility. For all other content text, I used Fira Sans to ensure the legibility.
Colour & Typography
The app’s main colours were blue and orange. The oranges evoked positivity and enthusiasm, while the blues maintain dedication and calmness.
For the typography, I used Mullingar, a warm serif font with soft edges, as the headlines of the pop-up images, to give the app a sense of approachability and versatility. For all other content text, I used Fira Sans to ensure the legibility.
Colour &
Typography