Grapevine Property Services
Redesign
Grapevine Property Services is a management company that aims to assist users who need to pay HOA dues or file maintenance requests, but has ended up with a fair share of angry clients as their prime users, found their website non-intuitive and confusing to use.
Goal
Develop an accessibility driven Redesign of the existing website addressing the major concerns of the user demographic and make its utilization a smooth and pleasurable experience.
.png)
Duration: 6 Weeks
Role: UI Designer & Accessibility Lead
(Worked with a team of 5)
Software: Figma, Adobe, Trello
Discovery Phase
We learned through Stakeholder meetings that a majority of their users were Spanish speakers. In order to get valuable inputs from them irrespective of whether they knew English or not, bilingual surveys, were created and shared, both online and as printed flyers.
Accessibility and Heuristics
Since the primary users were people over 56 years of age, it was imperative to screen the current site keeping in mind the 10 standard Heuristics guidelines. In order to test for Color accessibility the contrast ratios on headers, footers, and body areas of GPS’s website were scanned with a WCAG 3 lens.
Heuristic guidelines reference- NN/g
​
Accessibility tool - Adobe contrast checker, WCAG plugins
Competitors analyzed -
-
Eugene Burger Management Corporation
-
Steward Property Services Inc.
-
Professional Association Services Inc.
-
Commonwealth Property Management
Usability Testing
When we tested the usability of the current GPS website, we found users had a difficult time navigating to the Homeowner Request. Most people felt it belonged under Services and that it was not intuitive to find on the current site. We specifically chose to test with users over the age of 55 to match the GPS demographic.
Though we worked with clear designated roles, at times, we designers sat in as observers and note takers on some of these tests and our researchers helped by offering feedback on the designs.
Persona & Empathy Map
Developing a clear idea of who GPS users are was taken directly from our user research and felt right on target. People were consistently saying the same things through the surveys and testing.
Cory Terrace
66 Years Old
Retired
Works as a Consultant
​Sonoma Co, CA
Uses a desktop computer to access websites
User Roadblocks
Another important assessment we undertook, was that of clearly understanding how many paths existed for users like Cory who wanted to file a Homeowner Request on the existing site.
We walked alongside our persona and stumbled on every roadblock that he faced. When one path which felt like the obvious choice lead to a dead-end, Cory retraced his steps to the homepage and chose another path which gave success but not without frustrating him initially.
_edited_edited.png)
DEAD END
Cory thinks that he can file a complaint if he goes to Services-->Association Management, but he is met with just a list of services provided by the company without any CTA to file complaints or requests.
User Flow
Though we identified several key issues that could be addressed on GPS’s site, we prioritized, making the path to file requests or complaints, intuitive and easy to find. This is represented by the user flow diagram above.
.jpg)
Sitemap
.png)
Once we had the problem and the defined user path that needed to be addressed, it was important to organize the content on the website for our redesign. We used a flow diagram format for the initial round of categorizing information. This was followed by Sitemaps which panned out as a slightly more evolved version of this site flow diagram.
Lo-fi Prototype
After 2 revisions of the paper sketches, we moved on to build a digital version of our intended redesign. The key upgrade here was integrating the beginning points of the various forms intended for different users and their respective needs.
We kept referencing our sitemap as we built our wireframes and then made them clickable so we could conduct usability tests.
.png)
Moodboards and Color Blindness Tests
“What my intention is… when they come to the website… we are already creating a sense of calmness. Of just like, we are taking care of you, we got you, what do you need? Just click here, we will respond to you.”
-Mike Ramirez, Grapevine Property Services CEO
Even though our stakeholder picked the first palette, we modified it slightly and showcased the same in our Style tile (The blue highlight shows the modified colors and how they are viewed).
Our initial color accessibility tests dealt with contrast and readability on the existing GPS website, while these tests helped us make our redesign accessible to users who did not see colors the way, we did.
Style Guide
Following lo- and mid-fi prototyping, and having the value input from our stakeholder, we made final revisions to our style guide to help us design in a consistent and cohesive manner as we started our hi-fi design.
Mid-fidelity Prototype - a turning point
The Mid-fi prototype saw the introduction of color and imagery inspired by the brand colors of GPS and the calming feel, the stakeholder was leaning towards. Usability test on this was conducted in person.
Nancy, 82 years old, Former HOA Board President, never went past this point on the pages. As her attention remained on the Hero Image alone, this steered the ideation for the hi-fidelity design completely.
A/B Testing
We met with the CEO to present two versions of a homepage. He had insightful responses which helped guide our final design. He picked the site guide 'bubbles' and bulletin design from option A and the wanted landscape imagery and openness seen in B.
a
b
Design Transformation
WCAG (Web Content Accessibility Guidelines)
Since our prime users happened to be people over 55 years of age, we constantly screened our wireframes, components and assets for WCAG 2.0 - AAA compliance.
This was accomplished with helpful plugins like ‘Contrast’ supported by Figma.
Form Design
Several iterations were made on the Homeowner Request form. We researched best practices for older users and incorporated information chunking for ease of use. We developed a left-side status bar with iconography, as well as completion and error messages to provide clear system status to users. Finally, we developed clear language in a submission validation message to inform users what to expect next.
Hi-fidelity Prototype
“I feel like help guides don’t usually help. I like the layout of this, I like how it looks.” - Christopher, 33
5 Second Testing - The Impact
It was important to our stakeholder that we create a calming mood for users on the website. To help measure this, we decided to conduct a 5-second test to get feedback on our hi-fi homepage. The responses truly felt gratifying!
“It’s organized, and organization makes me feel calm.”
Gloria, 77
“There are positive vibes. I noticed the supportive language.”
Paloma, 38
“I like that there is space, and not every inch is taken up.”
Luther, 70
“This is very soothing.”
Lisa, 54
Key takeaways
-
Research was Key: Conducting thorough research was crucial in understanding the needs and preferences of the user demographic which included the Stakeholders and the actual Homeowners. This helped in creating a design that caters to both their specific requirements.
​
-
Accessibility is a Priority: The website should be easy to navigate, with clear and legible fonts, and high color contrast to provide basic accessibility while staying true to the company's branding.
​
-
Simplicity is Key: For an older user demographic, keeping the design clean and uncluttered, with easy-to-understand navigation, is essential.
​
-
Consistency is Important: Consistency in design elements such as colors, typography, and layout helps create a sense of familiarity and ease of use for the user.
​
-
User Testing is Crucial: Conducting user testing is essential to ensure that the design meets the needs of the target demographic. Observing how users interact with the design helps identify areas of improvement and optimize the user experience.
​
By following these key takeaways, we were able to create a website that catered to the specific needs of the user demographic and provided an improved user experience.