Background
Elevate Resiliency is a non-profit organization based in Toronto, Canada focused on creating a safe-space community for Black and minority women who may have experienced gender-based violence or sexual trauma. Their goal is to make those impacted in their community feel safe, supported and empowered to explore mindful choices in their lives.
Company Overview
Currently, Elevate Resiliency reaches new members through organic word of mouth but they wanted to increase their outreach through use of a new website and social media platforms. Their website was not gaining as much traction as they anticipated so they reached out to a team of UX designers to help redesign the site to increase user conversion.
Problem Statement
Our overall task was redesigning the Home page and the Contact Us form to create a better user experience, which would lead to an increased number of new members
Overall Task
For this project, I worked with two other UX designers to help accomplish our goals. While we did work together to review and provide feedback on each other’s work, my main contributions to the team were:
My Role
Conducting user testing of the existing site to identify pain points / potential areas for improvement
Designing the low-fidelity wireframes
Rewriting the UI content to be more user friendly
Designing the high fidelity prototype
Project Plan
Before we completed any real deliverables, we first wanted to get a better understanding of the organization and the current website design. After our initial meeting with one of the Elevate Resiliency founders, we decided to split the project up into 3 main sections: UX research, UX design and UI design to best complete the task in the given timeline.
Heuristic Evaluation
Usability Testing
Competitive Analysis
UX Research
User Flow
Low Fidelity Wireframes
UX Design
UI Content Writing
High Fidelity Prototype
UI Design
UX Research
Heuristic Evaluation
The first step in our UX research process was conducting a heuristic evaluation, using Nielsen’s 10 Usability Heuristics, to determine how user friendly their website was.
During this process, we identified multiple concerns with the current design.
Different CTAs for the same action on the same screen - leads to confusion
Identical but slightly different content on different pages
Information overload on the Home page
Not all content is relevant
Not easy to tell what page the user is currently on / the underline on the header bar could be thicker
Competitive Analysis
We found 3 similar websites and conducted analysis on what they did well to help determine what updates should be made to the Elevate Resiliency design.
All sites demonstrated:
A progressive disclosure of information, with a high-level overview of what the organization did on the Home page and more detail provided on the corresponding pages
Clear calls to action (CTAs)
Distinct sections for all the services each organization provided
Usability Testing
We conducted usability tests on 5 users with the current design to identify pain points / areas for improvement.
All users were asked to navigate through the site to find more information about the organization and the programs and events they provide. Not a single user was able to identify what Elevate Resiliency currently does. All users felt that the current content on the Home page was confusing and overwhelming.
Key themes identified during testing:
Users are unsure what Elevate Resiliency does.
Users feel confused and overwhelmed by the content.
Users have a lot of unanswered questions after using the site.
Users did not feel like this organization was a safe space.
Key quotes from user testing:
“It took a while to get to the About Us section.. But to be honest, I would’ve left the page already.”
“For a home page, this has too much information on it, it reads more like a feed than a website.. it’s overwhelming.”
“I know more about their events than what they actually do.”
“Needs to be more simple”
UX Design
User Flow
Because of the feedback from the usability testing, we wanted to create a user flow that was simple and intuitive for the user while also achieving the business goal of getting new users to reach out to the organization.
Low Fidelity Wireframes
The main concept for the low fidelity wireframes stemmed from the user quote, “Needs to be more simple”. We focused the design for the Home screen around the concept that less is more and only included the need to know information.
By implementing the concept of progressive disclosure of information that was also used by the websites we analyzed earlier in the project, we were able to simplify the information on the Home page while also ensuring that the main goals and services of the organization were still clear.
UI Design
UI Content Writing
During our initial meeting with Elevate Resiliency, they mentioned that they wanted users of their site to feel supported and inclined to reach out to get more involved with the organization. However, during our initial usability testing, users felt the content was overwhelming, confusing and did not provide a good understanding of Elevate Resiliency’s purpose.
We rewrote the content to make the copy easier for users to understand while ensuring that the purpose and intentions of the organization were clear and concise.
Original Content
Vision
To provide a safe space for Black/racialized women and youth to engage in building their capacity for self-actualization.
Updated Content
Vision
To provide a safe space for Black/racialized women and youth to realize their worth and achieve their full potential.
High Fidelity Prototype
The high fidelity designs were created by incorporating the logo and the brand colors with the low fidelity mockups. The high fidelity designs were turned into a clickable prototype that could be used for the next round of usability testing.
Conclusion
Future Considerations
Since the scope of our project only focused on improving the user experience of and redesigning the Home page and the Contact Us form, we were not able to complete the second round of usability testing with the new design. There were also multiple other screens that were not updated during our time working with Elevate Resiliency. Our next step recommendations that we gave to Elevate Resiliency can be seen below.
For the Home Page and the Contact Us form:
Conduct another round of usability testing with the high-fidelity prototype of the redesign
Work with web developer to implement the new design
For the rest of the website:
Conduct usability testing with each page to determine where the pain points / areas for improvement are
Create a site map to determine which additional pages are necessary
Redesign the additional pages based on user feedback and finalized design for the Home page
Ensure consistency between pages
Rewrite the content on each page to help with clarity and overall user experience
Conduct usability testing with the final redesigned site end-to-end to ensure there are no major pain points
Add a Resources page
Project Reflections
This was my first UX project working with other designers and I think it went really well! I liked being able to get more opinions on my work and talking to other designers to get their feedback before showing any work to the client. This project really emphasized the importance of good communication and creating / sticking to a schedule. All team members were in different time zones so our schedule was able to keep us on track to finishing the project in the predetermined amount of time.
This project was also my first time working with a real client and helping them address a true concern they had with their website. Being able to provide value to a company and help enhance their user experience is something I thoroughly enjoyed and look forward to doing again in the future.