UX/UI - RESPONSIVE WEBSITE

Strathcona Residents' Association

Role: UX/UI Designer
Tools:
 XD | Photoshop | Illustrator
Timeline: 4 weeks

Collaborating with Strathcona Residents’ Association (SRA) was an opportunity to know more about the oldest neighborhood here in Vancouver. Strathcona is more than a neighborhood: it’s art, diversity, history and community.

The challenge is redesigning a responsive website for SRA and being more professional by having a cohesive brand which we have to redesign as well.

As UX/UI Designer, my team and I make a research based on surveys and phone interviews. Then, the planning part consist on coming up with the user flow and the information architecture and lead the visual design for the website.

old website
SRA website before

The Problem / Need

The goals for this project includes redesigning an inclusive website which collect relevant information about the neighborhood , rebranding for a more professional presence.

For the research part, we find that the website is outdated, confusing, and disorganized. SRA website doesn’t have a cohesive brand and doesn't look very professional. Currently, SRA is mainly focused on homeowners, but the client would like to improve its outreach towards all residents of Strathcona such as new residents, tenants or business owners. Also, there's an opportunity to build a community-centered website.

current website

Planning

For this project we have the necessity to introduce two different personas for a better understanding of the neighborhood. We pick the most representative ones: a resident who has lived for years in Strathcona and a family who has arrived recently to the neighborhood.

One of our concerns was to organize and prioritize the amount of information from the website for a good Information Architecture. Then, we make changes in order to group all the subsections for the website and have a clear concept of each section is about.



sra information architeture
Information Architecture process

For the User Flow, we have a few sections and most of the flows are the similar. We decide to determine the most relevant user flows: events and events and working groups.

user flow 1user flow 2

Design

mid/hi-fi wireframes
Mid-Fi and Hi-Fi Wireframes
use test task
User tasks for the user testing part
Desktop prototype
Mobile prototype

My team comes up with the rebranding part. One of the goals is design a cohesive branding that can be applied to different elements such as digital and print design, as well as the website.

branding elements
Some branding materials

Outcome

The result was an inclusive, well-organized, and professional website focused on desktop-first. SRA website contains relevant information for all residents in Strathcona. As part of the branding, SRA has a consistent and solid brand with a variety of different materials, including business cards or welcome booklets.



See the full process

Read Case Study