.png){kind=small}
SouthSide Village Case Study
Project Overview
SouthSide Village residents want to have easy access to neighborhood updates, documents, and social opportunities. This project focused on organizing the information architecture of the client’s extensive collection of resources, prioritizing the display of these resources based on user research within the community, and working closely with the client to establish a brand identity for their community.
Roles
UX Research
UX Design
Branding
Tools
Typeform, Otter.ai, Zoom
Figma, Miro
Project Duration
August- December 2021
6 months
.png)
Challenges
SouthSide Village residents are unable to find current information about events and guidelines within their community.
The users are frustrated with the lack of community transparency and site usability.
Residents feel that their current website not not reflect the brand of their modern, upscale community.
Problem Statement
How can we organize the resources for the SouthSide Village community to allow residents to easily find the information they need while openly showcasing life in the neighborhood for current and potential residents?
Goals
.png)
Research
Research Findings: UX Community Survey
An anonymous 10 question survey was sent out to all SouthSide Village residents using the Typeform platform. A total of 55 resident owners completed the survey, 87% percent of whom are full-time SSV residents.
Residents visited the old SSV website looking primarily for these resources, listed in order of priority.
1. Resident Contact List
2. Approved Vendor and Contractor Lists for projects
3. SSV HOA Documents, regulations, and meeting minutes.
4. A message board where neighbors can list items for sale or offer item giveaways
5. Neighbor recommendations for great local businesses, restaurants, events
6. News of the neighborhood, activities and events within SSV
Research Findings: One-on-One Interviews
Four 1-on-1 research interviews were conducted with SSV residents over Zoom. The interviews revealed pain points that were not identified in the survey, and allowed for a candid insight into life in SouthSide Village.
.png)
Resident Goals
.png)
Resident Frustrations
.png)
Research Conclusions
-
Showcase the beauty and amenities of the neighborhood.
-
Public facing portion of the site should maintain the privacy of individual homeowners while offering basic information about the perks and facts of SSV neighborhood life.
-
Regulations should be publicly accessible, especially for potential new homeowners to be fully informed of existing neighborhood guidelines.
-
Emphasize the (largely) lock and leave aspect of the community, ‘we like that it’s off our plate’
The new SSV website should focus on the optimism of a new phase of SSV HOA leadership, with emphasis on the friendliness of the community, opportunities for inclusion and relationship building.
Personas
The Working Homeowner
The Active Retiree
The Elderly Homeowner
The Working Homeowner
Information Architecture
Overview
SouthSide Village has a lot of internal documents pertaining to HOA regulations and communications, community resources, and guidelines for life within the community. A hard copy of HOA guidelines is given to each resident upon moving into the community, but residents had no way to access updates or amendments to these documents.
Our goal was to intuitively organize these resources so residents can easily find them.
Card Sorting
I performed a manual card sort by cutting up the document of all the SSV resources and sorting the resources into categories. These categories were approved by the client after making some minor modifications.
Sitemap
The final version of the sitemap contains public facing pages and a portion of the site that requires resident login. The 'members only' portion of the site contains content for resident access only. It was important to the client to have a homepage that both appeals to prospective buyers while having resident resources easily accessible in the navigation.
User Flows
The SouthSide Village design is focused on displaying informative content, thus the user flows are primarily focused on moving through the nested layers of the site to find specific content.
The main user task flows initially considered were:
-
Submit a Contact Form
-
Input Resident Login Information
-
Submit a Project Approval Form
Allowing Communication Among Residents?
We considered several solutions as to how to allow residents to communicate and connect with one another on the SSV site. This was a prominent user need found during the research phase. As we worked through these options, the user flows went through a number of iterations.
First, we considered adding a forum feature to the site, where users could post items for sale directly to the site and other users could respond directly to these posts. The first iteration of the user flows considered embedding Muut within the site, which is a forum feature similar to a simplified version of Nextdoor or Facebook.
Adding Muut would then require two additional task flows:
-
Input Muut Forum Login
-
Publish a new post OR publish a comment on an existing post
User Flows: Version 1
.jpg)
Iteration of User Flows
Upon further consideration, the Muut forum was deemed too time-consuming to moderate. Since the site will be maintained by volunteers within the community, regularly moderating an open forum seemed untenable to the client. To prevent any potential issues, it was decided that users should not be able to post directly to the SSV site.
An alternate solution was designed: a Bulletin Board feature that allows members to post announcements, items for sale, or other communications. These Bulletin Board posts must be submitted to the webmaster. Though this solution requires a bit more work for the webmaster in the short term, it is a more realistic solution for the long term functionality of the SSV website and removes any need for constant moderation of site content.
Additionally, the client decided to keep the Project Approval as a separate process that will not be available on the website. This Project Approval task flow was also removed.
The final version of the SSV user flows is simplified and contains only two task flows:
-
Submit a Contact Form
-
Input Resident Login
User Flows: Final Version
.jpg)
Wireframing
Sketching
The first round of sketching referenced the UI requirements while exploring possible solutions for the homepage.
Sketching: V1
The second round of sketching focused on a simplified homepage design and exploring solutions for resident pages.
Sketching: V2
Mid Fidelity Wireframes
After several rounds of sketching ideation and feedback, the wireframes for the main content pages were digitized.
A simple homepage design utilizes a large hero image to showcase the beauty and feeling of the SSV community, a short introduction to life in the community, and links to information for Buyers and Realtors.
.png)
Mid Fidelity Wireframes, V1
Iterations were made to the UI of the Resident Resources page to make the content more image-focused for clarity and usability. In the iterated version, each content item has its own card with an image and a label.
The About SouthSide Village page has been iterated per client request to replace information about individual board members with general information about the composition and function of the SSV Board.
.png)
Mid Fidelity Wireframes, V2
Branding and Logo Design
Branding Overview
SouthSide Village had an opportunity to establish their branding and develop a logo during this segment of the project. Developing a brand for the community brought us back to the conclusion of user research:
The new SSV website should focus on the optimism of the new phase of SSV HOA leadership, with emphasis on the friendliness of the community and opportunities for inclusion and relationship building.
As we began working on branding, the values of friendliness, inclusion, and optimism led the selection of fonts, colors, and logo. Along with these values, it was important to represent the SouthSide Village brand as polished, contemporary and approachable.
Logo Design: Sketching
The first round of sketching explored a combination of the SSV initials and the mountain setting of the neighborhood.
.png)
Choosing the best three logos to digitize and present to the client for consideration.
At this stage, the client decided on the bottom logo, with a mountain vector and the SSV lettering. They found this most friendly. I designed a wordmark that emphasized the Village aspect of the community, since the neighborhood is comprised of townhomes.
Final Logo and Wordmark
UI Kit
The choices for font, color, and image style are all intended to bring an approachable, open, and contemporary feeling to the SSV site. The color palette is based on colors found in nature in the mountains of North Carolina, the blues offer a feeling of established trust and the brighter green CTA color gives the site a modern and fresh feeling.
.png)
HI-FI Interface Design
.png)
Interface Design
-
Hero Image showcases the community and the style of SSV homes.
-
CTA for Resident Login in header navigation
-
Buttons link to guides for realtors and potential buyers
%203%20(2).png)
Interface Design
-
Navigation expands on hover, lists resources
-
Site’s public resources visible to residents without login
-
Navigation order prioritized by user needs from research
Interface Design
-
Friendly, descriptive images visualize content
-
“Looking for something else?” section lists further available content that requires login with a CTA
-
Prioritized by user needs from research phase
.png)
Interface Design
-
Hello, Neighbor! page with a friendly heading to emphasize community and openness.
-
Prioritized card content is focused on connecting neighbors with one another
-
Sub-navigation lists IA of content within this Members Only section
.png)
Interface Design
-
Single item page with large hero image and priority on clarity of content
-
CTA to download full version of guidelines about content
-
White space prioritizes the communication of the content on the page
Prototype
Usability Testing
Overview
Usability Testing was conducted with 4 users, all of whom are current residents of SouthSide Village. The prototype is a desktop version of the site. Testing was done over Zoom with the user sharing their screen with the researcher. The majority of SSV residents are older users who may be less savvy with technology, so priority for testing was to see that the SSV website UI is accessible and intuitive to the demographic of users it will serve.
Test Objectives
Usability test objectives are to see if users can complete the following tasks:
-
What is the website about?
-
Can users find their way to Resident Resources category?
-
Can users access a single resource topic (Landscaping) from the home page?
-
Can users send a Contact form?
-
Can users locate how to sign in for locked content?
-
Can users locate the Resident Contact list?
Research Validation & Feedback
Usability Testing Results
Usability testing revealed that the site prototype worked as expected and was intuitive for users. All four users were able to complete assigned tasks, and testing revealed that the expandable navigation worked as expected to communicate the IA of the site to the users. Some users had issues with navigating within the site, which led to the iterations suggested below.
Test Completion Rate 100%
The main problems encountered during usability testing were:
-
Users did not realize that scrolling was available on all pages to show more information below the hero section
-
Some users found the navigation categories ambiguous (e.g. thinking that the SSV logo would show information about SSV, rather than checking the About Us section)
-
Users did not understand how to navigate back on the site, or go back to the home page
Iterations after Usability Testing
All users were successful in completing all tasks, and the IA and UI of the site seems intuitive for them. Some improvements can be made, however, to navigating throughout the site itself (back buttons, breadcrumbs) and to presenting the content in a way that suggests the presence of further content down the page.
Suggested changes:
-
Decrease height of image on hero page to let content below peek up below it, encouraging scrolling down
-
Decrease height of title banner to allow all content to move up on the pages
-
Add Residents Only to main navigation, but access locked until logged in
-
Add breadcrumbs to top of Resident Resources content pages
-
Add Back buttons at the bottom of pages
.png)
.png)
Conclusion
Reflection
The design of the site found suitable solutions for both organizing content and for showcasing the SSV community in a way that represents their neighborhood brand. It would be interesting to run another round of usability testing when the site is built and goes live.
This project was a challenge in organizing resources in a way that makes sense to the people that will need to access them. Working with a client who is interested in building trust and a sense of openness in their organization while maintaining privacy was a unique problem to solve. Working on design solutions that are friendly while professional led me to think in a layered way about how content should be laid out and prioritized.
Working with a real client for this project taught me about balancing the needs of the client with the needs of the users during the UX design process. When the client had specific requests, revisiting the initial research findings and the project goals was important to stay on track. The client was able to see how the UX process takes both their needs and the needs of the users into consideration in the final design.
Next Steps
This project will be built using Squarespace by community volunteers within SSV. The next step is the client using these UX deliverables to build the site out and take it live.
