Organization: kauaiwater.org
Project Summary
The kauaiwater.org website struggles with usability issues, making it difficult for users to accomplish certain tasks, resulting in an increased volume of calls to their customer service line.
My goal was to create a responsive website with an intuitive user interface for signing up for water service. This would reduce the burden on customer service and lead to a more accessible experience for a broader demographic of users.
My Responsibilities
Timeline & Team
5 weeks from start to finish, with a UX team of me and two stakeholders.
Starting off, I conducted a heuristics evaluation on the Kauai Water Supply website to assess issues with usability and accessibility. This would serve as a jumping off point as I could use my evaluation and recommendations to offer a redesign opportunity to the stakeholders.
Top Usability Issues From Evaluation
1. Primary Navigation. Navigation links need more recognizable labels in addition to being larger and reorganized into dropdown menus.
2. Content. There’s some information overload happening here. Content can be trimmed and reorganized with informational hierarchy in mind.
3. PDF Applications. These forms proved to be inconvenient and inherently have accessibility issues. Create a streamlined, interactive form that is easy to use for wider range of people.
What Did Stakeholders Think?
I presented the findings of the evaluation to Kauai Water Supply's stakeholders and discussed what their ideal website might look like.
Want a website that is easy to navigate with dropdown menus.
The current PDF water service application is too inconvenient.
Want to have the homepage highlight the 3 main functions.
Concerned in regards to secure signatures and form signing.
Have a user-friendly mobile experience.
Too much time spent on calls with customers about bill inquiries and comments about the website not being user-friendly.
Wireframing
Stakeholder insight gave me the roadmap for what to focus on, and how to meet their goals. Fixing the water service application process was key! But other than that, I prioritized 3 other 'features' aligning with stakeholder needs. I designed the mobile and desktop screens in tandem to ensure consistency across platforms.
Top Must-Haves:
Easy to navigate.
Homepage highlights site's 3 main functions.
Accessible and user-friendly mobile experience.
During designing, I also conducted tests to assess the impact of my decisions on user perception of the newly redesigned website and to ensure it met stakeholder expectation. Based on the following results, I believe I was successful and continued on to refine the design.
First Click Test
Users were prompted with “Where would you click to apply for water service?”. This test allowed me to evaluate the effectiveness of the navigational layout, and to see if users knew how to get around the site and complete their intended task.
15 of 23 (65%) participants clicked on the Forms & Applications button with an average of 22 seconds before committing to the action.
5 Second Test
Users were given 5 seconds to study the provided screen and then were asked “What was the page about?”. The goal was to measure how well my redesign quickly communicates to the user what the purpose of the website.
Keywords from participants of the 5 second test:
"Water"
"Hawaii"
"Utilities"
"Paying"
In response to stakeholders’ desire to improve navigation, I revamped it by introducing drop-down menus, incorporating micro-interactions, and modifying color and contrast consistent with WCAG standards across the website to increase accessibility.
Dropdown Menus
For these, the interactions were based on “mouse enter” and “hover” mechanics. These were chosen for its ease of use and organization. I believe this will make finding resources simple for the user and it doesn’t take a lot of effort on their part.
Cards
Instead of overloading the user with information straight away, this micro interaction allows the information to be tucked away unless needed. Some information is shown, and the user can easily expand the card if they’d like to read more. Otherwise, the titles are clear and quickly scannable.
A lot of the inspiration for the redesign’s style guide came from my own memories of visiting the Hawaiian islands.
This guide would serve as a template for any future designers to work with, providing a standardized framework to streamline their work.
Inspiration
The first two images help invoke a sense of calm and ease. This can help with visual appeal and entice the user to the website. The second pair of images serve more of inspiration for any graphical elements that are created. As far as the redesign, these graphics can can be used as dividers or page breaks to aid organization.
A Redesign for an Outdated Logo
Stakeholders wanted to keep up with competitors, and I also wanted them to have something that was modern, simple, and readable.
Color Palette
The color palette is based on imagery of Hawaii as well as the original palette. Water needs to be a big influence here, so using images of Hawaii’s beaches, I extracted variations of blue. To provide contrast to the these, I chose colors mimicking the sands of those beaches.
Typography
Two typefaces will be the basis for all text in the redesign. “Acme” is responsible for all display text, chosen for its slight playful feel and its evocation of nature. Considering the website’s purpose is to provide a public service, a typeface that is clean and legible was chosen. “Inter” will stand for all primary text. I limited the design to 2 fonts to avoid distraction/confusion.
As an advocate for accessibility, I want to make sure my designs meet WCAG standards, with AA compliance as the goal. Websites with 100% accessibility isn't realistic, but I do what I can to ensure that those who use assistive technologies do not encounter frustrating experiences. These assistive technologies need to be able to read, understand, and operate the pages.
Target Sizes
I don't want the user to have to hunt when attempting to click on buttons or other call-to-action elements, so we make these target sizes at least 44x44px.
Contrast Checking
Checking the legibility of colors placed in and around each other is vital. This applies to not only text, but icons and other input elements.
High Fidelity Mockups & Prototypes
I created prototypes that were presented to the same stakeholders to demonstrate the redesign’s capabilities.
Result
I had the opportunity to present my redesign to the stakeholders to whom I first spoke to. After seeing the website’s newly designed look and the implementation of the features they wanted, I was met with much praise and happiness as the stakeholders could see a solution to their problems.
Takeaways
