Timeline: 2 Weeks • Materials: Sticky Notes, Pen, Paper, Figma
UX Techniques: Business Analysis, User Interviews, Surveys, Secondary Research, Competitive/Comparative Analysis, Affinity Mapping, User Flows, User Archetypes, Site Map, Sketching, Wireframing, Usability Testing
The Challenge
I was told to check out the website that might need an help. As a UX-designer, I can see some flaws in the website design.
So, for a challenge, I decided to delve deeper into the design of their website by finding problems and proposing innovative solutions.
As a visual professional, I wanted to experiment with design style. The purpose of this project is to showcase my analytical & design skills, upgrade my portfolio, and have some fun along the way. I have chosen to focus on specific problems for job seekers, suggesting a full redesign.
Background
Deaf Center of Nevada is a Nevada based non-profit organization whose mission is to provide service/resource to all levels of deaf and hard of hearing, and also for hearing too.
Since 2018, they’ve been working tirelessly to provide resource and advocacy in legal, support, education, mentor for the parent with deaf child, equipments, and serve community.
Images below are screenshots of actual website. Sides were cut off, too wordy, inconsistent design, poor web load, and buttons don't work. Not mobile friendly.
The Problem
DCN may be successful by creating word of mouth and receive generous support backing by the people in the community but website itself may have hurt DCN's reputation because it is new and website doesn't represent modern non-profit organization.
The challenge was to explore different ways it could expand the current service to include on an individual level who are deaf and hearing who may or may not have visual impairment.
The primary business needs we defined were:
1. Improve people’s understanding
2. Increase contributions to the Center of Nevada
3. Encourage them to look up accurate information instead through word of mouth
Solution
I re-designed the current Deaf Center of Nevada website to provide individuals with more meaningful information about resource, DCN’s mission and programs, and easy ways to get involved. This would help establish trust and confidence in Deaf Center of Nevada, increase awareness, and ultimately empower individuals to get involved.
Research
User Research
To gain a better understanding of how we could more effectively address this problem, we conducted a series of user interviews and surveys. Questions we asked included:
Tell us more about what information you care about and why?
How do you access information about resource/service you want to use?
What factors influence you the most when visiting?
What stops you from being using the website?
What is your level of language (english, ASL, or in between)?
What kind of changes would you like to see?
Do you have visual impairment?
Uncovering the barriers to involvement
After surveying participants and conducting user interviews, I used google form to collect survey and build data from it, and facetime user interviews because of covid-19. I was able to analyse the most common issues . As a result of this activity, I noticed a pattern that led discover several major trends that was needed to address in the next phase of the design process.
Some of the major pain points we identified included:
1. People felt they were overwhelmed when visiting for the first time.
2. People were unsure about the authenticity due to poor reputation of the website.
3. People felt like website doesn't seem or meet need on an a individual level.
4. People wanted to validate that organizations were trustworthy and aligned with their values
5. Most common was the request of complete redesign and more user friendly.
Competitor Analysis
To gain inspiration and identify best method for our website redesign, conducted a competitor analysis. Picked several other non-profit organizations with similar theme or service .
One common feature I have identified across these websites was the location of the donate button in order to emphasize it as the main call to action. This was an important design pattern in order to make it easier and more efficient for users to get involved and donate.
Another common design pattern we observed was that each non-profit prominently displayed their SHORT mission statement at the beginning of their homepage. This was an important method to effectively communicate each non-profit’s mission to the user and help them better understand what each organization does.
On the donate page, we noticed that many non-profits had pre-determined donation amounts in order to make the donation process easier and more efficient for users.
Initial Sketches
Low wireframe. A rough idea based on feedbacks and needs.
Low-Fidelity to Mid-Fidelity Wireframing
Created a quick, low-fidelity, wireframes. Showing those wireframes and conduct usability testing with participants through FaceTime. It wasn't easy but worth the effort. This allowed me to decide what to include in the final experience before jumping into the next iteration of the design.
Overall users had an easy time understanding the website. Made few light iterations based on feedback to ensure the wireframes included everything I needed. Once the feedback on design was finalized, started the UI right after.
Mid-Fidelity to get rough idea of the layout and flow of the website with high contrast with in mind for the blind who may be deaf and hard of hearing. White section is the most important for access services / resources.
Design
Encouraging users to get involved and understanding what DCN are providing.
In order to immediately catch the attention of visitors, a donate button as the main call to action, by centering it to stand out. By making the donate button easily visible, it would make it easier and more encouraging for users to contribute — bridging both the organization and user needs.
Easily accessible resources to empower and educate
In comparison to the current Deaf Center of Nevada’s website, I wanted to expand the focus beyond businesses and organizations to be more inclusive of individuals. In order to do so, we provided more meaningful and easily accessible information to users about the issues, resource, and service.
Oh La la! High wireframe
Comparison
BEFORE AFTER
Bonus
I wanted to update it's logo and brand to feel modern and refreshed. It's important to stand out among the non-profile organization as most of them use blue. It should be simple and recognizable.
Example of other organizations in the area. Blue, blue, and blue. How boring.
Updated logo
