Redesigning the web experience for Share Reuse Repair Initiative (SRRI)
Context
Client work
Jun - Dec 2024
My Role
User Research, user testing, wire framing, prototyping, research analysis, UI style guide
Team
1PM, Content team, 2 UX/UI Designers,
OVERVIEW
Make information accessible and easy to understand
SRRI is a non-profit organization in British Columbia promoting a circular economy. The redesign focused on helping users discover SRRI, their projects, and values more easily.
MY ROLE
Led the UX/UI design
As a volunteer of the Brands for Better's 2024 summer program, I was responsible for:
Designed user flows and wireframes (low- to high-fidelity).
Restructuring the information architecture (IA).
Developing a cohesive visual identity for the website.
Leading the research phase and client meetings.
THE IMPACT
Improved click rates and time on page
After launch, analytics revealed a 52% increase in CTA click-through rate. The average time on the homepage grew from 30 seconds to 1 minute and 24 seconds.
180%
Average time on homepage
52%
Click-through rate increased
RESEARCH
Why do users struggle to navigate SRRI's website?
With this question in mind, I conducted user surveys and qualitative interviews to uncover pain points and opportunities the current website was missing. The main pain points were:
The homepage felt empty, offering little guidance or content to help users start exploring.
Uneven content density and scattered information made it difficult for users to find what they needed.
Test and images were densely placed without clear emphasis, making information hard to scan.
THE SOLUTION
Homepage as an entry point
The new homepage uses banner sections to present key pages at a glance, making it easier for users to explore SRRI's initiatives.
Before
After
Simplifying information architecture
We focused on consolidating related pages that didn’t need to be separated while restructuring the information architecture to improve usability.
Before
After
Consolidating pages
We merged pages that were unnecessarily divided, allowing users to access related information without navigating across multiple sections.
Before
After
Consistent design enhancing readability
Since the site was text-heavy, we focused on maintaining consistency in typography and spacing across all pages. To ensure scalability for future updates, we created a UI kit that allows the client to easily add new pages.
Before
After
THE PROCESS
How we got there
Analyzing the site and identifying opportunities didn’t take long. User testing with participants from the same industry as SRRI provided valuable insights, as they were already familiar with the organization’s field.
After the initial testing, I conducted interviews using a Miro board with wireframes attached, asking questions as participants viewed the screens and naturally placed sticky notes to share their thoughts.
User interviews
Client meetings
REFLECTIONS
Takeaways
Since we had limitations on how much we could change the text content, our challenge was to make the website as easy and pleasant to read as possible.
Midway through the project, the client’s priorities evolved, which required several design adjustments. With a tight timeline, we stayed flexible and adapted quickly to keep the project on track.
You made it to the end! Thanks for reading:)
or