Pool Logic UI/UX Design

Problem

There is not a current web application or app on the market that pool contractors can use to provide real project schedules, alerts, and text features to their customers durning pool construction.

• The customer struggle with delays, anxiety, costs of the project, and time frames.
• Customers don’t know why or when construction stops for periods.
• Weeks of waiting between stages can be frustrating and confusing.
• Currently pool builders are not offering a customer interface that has a project schedule, alert features, text communications or a place to keep all documents about the construction project.

Project Scope

Develop a product solution with key features for a desktop app, ipad, or mobile device that allows the client to interact with the pool contractor during construction that has texting features, a full project schedule, and customer notification alerts as part of the solution. Research revealed that users needed a means to communicate directly with the pool builder using text and the ability to upload photos. It also showed clients were very frustrated not having a project timeline and schedule of events over a 3 to 6 month construction process. Customers also wanted the pool contractor to provide notifications of when workers and activities were taking place at their residence, so they would not be startled or unaware of contractors working at their home.

Solution

Design the Pool Logic app to provide current information with a click of a button. Develop the key features that the customer wants to see activities about their project and importantly a way for the contractor to control events during the various stages of pool construction. For this solution, this product will need to include project schedules, activity alerts, text communications and a resource to easily access documents about the construction project. This project is more about form and function than a fancy graphical interface.

UX Research

This was a brand-new idea that had not been done before. I needed to gain feedback. I started by using Secondary Research methods, Screener Interviews, and Semi-Structured User Interviews with homeowners that had built pools. This was a key process for gaining insight for generating future deliverables. I needed to find out what customers experienced during pool construction, what they liked, and disliked and what the user needed as part of this product.

Interviews

Interview highlights show several overlapping themes

• Contractor had to be trustworthy and have good reputation.
• Had to be licensed and insured.
• Contractor’s website was used heavily for inspiration (pool shape, tiles, color schemes, etc.)
• Lack of communication (during pauses, inspections, or back orders)
• Customers did not know why construction paused.
• Customers disliked tracking down information.
• Customers preferred it, when information was forth coming.
• In all cases, the contractor responded quickly.
• All customers agreed they would like a schedule of events.
• Overall, customers were satisfied with the end product.

Affinity Maps

Trends and patterns became more apparent and an overall customer experience began to emerge

• Why customers chose the contractor
• How they used and liked technology
• People wanted Project Schedules
• Break downs with communications
• Customers asking why construction stopped
• Calls to the builder
• Personal interaction was needed

Personas & Empathy Maps

This stage began to break down the information into sectors for better visibility. It gave life to the interviewer’s information and expressed their experiences to help develop the Pool Logic product.

Site Map

In this stage, the MVP or the most vital features were developed. I only wanted to include items that would enhance the user experience and develop secondary features at a later release. The site map was then developed to determine where everything should live in the application.

User Flow

Once I determined were everything lived, I could display the complete path a user will take using Pool Logic. The user flow lays out the movements through the product, mapping out each step the user takes during the journey.

Sketching

It was time to consider what this application may look like and visually what might make a great user experience. I quickly sketched out some rough ideas and tested them using the “Marvel” application which simulates user screens with hot spots, to see how these mock ups would work if I went to wire framing and further development.

Wire Frames

Wireframes were now generated to show the process and the red routes to better see the UX Journey, before moving on to high fidelity visuals.

Style Guide

A design guide was now created to lock in logo uses, color schemes, icons, buttons, drop down menus, font styles and how to properly display these elements. The library was established for the project, so as the project grows the design integrity is maintained.

UI & Visual Design

High Fidelity Release

Product deliverables and key features achieved

Customer User Interface
• Visual progress tools and user dashboard
• Full Project Schedule
• Month Overview
• Activity Alerts
• In app Text Messaging tool between contractor and client
• Customer project documentation pages.

Administrator Interface
• Create user client accounts
• Ability to set progress schedule
• Set monthly calendar events for project
• Create/edit project timelines
• Send Activity Alerts to customer
• Add client documents for the construction project

Validation and Guerrilla Usability Testing

Constructed a near actual application experience using Figma Prototyping tools for usability testing.
Conduct 5 moderated usability test. Testing methods conducted in-person to reveal how the user responded to the tools.

First, one unmoderated test was conducted and had good results but revealed some font point sizes that needed adjusting to be more compatible to relive any accessibility issues that could exist.

On the administrator side of the application some minor issues were discovered in the “Call to Action” Icons. Users had a hard time recognizing these were administration icon tools and had different functions.

Second, the call-to-action blue color was then added to the background under the icons. Also, a description of the tools were placed under the icons to call attention to those buttons.

Retested 4 more users to confirm these minor issues were solved. The first release was now ready for movement to the development stages.

Future Updates and Plans

• Resize icons on the mobile version to the lower 3/4 of the screen, which will provide more viewing space for the main portion of the screen.

• Update the Administrator tools after doing further research with pool contractors. The goal is to make this section quick and easy to navigate and more user friendly.

Want to try out the Prototype?

click on the link below