top of page

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

Group 10140.png
pexels-photo-5841807 1.png

Research Questions To Guide Stakeholder Interview

  1. What is the goal of the website?

  2. Who are your users?

  3. Why do people use your website?

  4. What do you wish your site could have that it doesn’t?

  5. 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

Frame 1746 (1).png

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.

Frame 1749.png
Pexels Photo by Anna Shvets 2.png

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

Frame 1762.png

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.

Group 2 Project- Figjam (4) 1.png

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.

Screen Shot 2023-04-22 at 10.44 1.png

Home Page Redlining

Frame 1761.jpg
  • 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.

Screenshot (8).png

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
Screen Shot 2023-04-22 at 10.55 1.png
Article Page
Donate Page
Screen Shot 2023-04-22 at 10.55 2.png

Mid-Fi Wireframes (Home Page)

Home PG.png

Donation Page

_Donate Pg- DESKTOP.png

News/Recent Posts Page

MacBook Pro 14_ - 2.png

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:

  1. To successfully scroll/ navigate the navigation bar and find the volunteer form

  2. To find the donate button, go to the donate page and complete a donation

  3. 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)

Frame 1720.png

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.

Frame 1726 (2).png

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".

Frame 1725.png

User Test Results After Iterations:

Frame 1720.png

Task 1

5/5 users were able to complete task 1 (find the volunteer form)

Frame 1720.png

Task 2

5/5 users were able to complete task 2 (get to donate page and complete donation)

Frame 1720.png

Task 3

5/5 users were able to complete task 3 (get to recent posts page and successfully find recent article)

High Fidelity Prototype

Home Page (Desktop)
Rectangle.png
Home Page (Mobile)
Rectangle (1).png
Frame 1760.png
Frame 1759.png
Donation Page
Frame 1758.png
News/Recent Post Page
Frame 1757.png

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

bottom of page