Client work
Web design
UX/UI
Background
Share Reuse Repair Initiative (SRRI) is a non-profit organization collaborating with the BC government and local partners. They partnered with Brands for Better to redesign their website, aiming to attract more visitors and better communicate their mission and values.
My role
Research, site map, wireframes, UI/visual design
Timeline
June - Dec 2024
Team
1PM, 2 UX/UI Designers,
Content team
Platform
Website
My contribution
Led the UX/UI design for the SRRI website revamp as part of Brands for Better’s 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
After launch, analytics showed improved engagement: the CTA click-through rate increased, and users spent more time on the page. The average time on the homepage rose from 30 seconds to 1 minute and 24 seconds.
180%
Average time on homepage
52%
Click-through rate increased
Problem statement
While users are interested in the brand, unclear homepage guidance and a complex site structure make them lose interest quickly.
The website focused on storing required documents for government approvals and funding, not on visitor needs.
This provided an opportunity to redesign the site with a stronger focus on user needs and experience.
Design goal
Based on the needs of both the client and users identified through interviews, we defined key design goals to guide our decisions throughout the project.
01
Refining information architecture
Aimed to simplify the navigation flow and minimize the number of steps to access key information.
02
Homepage as
a entry point
Provide a friendly entry point with a brief introduction, allowing users to explore further if interested.
03
Maintain
consistency
With an information-heavy site, we focused on a clear design system to make content easier to absorb.
Solutions
Solution 01
Homepage as an entry point
To create a friendlier entry point, we redesigned the homepage with banner sections introducing each main page, giving users a quick overview of the organization. CTA buttons were added to each banner to guide users toward deeper exploration if they’re interested.
Solution 02
Consolidating pages
Pages were unnecessarily fragmented, making it difficult for users to follow the content. Consolidating them was essential to improve the user experience. After the revision, users can now access all related information within a single page without having to jump between pages.
Original
Updated
Solution 03
Visual consistency
We designed the website based on the UI kit and grid guidelines, creating a cohesive and seamless experience. Scalability was key — we ensured that with the provided guidelines, the client can easily create new content in the future without additional assistance.
From user research to the design
Figuring out the painpoints
Conducting both user surveys and qualitative interviews helped uncover the pain points and opportunities the current website was missing. My research focused on:
Why do users visit the website in first place?
What would make them want to revisit or recommend the site?
How did they navigate between pages?
What challenges do they face while visiting?
Checking out competitors
After interviewing users, I wanted to understand how other organizations presented themselves online. What were they doing differently? Had they addressed the pain points users mentioned?
The insights
After analyzing the data collected from earlier research, I was able to identify two key painpoints:
01
Complex site structure
An overly deep navigation structure made it hard for users to reach key information quickly.
02
Empty home page
The homepage, intended to welcome users and serve as their main touchpoint, lacked engaging content that encouraged further exploration.
Refining information architecture
Eliminating all tertiary navigations.
Consolidated related project pages, cutting the total from 12 to 6.
This helped reduce the steps in the user flow to access information and simplified navigation
Consistent visual
With heavy text that couldn’t be reduced, a clear and consistent visual identity was key to improving readability. Here are the key things we tackled:
Enhancing content flow
Refined visual hierarchy by applying typographic hierarchy, grid alignment, and consistent spacing to improve content flow.
Building a UI kit
Standardized button sizes, typography, and spacing to maintain consistency across the site.
Takeaways & Next steps
01
Adapting to Limitations
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.
02
Staying Flexible Under Change
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.