UI/UX Design

Tech Diversity – Not-for-profit Website Redesign

Team

Vivian Sek – UX/UI designer

James Rendall – UX/UI designer

Elisabeth Burke – UX/UI designer

Jeremy Luo – UX/UI designer

Keegan Nair – UX/UI designer

UX Techniques used

Tech Diversity Survey

Guerrilla Interview

Competitor analysis

Affinity Mapping

Persona

Customer Journey

Prototyping

Usability Testing 

Project Type

Desktop Website

Tools

Miro 

Figma 

Slack

Trello

Google Suite

 

Key Summary 

We were approached by Tech Diversity to redesign their website according to the organisation’s new business and branding strategies.

My role

  • Competitive analysis 
  • Customer Journey
  • Proposed ideation workshop techniques
  • Site map, wireframe and hi-fi prototype
  • Usability testing

Team

Vivian Sek – UX/UI designer

James Rendall – UX/UI designer

Elisabeth Burke – UX/UI designer

Jeremy Luo – UX/UI designer

Keegan Nair – UX/UI designer

UX Techniques used

Tech Diversity Survey

Guerrilla Interview

Competitor analysis

Affinity Mapping

Persona

Customer Journey

Prototyping

Usability Testing 

Project Type

Desktop Website

Tools

Miro 

Figma 

Slack

Trello

Google Suite

 

Project Overview

Project Timeline

3 weeks

 

Client 

Our client, Tech Diversity is an Australian not-for-profit organisation that commits to amplifying diversity awareness, help recognising equity and achieving a culture of inclusion among businesses and individuals within the technology industry.

Tech Diversity Current Website

Scope

Tech Diversity engaged our design team to revamp their website for a more professional look and to increase awareness of Diversity, Equity and Inclusion (DEI). and feel that appeals. The goal was to appeal to individuals, businesses and sponsors and encourage them to interact with the website and the resource hub.

The Solution

Our solution provided a well-organised, user-friendly, and professional-looking website, and presented the tech diversity brand message effectively whilst also strengthening user trust. It provided users with a sense of belonging, and also attracted a significant amount of corporate sponsors and increased website traffic. This in turn meant that businesses were more willing to approach DEI (Diversity, Equity, and Inclusion).

Home Page

Introducing the new Tech Diversity website, which features a strong graphic carousel of events, content to engage users, as well as a goal statement and value to deliver the message. The main three pillar shortcut is a display with a brief summary that directs the user to a page with more information. Since Pledging is one of Tech Diversity’s key marketing programmes. As a result, a call to action and people who have already pledged were displayed to attract user attention.

About us

The about page included statistics, explained what tech diversity offers and showcases the history of tech diversity to create trust between user and the organisation.

Make a Pledge

Users can make a pledge on this page with the option to share it on social media and join the organisation as a member.

Sponsor Page

Potential sponsors can also view partnerships, brands and figures that are currently involved with Tech Diversity. There is also a straightforward contact form to contact Tech Diversity for sponsorship opportunities.

Design Process

Discover

Problem Statement

“An individual who wishes to address a lack of diversity within the tech sector wants to take action to create a more inclusive and accepting environment within their company. But they don’t know where to find the relevant information to implement an effective outcome.”

Research Method

50

50

TechDiversity Engagement Survey

16

16

Guerrilla Interviews

14

14

Competitor Analysis

47.7/100

47.7/100

System Usability Scale Testing

1

1

Interview with Diversity Coach

Tech Diversity Survey

Our research process began with a review of the TechDiversity Engagement Survey that was provided to us. Business representative and HR manager that are currently engaging with Tech Diversity were the participants in this survey. This survey provided some helpful data that allowed us to understand why people engage with TechDiversity and what they think about DEI.

Interview with Diversity Coach

We needed a candid insight into what individuals in tech think about diversity & inclusion. Therefore, we interviewed a DEI consultant who had worked on various projects that helped the company build their DEI strategy. The advice from the DEI Consultant was really beneficial because it helped us learn more about DEI and the areas on the current Tech Diversity website that we need to approve.

Competitor Analysis

Moving on, I evaluated 14 tech sector competitors with a few other designers, including for-profit and non-profit organisations like Diversity Australia, Diversity in Tech, Women in Tech, Girls in Tech, and others, to discover their strengths and weaknesses. 

Define

Affinity Map  

Our team started synthesising the research data gathered from Guerrilla interview and competitor analysis. We then used Affinity Mapping to map out and organise the information using open card sorting method.

Research Insight

Through the research data, a number of key research insights were discovered:

Key pain points

  • Most users feel the website is hard to navigate.
  • Most users are unsure about the purpose of the website and feel confused.
  • Most users feel that the website does not provide a sense of belonging to them, mostly due to the imagery and language that is used.
  • Most users don’t understand the three main pillars and the purpose of the Pledging Campaign.

Persona & Customer Journey

Our team generated two personas based on the research data we gathered and imagined the user journey of how they will interact with Tech Diversity website. The journey has also highlighted some of their the touch points and needs with the opportunities we could improve on.

Rebecca

The first is Rebecca, who is a HR manager and interested in implementing a DEI strategy in the workplace but is unsure where to start.

Xavier

The second individual is Xavier, who wishes for the company where he works to become more inclusive. He wants to start a conversation about workplace diversity, but he’s not sure how to approach his co-workers. He also wants HR to begin receiving D&I training.

Develop

Reframing the problem

Once we created the Persona and Customer Journey Map, we reframed our research insight into the following HMW statement to help generate possible solutions.

1. How might TechDiversity promote the benefits of D&I to encourage business management to pursue D&I initiatives to improve employee satisfaction & engagement?

2. How might we help organisations become more aware of D&I strategies for minorities to feel more included by turning TechDiversity into an accessible central resource hub?

3. How can we build an inclusive, active and supportive community that discusses strategies and resources to help companies find long term success with D&I?

The Core Strategy

  • As small to medium companies don’t have a lot of time for D&I initiatives, we saw an exciting opportunity for TechDiversity to act as a central hub. This means TD does what a HR Council does in a large company, but offers it to many smaller companies who otherwise would not have thought about pursuing it.
  • To lower the bounce rate, we discovered that an active community is very important. This means promoting events and providing a support network for users.
  • Pledging should be more meaningful, along with the ability to get others involved. Beyond pledging, we came up with the idea of volunteering as a mentor for disadvantaged people interested in technology.
  • For the more skeptical business leaders, we need to promote the benefits of D&I with facts & figures.

Site Map

We redesigned our site map and made some adjustments based on the feedback we have received during our midway check-in section with our client. We definitely had in mind how we wanted to use our HMW questions. So we mainly focused on which page should have the content that it is placed in and we did move some content around that would better suit that section that they were moved to. We also decided to rename the “Salute” page to “Acknowledge” as well as rename the “Support” page to “Get Involved”. Another feature we implemented was that the Homepage would become an HR portal after a user would log in.

User Flow

Consider our How Might We statements, three user flows were created to show how our main user would interact with the website.

Wireframe

Following our team’s brainstorming session, we created some low-fidelity wireframes of the landing page and three flows mentioned above to visualise where the elements and content will go. This was a critical stage for us because it gave us a clear idea of how the website would look and how the content would flow.

Hi-Fi Prototype

After finishing the lo-fi prototype, we moved on to designing the hi-fi prototype, and followed Tech Diversity’s brand design guidelines to build a UI component library. Our entire team used the library to develop the website, which helped us maintain a consistent style throughout the process.

One of the aims of the redesign was to make the website feel like a place where people from a diverse background could feel a sense of community.

According to research findings, delivering an organisation’s values, developing trust, and encouraging calls to action are all critical aspects of a non-profit organisation’s website. We ensured that we covered all of these important points when redesigning the website.

Usability Testing

Following the completion of our hi-fi prototype, we conducted some usability testing and used the results to refine our design.

The research was carried out with four people who are now employed in companies that practise DEI. After completing five exercises, each interviewee was asked six questions on the prototype.

Testing Results

Positive Feedback

Pain Points 

  • Easy to scroll through and modern look
  • Great use of colours
  • Cool animations and illustrations
  • Great choice of images for the subject
  • Great amount of text for user to absorb main points
  • Great navigation bar and footer
  • 3 Pillars are clearly identify
  • Forms and Purchase process was straightforward
  • Stock images may feel unnatural and discourage trust
  • Blog post: not ideal layout
  • Hard to make a pledge from the blog post page
  • Pledge page: see who else made a pledge
  • No clear incentive to become a member
  • Event page: lack of diversity in photo
  • Event page: lack info about who can attend the event
  • Purchase process is repetitive

Deliver

Final Design

Scroll through the pages here to see the the result 

Outcome

After we conducted the usability test with four of the original research participants, we gave the user a 10-quesiton System Usability Scale (SUS) questionnaire to complete. The result showed a considerable improvement with a score of 81.39 previous website’s score of 46.7.

Tech Diversity are currently working with their contract developer to incorporate successful elements of our design.

Final Thoughts

With the final prototype created, I believe I have achieved the objectives set out at the start of the design process. Unfortunately, due to a confidentiality agreement with the client’s customers, we were unable to interview users who had previously used the website. Finding people that are currently involved and interested in DEI was a challenging task, so we were a little behind in the research phase. As a result, we turned our focus to conduct more competitive analysis in order to obtain a better understanding of the non-profit technology industry. I learnt that it is critical to choose a research approach based on the answers we need and the amount of time we have.

#