Journey to Diversity Workplaces
Redesign UX/UI
Duration
3 Weeks
Role
UX Designer
Team Lead
Tools
Figma
Figjam
Miro
The Story
Diversity, equality, and inclusion are widely considered crucial components of a workplace, yet significant progress still needs to be made. As such, I am pleased to have helped Journey to Diversity Places, a Canadian non-profit organization, in improving their website's user experience and advancing their mission of promoting diversity and inclusivity.
The Task
-
Redesign the website for Journey to Diversity Workplaces to improve its user-friendliness and user-centricity
-
Prioritize the promotion of awareness for the cause and feature clear calls to action for donations and volunteer sign-ups
-
Enhance the aesthetics of the site to boost its legitimacy and credibility
Background on Organization
-
Is a Canadian non-profit organization
-
It’s mission is to promote diversity and inclusion in the workplace by providing information to employers and employees
-
Run by a team of dedicated volunteers who are passionate about creating inclusive work environments
The Main Problems
-
The organization’s goal is unclear from the website
-
Outdated design creates an impression of illegitimacy
-
Poor navigation/ organization make it challenging for users to make donations, volunteer and find relevant information
The Solution
-
Redesign the website to be intuitive while enhancing the UI
-
Improve navigation
-
Add new features and functionality to allow for easier pathways to donate, volunteer, and access information
My Design Process
Research Questions To Guide Stakeholder Interview
-
What is the goal of the website?
-
Who are your users?
-
Why do people use your website?
-
What do you wish your site could have that it doesn’t?
-
What are the weaknesses on your website?
Main Goals of Stakeholder
-
Promote diversity and inclusion in the workplace
-
Attract more volunteers who can help them run the website
-
Increase donations to pay for website and summer students to write for the website
Stakeholder Key Insights: Wants & Needs
Quantitative Data
To obtain some initial quantitative data before commencing user research, we conducted a survey to gather insights. We aimed to quickly identify the most effective way for a non-profit organization to gain our users’ trust, and we received 14 responses.
78.6% of respondents said the most important thing a non profit can do to gain their trust is to be transparent about where the donation funds are going.
Research
Effective research begins by formulating well-crafted, open-ended questions that enable us to gain a deep understanding of our users' pain points.
Key Research Questions
-
What do you feel the purpose of this website is?
-
How easy or difficult is navigating this website. And why?
-
What topics related to diversity and equality interest you the most and why?
-
What are some issues you encountered while using this site?
-
What are you main concerns when donating to charities?
User Interviews: Key Insights
User Quote
“ I have no idea what this website is about. Who the organization is. I’d leave the site if I came across it and wouldn’t donate as their mission and what they do is super unclear.”
-Steph C-
Problem Statement
Mira, an Asian business analyst, has faced discrimination at work from her coworkers due to her race. She visited Journey to Diversity Workplaces website to find information to help her. Upon visiting the website she felt it was confusing, hard to navigate, not empathetic to issues, and is now struggling to get to the information she needs.
How might we help her navigate these situations by giving her a platform to find resources that can assist her emotionally, professionally, and personally so she feels safer in those times of discrimination?
User Persona
After our research, we constructed a user persona. We wanted to create a persona in order to help us understand the needs, motivations and goals of our target users.
Storyboard
A storyboard was created to show a visual representation of our user's journey through our product/ service. A storyboard can help visualize the user's experience and identify pain points.
Home Page Redlining
-
1) The purpose of the site is unclear as it only displays a welcome message without any further explanation, which causes confusion for the user.
-
2) The hero image on the site lacks relevance to the message of diversity, equality, and inclusivity. It would be more appropriate to replace it with an image that better represents these values instead of a guitar.
-
3) The calendar on the site is not particularly useful since it does not display any events or relevant information. Moreover, it is positioned towards the top of the home page where more important information should be displayed.
-
4) The red border surrounding the website is unnecessary and aesthetically unappealing.
-
5) Links aren’t organized into sub headings or anything- disorganized and look misplaced where they are positioned.
Restructuring the Information Architecture
Original Main Navigation
Newly Constructed Site Map
Users reported that the initial main navigation was unclear and lacked organization. As a result, a new site map was developed to enhance navigation, simplify access to information, and improve overall organization.
Paper Wireframes
Prior to commencing the design phase on Figma, we began by sketching out some initial ideas to conceptualize how we envisioned the app's appearance. Paper wireframes provide a quick, low-fidelity way to explore design solutions and communicate ideas.
Home Screen
Article Page
Donate Page
Mid-Fi Wireframes (Home Page)
Donation Page
News/Recent Posts Page
UI Style Tile
User Testing
User testing played a critical role in our process as we aimed to guarantee that our app was user-friendly and effortless to use. Our objective was to observe how users interacted with the product and collect feedback on their experience.
Objectives/ Goals:
Looking to learn if there are any issues with the layout of the redesign and if the users were able to navigate/ find information easily.
Tasks:
-
To successfully scroll/ navigate the navigation bar and find the volunteer form
-
To find the donate button, go to the donate page and complete a donation
-
To get to recent posts page and successfully find a recent article
Results from User Testing:
Task 1
2/5 users were able to complete task 1 (find the volunteer form)
Task 2
5/5 users were able to complete task 2 (get to donate page and complete donation)
Task 3
1/5 users were able to complete task 3 (get to recent posts page and successfully find recent article)
In order to tackle the difficulties and streamline Task 1 and Task 3 for users, we made iterations to the Navigation Bar.
Original Navigation Bar:
User feed back showed the "Issues we discuss" tab does not indicate that news, articles, and videos will be found there. The "Career" tab similarly is not clear in notifying users that volunteer information is found there. Finally, the donate button is well placed, but could be highlighted more with a bolder color to stand out.
Iterated Navigation Bar:
Based on user feedback, we changed the names of two primary titles in the navigation bar; to simplify task 3, we changed the name of "Issues we Discuss" to "News" and to simplify task 1 for users, we renamed "Career" to "Volunteer".
User Test Results After Iterations:
Task 1
5/5 users were able to complete task 1 (find the volunteer form)
Task 2
5/5 users were able to complete task 2 (get to donate page and complete donation)
Task 3
5/5 users were able to complete task 3 (get to recent posts page and successfully find recent article)
Conclusion
Key Takeaways
-
The importance of being in constant communication with with the stakeholder
-
Putting time into the research phase is vital
-
Importance of teamwork- working off each others strengths and weaknesses
-
Iterate, iterate, iterate, but be realisic and work within time constraints
Next Steps....
-
Community chat feature for users to share their experiences with diversity, equality, inclusion