CASE STUDY
The current features on the website fail to provide users with an easy and interactive way to engage online which hinders the organization's mission of matching local residents to form a meaningful connection.
The redesign of the Neighborhood Network's onboarding process and overall interface serves to better match users and provide a more enjoyable experience of engaging with other members. This initiative allows Common Agency to build on its current method of connecting users as well as allowing its members to have some control to initiate interaction in ways that feel familiar.
Company
Common Agency
Tools Used
Figma
FigJam
Canva
Xtensio
My Role
Short on time?
Skip to Prototype
What’s the Problem?
The client approached our team with the need to discover how the site's usability and overall user experience could be improved. She observed an overall low adoption and engagement rate on the platform, and proposed for our product team to find a solution of an additional feature or a way to revamp the website.
Our team aligned on three main goals:
BUSINESS: Increase engagement and retention of members
PRODUCT: Improve the onboarding process and the site’s overall user experience
Integrating An Onboarding Flow
Users scan an invite QR code, which directs them to the login page.
By entering a street address of an afiliated neighborhood, a safety measure is added to prevent bots and deter unwanted visitors.
An Interactive Bulletin Board
Allows users a space to discover activities within their neighborhood and ways to engage with their neighbors.
Users can create posts and categorize them for better findability.
Users can interact with the bulletin, such as pinning, liking, and responding to posts.
To ensure a safe and friendly environment, all posts and responses will need admin/steward approval before being published on the website.
Users can react to other users’ Question & Quest responses with emoticons.
Users can, now, respond to questions and quests directly from the website.
Evaluating the Original Site’s Heuristics
To understand why the platform would need these improvements in the first place, we conducted a heuristic evaluation of the current site and suspected that members may not be interacting as much as expected due to the lack of incentives or activities to do on the website.
Another problem we also considered was that the site’s visual design failed to capture the organization’s welcoming and neighborly brand.
The main issue we encountered was seeing how the onboarding process felt disconnected from the actual platform, because it was a digital sign up form separate from the website URL and didn't allow the opportunity for users to add their own personal touch.
Understanding Our User’s Journey
To better visualize how a user would currently go through this website, we created a journey map. This helped us clearly locate the possible pain points within the user’s journey.
Looking Into Competitors
While keeping the above findings in mind, I collaborated with the Research Lead of our team to immediately begin analyzing four of the most popular websites surrounding a similar goal/virtual environment. We found that almost all of them allowed users to live chat and create posts instantaneously; however, the majority were based around negative topics and complaints.
Also Checked In On Comparators
We analyzed 2 of the most popular dating apps surrounding the goal of matching users to understand how to best connect neighbors. We found that both of them highly prioritize gathering user interests and hobbies to best achieve that goal. This finding became one of the main components for the solution.
User Interviews
To get a more accurate understanding of behavior loops and how people form connections, we conducted interviews with 9 people who varied in technological proficiency, those who are active in their community, and those who keep to themselves.
Out of the several participants that we interviewed we had three key questions that helped us find trends on whether or not this service was desired, why it was needed, and what frustrations were associated with this process of connecting with one’s community.
What does it mean to be part of a community?
What helps create a comfortable relationship with a neighbor?
How would you encourage building relationships with your neighbors?
Here’s What We Found
People feel more included when they have a space to share information and cultivate ideas or plans.
People are more inclined to pursue a connection with someone if they have similar interests and lifestyles.
It can be difficult taking the first step of introducing yourself to a neighbor, and many find it unneccessary when they already have existing social circles.
User Personas
The Potential Steward (Primary)
The neighborhood network stewards are the representatives of their community. They currently have the responsibility of outreach and welcoming locals to join in making community decisions and taking collective action. The are also the ones designing the questions that are being sent out every week, in addition to neighbor match making and moderating on the platform.
The Unusual Suspect (Secondary)
We had also considered a secondary persona who holds the lowest percentage of activity on the platform. Although this wasn't our primary target, having this persona in mind proved beneficial when redesigning the website to consider ways to reach out to less active locals.
Defining the Problem
As a team, we took what we learned from our research and interviews, and aligned on the main problem we needed to solve for:
Using the pain points discovered from the research findings, we asked ourselves:
How might we introduce neighbors to each other on the website?
How might we help neighbors discover commonalities and shared interests?
How might we enable neighbors to help one another?
How might we develop trust between neighbors?
Wireframes
Once we had our final sketches revised, pulling unique elements from each member’s iterations, it was a smooth process creating the initial low-fidelity wireframes on Figma for client and stakeholder feedback.
Style Guide
Considering our time constraints and the lack of style guidance that was available for the current product, we were keen to start brainstorming ways to translate our client’s brand to the tone that we wanted our redesign to exude.
We allotted time to research how we would emphasize warmth and acceptance to users and ensured that we made the site as accessible as we could, considering our team’s and developer’s technical constraints. This involved working with specific color palettes, font styles ,and font sizes.
It was imperative that we created a structure that anticipated organic growth in user generated content, user contributions, and categories being added; such as ‘preferred languages’ and the way this information may be presented in another language.
These considerations were made to help us create a design that could be accessible to everyone. The current users range from all ages and many come from different cultural and linguistic backgrounds. In addition, this style guide will be extremely useful for future iterations of the platform and ensure consistency in case it's handed off to a different product team.
Testing & Reiterations
After receiving valuable insights from our client and stakeholders, we prepared a high-fidelity prototype to conduct 5 usability tests where all participants successfully completed the prompted tasks.
A few metrics we took into account included:
Number of Errors
Despite these successful sessions, we gathered various feedback that we used to reiterate the design on the last day before our design presentation to the client.
UI revisions to allow easier readability
Updated microcopy to make instructions feel less demanding and more inviting
Addition of an admin review step for the quesiton and quest responses on the site so that content could be evaluated before being published
Final Prototype Walkthrough
Reflections + Next Steps
By being able to work with a client for the first time, I was surprised with what I learned about myself, not only as a UX designer, but I discovered other skills that seemed to have come naturally to me. My main responsibilities on this project resembled those of a product manager. Seeing how well I executed task delegation and staying within scope while delivering a high quality product within a short two and a half week sprint, motivates me to continue pursuing my career as a well-rounded product designer.
I’m immensely grateful to have worked with an organization like Common Agency, and if we had more time, a few things I would’ve liked to have implemented in the redesign were:
Exploring the Steward/Admin Persona
Since Stewards currently hold the responsibility of sending out weekly questions to members, this redesign introduces additional tasks that make this persona more proinent when considering design decisions. These tasks include keeping track of trends to manage bulletin categories and vetting quest responses and posts pending for approval.
Card Sorting
Our usability tests showed that users may skip over the site’s main features on the landing page if they weren’t scrolling down. Conducting a card sort will help determine content hierarchy among the three main features.
Exploring a Chat Feature
This would allow users to directly message each other one on one as opposed to limiting conversation to text and email. This would be most relevant when users are needing quicker responses about specific bulletin posts.
Expanding the Neighborhood Directory
Our research found that many people participate in community activities that not only affect their own neighborhood but surrounding ones as well. By expanding the directory to other neighborhoods within the network, users can reach out to more locals.
Back to Top
Snazz - Case Study
PetDoc - Case Study
