A/B Testing and Branding to Build the Equity Resource Hub
Role
UI/UX Designer
Team
Senior UI/UX Designer
Equity Manager
UI/UX Designer
Timeframe
2 months
Skills
Branding
Visual Design
UI/UX Design
Information Architecture
Usability Testing
A/B Testing
CONTEXT
See the final website here:
STAGE 1: BRAND GUIDELINES
Creating a cohesive brand
A fellow designer and I were responsible for creating the full brand guidelines for the website, including the color palette, logo, typography, and brand personality.
EXPLORATIONS
What do we want to convey with this brand?
Brand Colours
Starting from scratch, we explored different options for colour palettes, starting off monochromatic, then moving on to more diverse combinations. We decided to stay away from colours of different banks, as well as the classic TD green because we wanted to differentiate this site from the TD brand.
We also ensured the colours were colour-blind friendly, aligning with our brand’s commitment to accessibility.
Brand Logo
The logo is the isometric view of simple, clean geometric shapes that make up three-dimensional objects of the letters E, D, and I. Together, the shapes form an open book that symbolizes the open information available in our hub. The contrasting colours of different brightness and saturation complete the three-dimensional look of the logo, and are consistent with the idea of diversity and our values.
FINAL RESULTS
Brand Guidelines
STAGE 2: IMPLEMENTATION & A/B TESTING
Implementing these guidelines to the website
PROBLEM
Navigation and Accessibility Challenges
While working on the Squarespace website, we realized that the redesign needed more than just color and font adjustments. Structural changes were essential to improve usability and enhance the user experience. Some content was not easily accessible, requiring multiple clicks to find key information. Overall, the website's navigation was not intuitive, and we needed to make improvements for a smoother user journey.
Before
GOAL
Defining the goal
Our goal was to ensure all resources were accessible and users would be able to navigate through the website easily.
UNDERSTAND
Information Architecture
In order to make the website easy to use, an important step was to re-evaluate the information architecture.
The original "Start Here" section required users to navigate through multiple pages to access key resources, making it inefficient. Some essential content took too many clicks to reach, and two navigation menu options led to the same page, creating redundancy. The overall menu structure wasn’t intuitive, making it harder for users to find what they needed quickly.
After re-evaluating the information architecture, the content was better organized and pages were fewer clicks away from the start of the user journey. However, there was still some dissatisfaction regarding the layout of the main content of the resource hub: The Equity Lens.
IDEATION
Exploring different options
The key sections to include were the Equity Lens Principles, Opportunities to Apply an Equity Lens, and Equity Lens Process (a step-by-step guide).
Exploration 1
One page
Equity Lens Principles, Opportunities to Apply an Equity Lens, and Equity Lens Process
Exploration 2
Two pages
Page 1 - Equity Lens Principles and Opportunities to Apply an Equity Lens
Page 2 - Equity Lens Process
Exploration 3
Three pages
Page 1 - Equity Lens Principles
Page 2 - Opportunities to Apply an Equity Lens
Page 3 - Equity Lens Process
A/B TESTING
A/B Testing
Based on these explorations, we decided to conduct a simple A/B test with 10 members of the TD lab team who had never had prior exposure to this project. Five people saw version A and the other five saw version B. The usability of the two versions was assessed based on SUS analysis, task times, and qualitative feedback.
KEY FINDINGS
SUS Scores
I assessed usability using the System Usability Scale (SUS), a standardized 10-question survey. Version A scored 78.5 (80th–84th percentile), while Version B scored 84.5 (96th percentile), surpassing the industry benchmark of 68. While Version B showed higher usability, statistical analysis revealed no significant difference due to the small sample size and high variability.
These results suggest Version B is promising, but further testing with a larger sample is needed for a definitive conclusion.
Task Completion Time Analysis
I measured how long users took to complete key tasks:
Task 1: Find step 3 of the Equity Lens process
Task 2: Find the opportunities to apply an Equity Lens for a product manager role
Version A had faster times for Task 1, while Version B was quicker for Task 2. However, due to the small sample size and sensitivity to outliers, the data showed high variability. As a result, no definitive conclusions could be drawn, and a larger sample size would be needed for more reliable insights.
Qualitative Usability Feedback
I gathered qualitative feedback from users, focusing on comments, suggestions, and usability concerns. Notably, all users from Version A mentioned excessive text, whereas only 2 out of 5 users from Version B shared the same concern. This suggests that Version A was perceived as more text-heavy, potentially impacting readability and user experience.
LIMITATIONS
Working within project constraints
One major challenge was time constraints—our goal was to gather results within just a few weeks, limiting usability testing to 10 internal team members. This small sample was likely not an exact representation of our target population and there was potential bias.
Another limitation was the inability to modify content without approval from. the legal team, which would have delayed the project. As a result, our improvements focused solely on organization and presentation, rather than adjusting the wording or structure of the content itself.
FINAL RESULTS
Giving a final recommendation
Based on SUS analysis and qualitative feedback, I recommended Version B as the preferred design. While a larger sample size is needed for more definitive results, the two-page layout is currently being used for the website’s first version. Check out the Equity Resource Hub below.
RETROSPECT
Potential next steps
If I were still at TD Lab, I would have loved to continue working on this project and improving the site further. Due to limited time and resources, A/B tests were only conducted on members of the TD Lab team, so I would have liked to test with a larger sample with real users, as well as explore more visual elements such as illustrations and dynamic content such as videos.
