The Case Study
The Problem
Clean water is a deep community issue. Find a way to provide everyone with access to clean water services.
Proposed Solution
The solution is to create an app and/or website for social good that is accessible to anyone who has a phone and internet. From the app the idea is to be able to order clean water solutions and have them delivered to the user's home. This app should be easy to use and understand for all ages and walks of life.
Keep scrolling to see my process
Research Overview
- Determine what social issue the community would like to address
- Determine platform of design needed and why (App? or Website?)
- Empathy – User Research
- Competitive Audit
- Surveyed 50 Homeowners in surrounding Chicago areas
- What would help this community more? (Clean Water, More Police, Less Liquor Stores, Better Schools)
- What is this community missing that “you” wish it had? (Clean Water, More Police, Less Liquor Stores, Better Schools)
- Which do you think would have the most impactful solution? (Clean Water, More Police, Less Liquor Stores, Better Schools)
- TOTALS: 54% Clean Water; 22% More Police; 18% Better Schools; 6% Less Liquor Stores
- Surveyed the same 50 Homeowners in surrounding Chicago areas
- What do you use more to access websites, your desktop/laptop or cell phone?
- Do you shop on your cell phone on desktop/laptop more?
- Do you like to read more on your phone or desktop/laptop?
- TOTALS: 68% Cell Phone; 32% desktop/laptop
- Solution to the problem. Create an app for clean water.
Preliminary Research
Determine what social issue the community would like to address
Determine platform of design needed and why (App? or Website?)
- Objective: Conduct interviews to identify and empathize with target users, discover pain points. These interviews created a primary user group and a secondary user group. The primary group wants to have clean drinking water accessibility. The secondary user group wants to an app that is user-friendly. This was assumed but through research, it was found that these users would also like clean water throughout the entire home (shower, bathroom sinks, etc.). Another important find was that accessibility is very important as disabilities played an important role in user responses to the questions.
- Interview 7 participants selected for diversity, background, ability, and demographics including:
- Participants are those who use websites and apps
- Participants are those who are invested in healthy living
- Participants are those aged between 25 and 65
- 1 user who is not tech savvy
- 1 user who has a visual impairment
- 1 user who has a reading disability
- 1 user who is not of native English language
- Wants to have clean water in home
- Wants to have an easy process to order water
- Phones are small and hard to read
- Doesn’t understand how phones work
Empathy – User Research
Summary
Discover Pain points of App Users and Clean Water Accessibility
Primary and Secondary Personas Gathered from Interviews
Persona Pain Points
- Objective: Compare like-companies to understand what the competition offers, lacks, features and how they position themselves in the market.
- Clean Water Store, Culligan Water, Pentair Water Solutions, Whirlpool, CleanWater.ie
- Worldwide Companies
- Product Variety
- Good Branding
- Difficult Navigation
- Incoherent User-flow
- Lack of Accessibility Options
- Better use of Gestalt Principles
- Installation Options
- Accessibility Options
- User-friendly
- Visually appeasing
Competitive Audit Summary
Key Competitors:
Overall Strengths:
Overall Weaknesses:
Opportunities:
Wireframe Overview
- Sitemap
- Information Architecture Summary
- Sketch Wireframe
- Lo-fi Digital Wireframe
- Goal: Determine a IA (information Architecture) that the app and users will follow.
- Solution:Though there are many variations and styles of apps. I decided to include the "easiest to use" IA, hierarchical. The base of this architecture is the Gestalt Principle which allows people to see things in groups. That agrees with the app because I would like for it to be as equitable as possible with major consideration of those who are not tech-savvy.
Information Architecture
Summary
- Objective: The idea of the sketch wireframe is to compose a user-friendly app that encompasses the IA flow that will operate without instruction. During the wireframe sketch, I cycled through different variations of the main screens and combining the best components of each screen for a final version. This will allow me to create a lo-fi digital wireframe for the complete app to expound upon.
Sketch Wireframe
Summary
- Objective: The lo-fi digital wireframe is the digital version of the final variations of the sketch wireframes. Transfer sketch wireframes to a digital wireframe, then create a usable prototype for real-world testing.
Lo-fi Digital Wireframe
Summary
Lo-fi Prototype Building Overview
- Usability Testing
- Create Themes and Insights
- Create Prototype Iteration
- Objective: Determine if the user can effectively order water for drinking and household usage, through an app with proficient user-flow by research. For the research I will gather 7 participants and test potential users by means of research, collect primary qualitative data through a series of questions. Collect quantitative data by means of follow-up questions.
- Goal: Through testing, discover themes and insights to create iterations of the app to appease the target users with an equitable inclusion of all users.
- Testing Matrix
- Methodology: Moderated user study
- Determine KPI’s: Time on task; Task completion rate; Use of navigation; Accessibility ratings; System Usability Scale
- Conduct Moderated User Testing: Direct the users through a series of tasks; Have a participants complete a system usability scale
Usability Testing
Summary
Usability Testing:
- Objective: Through observations received from various tasks of the moderated testing, create themes and determine what actionable insights are discovered.
Create Themes and Insights
Summary
- Objective: Based on themes and priority insights, create changes in the prototype.
Create Prototype Iteration
Summary
Visual Design Overview
- Create Hi-fi Mockup/Protype
- Sticker Sheet
- Visual Identity Process
- Objective: Create a visual representation of close-to-final product. Implement colors, typography, and iconography. Determine visual accessibility through contrast, legibility, and layout hierarchy.
Create Hi-fi Mockup/Protype
Summary
- Objective: The sticker sheet includes fonts, font sizes, colors and components used throughout the app.
Sticker Sheet
Summary
- Objective: Use design principles, color philosophies and common app strategies to complete the look and feel of the app.
- These variants of blue were considered for multiple purposes:
- Psychology of Blue: lighter shades of blue identifies as a cool and relaxing; darker shades of blue identifies as powerful
- Branding: people identify blue with water; this app is all about water solutions
- Accessibility: dark text on light backgrounds are better for contrast
- This font was chosen for these reasons:
- Legibility: for words to be read without strain there needs to be a clean font; serif fonts are among the most legible
- Branding: the app is more in the serious side in nature; the font must match the tone
- Style: because it’s close to Times New Roman it resonates with users but it has subtle flair
- Accessibility: this font is closely related to Times New Roman which has been the font of many newspapers for a very long time, this proves to be very legible for readers of many different sight strengths
- These components were added to enhance the user experience:
- Buttons: the buttons were intentionally left square for simplistic ideology; a drop shadow was placed on them to show slight depth and to stand-out amongst other objects of the app
- Icons: chose to use limited icons to increase accessibility; icons to those who are not aware of what they mean can cause the app to not be functional to the user
- Pictures: can say a thousand words and invoke emotion, they are high quality and are used to direct the users focus
Visual Identity Process
Summary
Colors
Typography
Components
Hi-Fi Prototype Overview
- Hi-fi Usability Testing
- Hi-fi Create Themes and Insights
- 2nd Iteration Visual Identity Process
- Objective: Determine if the user can effectively order water for drinking and household usage; determine how easy navigating the app is; determine how the visual aesthetics affect people. Gather 5 participants (different from lo-fi usability test) and test potential users by means of research, collect primary qualitative data through a series of questions. Collect quantitative data by means of follow-up questions.
- Goal: Through testing, discover themes and insights to create iterations of the app to appease the target users with an equitable inclusion of all users.
- Testing Matrix
- Methodology: Unmoderated user study
- Determine KPI’s: Time on task; Task completion rate; Use of navigation; Accessibility ratings; System Usability Scale
- Conduct Moderated User Testing: Direct the users through a series of tasks; Have a participants complete a design-based system usability scale
Hi-fi Usability Testing
Summary
Usability Test
- Objective: Through observations received from various tasks of the moderated testing, create themes and determine what actionable insights are discovered.
Create Themes and Insights
Summary
- Objective: Use design principles, color philosophies and common app strategies to complete the look and feel of the app.
- Create a visual representation of close-to-final product. This is the 2nd iteration with consideration to the initial hi-fi usability testing. Implement colors, typography, and iconography. Determine visual accessibility through contrast, legibility, and layout hierarchy.
- Psychology of Blue: Use darker blues to represent water but as accent as opposed to background colors in the 1st iteration
- Branding: people identify blue with water; this app is all about water solutions
- Accessibility: darker text on light backgrounds are better for contrast
- "Avenir" font was chosen for these reasons:
- Legibility: for words to be read without strain there needs to be a clean font; serif fonts are among the most legible
- Branding: the app is more in the serious side in nature; the font must match the tone
- Style: because it’s a very legible font with slight curvature it allows for a more modern aesthetic
- Accessibility: this font is closely related to Roman which has been the font of many newspapers for a very long time, this proves to be very legible for readers of many different sight strengths
- These components were added to enhance the user experience:
- Buttons: the buttons were created to stand-out in the app so they are noticeably clickable components
- Icons: chose to use limited icons to increase accessibility; icons to those who are not aware of what they mean can cause the app to not be functional to the user
- Pictures: can say a thousand words and invoke emotion, they are high quality and are used to direct the users focus; they have also been stylized to add a visual "coolness" to the images
Visual Identity Process
Summary
Colors
Typography
Components
Conclusion Overview
- Final Product
- Reflections
- Next Steps
- Objective: In consideration to user tests and accessibility needs the final mockup/prototpye was created.
Final App Mockup
Summary
- I believe this app is designed very well. However, in UX/UI the design, structure and architecture are not driven by the creators. They are driven by the target users. With that being said I wish I could have done a few more usability tests to be 100% sure users are happy with the outcome.
Reflections
- Objective: This is a prototype that I plan to present to the alderman. With an app like this, I would need funding for back-end development and also a client that is willing to participate in such an experience. I like to believe that even if my app isn't incorporated into the world, as I pitch the idea to different people and corporations, it will start a dialog to achieve something in the realm of helping people get clean water in their homes.