Website Revamp
Randolph Neighborhood Association
Introduction
Background
Most people find themself living in a neighborhood of sorts. The neighborhoods can dramatically differ in appearance, weather, population, and sense of community. However, regardless of what someone’s neighborhood looks like, it will still offer some sense of community. The community aspect is a large part of what makes up a neighborhood, which will be the focus of this neighborhood website revamp.
Problem
Overtime people’s interests can change and their values will develop. Not only that, but over time people typically will experience a housing change. People's sense of belonging and being able to fully benefit from the resources around them can be challenging to develop when you aren’t familiar with the area. Therefore, the problem ultimately becomes creating a place that helps build community and makes the neighborhood more accessible.
Target Audience
This responsive website is going to be designed for anyone who either lives or is visiting the neighborhood.
Solution
Design a new website that focuses on community building and engagement.
Scope
80 hours to create an MVP (minimum viable product)
Role:
UX Designer
Researcher
Tools:
Figma
Key Features:
Map
History
Local resources
Events/activities
Community stories
The Process
The Neighborhood’s website was being revamped for maximum community engagement, and to compliment that, the project followed a user centric approach. This meant that throughout the process it was guided by an empathic mindset.
PROCESS
1. Research
Research Methods:
Competitive Analysis
Questionnaire
Research Goals:
Understand what makes people feel part of a community
Navigate methods to cultivate and strengthen the community
Revise the current neighborhood’s website in a way that encourages engagement
Competitive Analysis
In order to understand the current trends and best practices, a competitive analysis was completed.
The analysis showed a commonality amongst neighborhood websites of having multiple methods to get information to users. In turn, the revamp attempts to maximize information pathways.
Questionnaire
The participants were given a 14 item form to complete. The questions focused on understanding the motivations that led to community interactions.
Affinity Map
The participants offered a lot of insight about their values and interactions with their communities. The responses indicated that it was possible to learn about the motivation behind participants concerns and interests within their community.
Summary
The participants indicated that communities are truly built from a diverse mixture of individuals; yet hold shared values and concerns. This combined with the competitive analysis allowed the research to move into the next stage, Defining.
2. Define
PROCESS
Persona
Nate Ruiz was developed from the participants’ responses and by considering someone with the perspective of moving into the community.
His age, status, and home ownership, are based from an average of responses given.
Page Sketches
The persona influenced the page designs to be welcoming and easy to navigate for new members of a community.
The page sketches were designed to be an extension of the community but in a digital format. Additionally, it attempts to maximize accessibility for all users.
Sitemap
The initial website lacked proper navigation and an appropriate number of pages. Therefore, the competitive analysis shined a light on possible additional pages needed.
However, since the revamp was truly focused on this being a platform for community engagement an additional forum style “community” page was added.
3. Design
PROCESS
Task Flow
The developed persona turned out to be very influential for who to design for. Therefore, the task is for someone to create a post seeking volunteer opportunities to meet others in the community.
User Flow
A lot of the designing was around neighborhood newcomers and how to ensure that they felt welcomed and encouraged to participate within the community.
The flow focuses on someone joining a new community and using the neighborhoods’ website as a resource to reach out.
Wireframes
The simplistic yet varying presentations of content creates an energizing and engaging place for users to explore.
Brand Logo
Since this was a site revamp the existing logo was only touched up slightly.
This includes a slight softening of the image’s complexity and correcting mismatched fonts.
Additional smaller circular “R” logos were created to accompany the main logo.
Mood Board
The original website lacked imagery and energy. Therefore an effort was put forth to create a high energy and community focused mood for the revamp.
UI Kit
Altogether, the UI Kit provided an excellent base to design from.
Detailed Mockups
The mockups show how the UI kit was implemented to insert a breath of fresh air and build an extended digital community.
PROCESS
4. Test
Prototype
A prototype was created with the use of the UI kit. The initial prototype proved to be a base for revisions.
User Testing
Through user testing it was found out that the primary color was quite dividing. Some complained of it being too bright while others found the color to be nurturing and playful.
Ultimately, the green was slightly darkened for user accessibility, rather than completely changing it because it is the current website’s color palette.
Additionally, during this phase buttons were continued to be sorted out for better hierarchy on the page.
Revisions
Revisions were focused on enhancing the community page as a place for online engagement. Secondary revisions came in the form of making the pages more engaging while offering maximum information.
Additional revisions also included redesigning more exciting ways to display the content to users.
5. Conclusion
PROCESS
Challenges
The challenge of blending the original logos and colors was a limitation that proved to be enjoyable to create. The largest challenge faced was creating the community pages, which allowed neighbors to engage and help each other online, was quite a daunting task. Through testing the page flow, it was able to be refined.
Final Thoughts
This project was really special to me, as our own communities mean so much to each of us. Being able to work on a project that provides and enhances community growth and engagement was truly exciting.
Before
After