Strathcona Residents Association — A responsive website for Vancouver’s oldest neighborhood
Summary
Redesigning a responsive website for Strathcona Residents Association (SRA) which collects information about the oldest neighborhood in Vancouver and its community. As an organization like SRA requires, this website has to look professional by organizing the amount of information that contains and also, has to be made by residents for residents.
About the SRA
The Strathcona Residents Association is a volunteer-led organization whose goal is to promote the safety, health, and well-being of residents; while also celebrating the history of Vancouver’soldest neighborhood.
Analyzing the Strathcona Resident’s Association, we can find some problems that we have to tackle:
- The SRA’s website is outdated, confusing and disorganized.
- SRA doesn’t have a cohesive brand which lets it have a more professional presence.
- Currently, SRA is mainly focused on homeowners, but SRA would like to improve its outreach towards all residents of Strathcona such as new residents, tenants or business owners.
Goals
- Designing an inclusive Strathcona Residents’ Association website as a hub for all relevant information for all residents of Strathcona.
- Rebrand SRA for a more professional presence.
- Improve outreach by creating a coherent brand throughout all touchpoints including welcome booklets, business cards, flyers, emails, social media, and the website.
Research
For our research, we started analyzing other resident's associations by using domain research and comparative analysis. This analysis lets us analyze some interesting or desirable features for our website. This is some of the associations that we have analyzed:
- Downtown East Side
- Alexandra Neighborhood House (NH)
- Kitsilano NH
- Mount Pleasant NH
- Marpole NH
- South Vancouver NH
Looking at the chart, we concluded that the majority of the associations don’t have working groups section in order to show all the initiatives that they are working at the moment. Also, half of the associations don’t have a newsletter and rental section which are very remarkable for the SRA because the newsletter is their main feature and rentals section it’s important for the SRA because they want to focus on the different target persona they have in its community.
At the same time, the SRA invited us to a neighbor meeting at Strathcona Community Center to get familiar with the association. During the meeting, we observed that the majority of the assistants were seniors and how it works: they commented on some relevant issues towards Strathcona such as a pilot project for the neighborhood presented by some engineers. The assistants asked questions and proposed some ideas to enhance the project. The SRA also invited another association that presented their proposals in order to collaborate with SRA. Finally, they announced what’s the next meeting.
For the next step, we came up with some questions for our interviews and surveys:
- Demographics.
- What does the Strathcona Residents Association (SRA) mean to you?
- What are some expectations you have from a neighborhood association such as the SRA?
- What do you think is most representative of Strathcona?
- How did you become aware of the association?
- In the last year, how active or involved are you with the SRA?
- If you have not attended or participated in many past events or activities, what are some reasons you did not join?
- Are you familiar with the SRA website?
- If yes, in what scenarios would you go to the SRA website?
- What device do you use to go to the website?
We agreed with SRA to send the survey to its list of contacts and we also posted the survey on the different Facebook groups related to Strathcona or SRA.
Based on the 30 responses we received, the majority of people were seniors between 55 years-old onwards and residents in Strathcona. A relevant number of people use a laptop or desktop as the main device to go through the Internet.
While we launched the survey, we started to make some interviews from the neighborhood based on the emails they provided on the survey. The purpose of these interviews was to know in detail about their thoughts. We interviewed 5 neighbors and some of them were living in Strathcona for years or were pretty new on the neighborhood. What they said about Strathcona was:
Identifying and collaborating together to address problems that affect our community. Making Strathcona an even more awesome place to live.
I would hope it is a connective space, and new people can be recognized and welcomed.
It’s a true and supportive and kind community.
Its rich history and diversity are what first inspired me to want to live in Strathcona.
Some of the key findings we found were:
- Most users are tenants in their middle-aged and above.
- The importance of using laptops or desktop to navigate through the website.
- Everyone speaks very highly of the neighborhood and SRA.
- They would like to check SRA website to read about news and events.
- People would like to be more committed to the SRA.
- Other websites seem more informative than community-centric.
Planning
Concluding our research, we started planning part by analyzing all the information from our research. For that purpose, we used the Affinity Diagram in order to collect all these results in different categories which helped us to come up with the next steps and some features for the future website.
From the Affinity Diagram, what people like most about Strathcona were their enthusiastic people, its location and Strathcona as a place for art. Moreover, some keywords that describe Strathcona are the community, history, support or diversity.
Part of the community is partly committed with SRA and some of them are familiar with the website, search on Google information about Strathcona and consult some social media like Facebook groups.
For the website, they would like a colorful, accessible, powerful and user-friendly website.
In addition, we obtain part of our MVP. As a must-have, history, resources, search function or newsletter. As a nice to have, archive, meeting or suggestion box.
After that, we introduced two personas to understand who is this website for. Why more than one persona? Because SRA wants to focus on its different kind of neighbors like residents, business owners or landlords. Based on our research, we came up with the most representative personas: a resident who has lived for years in Strathcona and a family who has arrived recently to the neighborhood.
Based on Rick, we came up with the user journey map in order to understand how is going to work on the website. For this task, we thought about SRA in a holistic environment, where SRA is constantly present in the lives of our target audience:
- Emails
- Website
- Social Media
- Paper handouts
- People or neighbors
- Meetings
Based on these touchpoints, we came up with the user journey map for Rick and how he interacted with all these touchpoints:
One of our concerns was to organize and prioritize the amount of information from the website in order to get a good Information Architecture. From our research and Affinity Diagram, we’ve got a hint of how this Information Architecture can it be.
For the Information Architecture, we brainstormed the main sections based on the previous results we obtained from the research. Then, we make changes in order to group all the subsections for the website and have a clear concept of each section is about.
- The home contains relevant information about news, events as well as a call to action to join SRA.
- Strathcona has general information about the neighborhood such as its history, points of interest or how to film.
- (About) SRA contains information about the association and its members.
- News & Events informs about events and news from Strathcona. The Archive collects all the past news and events and lets the user search specific news or events by date or keywords.
- Resources gather useful information related to the different types of neighbors (new residents, seniors, residents or tenants).
- Get Involved shows all the different ways to collaborate with SRA: working groups, donations, Social Media or Sponsorship.
- Contact SRA provides a form to ask any question to the association.
Based on all these sections, we focused on User Flow. Because we have a bunch of sections and most of the flow were the same, we decided to determine the most relevant user flows: events and events and working groups.
In the beginning, this user flow consisted of clicking on the ‘Get Involved’ button, choose Working Groups, select one of the working groups from the list and take a look at the information or click on related news. After our user test, Working Groups was placed on ‘The Association’.
With regards to Events or News, the user goes through News & Events and then, through Events as an example. There, select one of the events or the user can filter by any topic and select an event. The specific event section provides information about it, including the venue and the time. Also, the user can add the event to the calendar by submitting the email address.
Design
Wrapping up the planning part, we started the design of the wireframes in order to accomplish the client's expectations. Here it is an example of low-fi wireframes that we sketch before coming up with mid-wireframes.
This was the result for our mid-fi wireframes:
UI Design Process
Based on the client's needs and what they liked from the Gut Test and the mood board, UI Team came up with the art direction. For the Style Tile, UI Team chose the color palette based on the color of the typical houses in Strathcona.
The typeface was a combination of classic and inspired by the newspaper typeface (Volkorn) and a modern typeface (OpenSans).
Then, the Style Guide finishes determining the art direction by designing the logo, buttons, and icons.
Moreover, designing the branding for the SRA as part of our main goals for this project so, we came up with a Welcome Kit for new residents, a newsletter template and business cards.
User Test
Coming back to the UX part, our team tested mid-fi wireframes on 5 people. We stablished some tasks in order to test the different features form the website.
During the user test, we realized that all problems were related to the navigation of the pages, not the layout of wireframes.
Based on the results, we made some changes to our menu in order to be more clear and consistent.
- ‘The neighborhood’ — previously named as Strathcona — collects general information about Strathcona but using a friendly tone. We also added the ‘City Zoning Guidelines’ section which makes more sense and we renamed ‘Points of Interest’ as ‘Things to do’ because the previous name wasn’t clear.
- For ‘News & Events’ we added ‘Archived News’ section — before it was just a button inside the ‘News’ section.
- ‘Living in Strathcona’ — named as a ‘Resources’ before — contains information about the different target persona.
- For ‘The Association’ — named as an ‘About SRA’ — we included all the different ways to collaborate with the association and a ‘Contact Us’ section.
- For ‘Join SRA’, we decided to remove all the sections inside and this section becomes a Call to Action in order to get engage more people.
https://xd.adobe.com/view/eadc44ee-79c9-4bde-4786-5d5186ba70f2-9ced/
Check out our prototype!
Based on all these changes, we came up with the Hi-fi wireframes. Here it is the result:
