Going Forward
Limitations & Constraints
A limitation I faced with this project was managing the way this design relied on more of a business solution rather than a design solution. This project required me to fit multiple goals that the app and desktop needed to accomplish. The platform needed customers to have the ability to purchase water test kits, go through the process of testing water, displaying results of the testing in a straightforward way to users, provide water mapping in the area, as well as hosting water education resources. As such, there were many lofty goals for what this product needed to do. Thus, at times the design then became constrained to aligning the multiple goals previously mentioned.
Improvements Going Forward
Page Development: "Water Education" Section
If I were to further development the Clarity Water Project app and desktop design, I would focus on the pages in the “water education” section. If these pages were built upon, users could get a better idea of what type of information would be displayed on these pages. This would give a better indication on whether this type of information would be useful for users and a usability study could be done to test the viability of this design.
Project Overview
Product Duration: September 1, 2021- October 7, 2021
Job Type: Concept design for researching the generational effects of water pollution.
My Role: Lead UX Designer
My Key Contributions
-
User research: Creating problem & goal statements, user stories & personas, user journey mapping, and user flow mapping
-
Competitive audit
-
Creation of research plan
-
Conducted and analyzed data from 2 usability studies
-
Wireframing & prototyping (low & high fidelity)
-
Branding and logo design
-
Established design system in line with the brand
The Goal
Create a dedicated mobile app that lets users purchase water quality test kits, test their water, and get results and insights all without internet connection. Using progressive enhancement, design a desktop version that gives users more educational resources to learn more about water health and contribute to the research study on the generational effects of water pollution.
Ideation & Design
Competitive Analysis
A competitive audit was compiled to evaluate companies with alike product offerings and to see how our product fits into the market. There were 2 goals with my competitive audit:
1. Compare the experience of purchasing water testing (in-home or kits) using different competitor’s websites.
2. Compare competitor’s websites both on desktop and mobile to understand how the process of finding water education information is.
Tap Score
DIRECT COMPETITOR
Sells home water quality test kits. Invented new technology in water testing.
Water Research Center
INDIRECT COMPETITOR
Provides articles and information on water testing, reports on water illnesses/diseases, educational guides, information about water pollution
120 Water
DIRECT COMPETITOR
Combining cloud-based software and digital sampling kits to help execute water safety, compliance, and wastewater monitoring programs
Culligan Water
INDIRECT COMPETITOR
In-home water testing internationally. Services include water quality testing, bottled water delivery, and well water treatment
Contra Costa Water
INDIRECT COMPETITOR
Ensuring safe drinking water locally. Has a water quality testing program for pre-selected homes to monitor water quality in this area.
User Journey Maps
Opportunities
Responsive Screens
​
Optimize design for all types of screen sizes and devices
Water Test Program
​
Give users the opportunity to participate in a study, to help water pollution
Dedicated Mobile App
​
Consider those living in areas without internet connection
Test Kits & Results
​
Offer water quality test kits and have insights so users can understand their results
Proposed Solution
Interviews were conducted and transcribed as a first measure to understanding our users. From the synthestized data, personas were created to identify the main problems users have when it comes to getting their drinking water tested. Problem statements were then formulated to define user needs. To better understand the market and what alike companies were doing for users, a competitive audit was done. All of the user research that I compiled helped in identifying the target user, the pain points they are experiencing, and gaps in the market for how I could address these pain points.
My proposed solution involved creating a mobile app that would allow users without internet connectivity to test their drinking water. Another major concern for users was that they wanted to learn more about water quality since water quality tests are often difficult to interpret meaning from the results. As such, another solutions is to create a desktop platform that aids the mobile app. The desktop version will provide articles, water mapping, and water quality reports so that users can educate themselves on water quality and the way in which it impacts one’s health.
From Low to High Fidelity
Solution
High Fidelity Prototype
To solve the UX issues that were previously defined, the following techniques were implemented to make this design successful:
​
Iconography aiding navigation: Buttons and graphics were thoughtfully created so that they would help users easily find items while quickly scanning a page.
​
Directed flow: To help users go through the process of purchasing water test kits and testing their water, parts of the app were designed very rigidly to direct the user flow in a particular path. This was done so that customers can easily go through this process in the correct order.
​
Nestled pages: One main problem laid out in the beginning of this project was how difficult it typically is to interpret complex water testing results. I tackled this issue by simplifying the amount of content on the homepage and nestling content under sub-categories. While this does make the user flow slightly less concise, it was done with the benefit that people will have an easier time understanding the complex information provided to them.
Project Highlights
Extensive Design System & Graphics
In addition to compiling extensive design documentation to create a design system, I made many animations and graphics to aid in the visual communication of the product. Each icon was carefully designed so that users would be able to find icons as they quickly scan a page. Video animations were created on pages showing how to use the water testing kits. This adds to the accessibility of the design for those who may have a difficult time reading or understanding the text descriptions. Color, buttons and their different states, iconography, and typography have all been laid out in the style guidelines.
Water Testing Results
An important feature of the product was having water quality testing results that were easily digestible and concise. I ensured that the "results" page was balanced with enough information to help users navigate the page, while keeping things simple and nestling pages in sub-categories. The result is that I was able to present complex information in a simple, user-friendly way.
Design Impact & Considerations
Design Impact
The Clarity Water Project is a concept design for a fictitious brand, thus I can't provide the way my design would have a business impact for the company. Although, I believe my product idea could be highly beneficial to environmental and health efforts related to water pollution, and as such this design could be impactful for a company willing to take on the work and see this to fruition. The Clarity Water Project could help in researching the generational effects of water pollution, while also helping on an individual level to allow users to test and understand the quality of their drinking water.
The design impact of my contributions include having created and compiled a full design system with style guidelines. Videos and animations that I made will also highly impact the way customers understand how to use the product, and most likely lead to better success with this product. The business impact will largely depend on the implementation of my designs. But with visuals to aid in customer's understanding of the product and a complex system of information organized into concise information architecture, I'd argue my designs would lead to an increase in sales and higher revenue for the company.
Contact
I'm always looking for new and exciting opportunities. Let's connect!
650-695-9210
Accessibility Considerations
Information Hierarchy: The Gestalt Principles have been implemented to organize elements. Hierarchical headings and text have been used so that screen readers can more easily scan a page. These features help make the design inclusive; helping those who use screen readers and extending to all users by making things on a page more legible.
Gesture controls: Buttons or motion gestures alone can make a product difficult to use for some users. As such, my app ensures all buttons or motion gestures have accompanying tap options. This ensures users with mobility issues and general users will have an easier time using buttons if they can not use gestures such as swiping.
Color Contrast: The color contrast between all background and foreground colors has been checked through WebAIM. Each meets the criteria for current accessibility standards, that being 7:1 for normal text and 4.5:1 for large text and icons.
Responsive Design: Desktop
Progressive Enhancement
The mobile platform focuses on the purchasing aspect of getting water quality test kits, directing users on how to use the test kits, and displaying key information so that users can view their results. In contrast, the desktop version focuses on one's ability to access information about water health. Things such as water quality reports, articles, and water mapping are things a desktop user may find more useful on this platform. Thus, the sitemap focuses on users having the ability to learn more about water quality and its relation to one’s health. Using progressive enhancement to design for a larger screen, I accounted for the unique user needs of desktop users and modified content accordingly.
Usability Study Findings & Insights
An oversight was made when creating the high fidelity mockups, in that one of the prototype connections had not been attached. This led to a P0 insight of needing to fix the “see all” button on the home page so that the button worked once clicked. This was easily remedied to bring users to the appropriate page.Other insights were marked as lower priority but P1 insights were fixed. The P2 insights were left for future iterations of the designs and for subsequent testing.
1
SEE ALL BUTTON (P0)
The “see all” button should be fixed so that it directs users to the appropriate page
2
MINIMUM ITEMS IN CART (P1)
The minimum number of items should be changes to 1 OR users should be given notice why the minimum number of test kits to order is 3
3
RE-DIRECTING OFF PAGE (P1)
Users should get confirmation that logged data has been changed, but stay on the same page
4
AUTOFILL PROTOTYPE PAGES (P2)
The pages should autofill to illustrate to users how the page would work
5
BOTTOM NAVIGATION (P2)
Change all bottom navigation bars to act consistently with one another