HydroPuck

This design process were mine and my teams series of steps that we took to turn our idea into our MVP. Even though this process might seem very linear it was ever evolving and iterative.

This process in general has become my go to UX design process as all the important and necessary information and data are collected before starting the design iterations. 

As part of the user research, I conducted a number of user interviews as well as a user survey. This helped me to narrow down the key features users are looking for and what our product should focus on. 

The research I conducted for this project helped me to formulate the problem statement and made it easier for me to champion this potential solution. 

The research I conducted on the product and the users, allowed me to come up with appropriate goals for our product that could be measured using key performance indicators (KPI). I chose four metrics to be performed at the end of the project to evaluate the product's success. 

Following the user persona creation, I was able to create a task flow for a user. The task represented a new user wanting to track their process of the month. 

Once the user flow of the task became clear, I was able to construct a site map. The site map visualized the structure of the app and allows to focus on the important components. 

After the site map was created I was able to see the different screens needed for the app. I started sketching, first with pen and paper and later with digital wireframes. These wireframes are then formed into the low-fidelity prototype. 

Once the electronic components were ready, sketches were created to reflect how the tracking coaster (puck) of HydroPuck could look like. 

To understand better the experience the user would have when using the HydroPuck product, a storyboard was developed. 

To ensure consistency in all aspects of the design and the mobile app development it was crucial to have a style guide. 

The colors were chosen to reflect the topic of water in our product. This can also be seen in the design of the goal-reached illustration and the water intake progress illustrations. To ensure easy readability the font was chosen to be sans-serif. And as recognition is an important aspect of design, the icons were designed to be easily recognizable. 

Similar to the mobile application design the physical device underwent multiple iterations and testing until it reached the final prototype. 

As soon as the different wireframe versions were created I conducted A/B testing with a group of participants. Participants were given 2-3 different versions of a screen, this helped find the wireframe that would convert best into a usability-friendly mobile app. 

The selected screens were then used to create the low-fidelity prototype. Below three A/B test screens are shown as an example. 

The created low-fidelity prototype was evaluated by using a cognitive walkthrough. This was done by preparing a briefing for each of the participants which included background information the participants need to understand the app.

The participants also received a List of Tasks which they had to complete using the low-fidelity prototype. As the user thinks aloud and does all the tasks, I note all important information from each part of the tasks on a separate document.

Once the cognitive walkthrough was completed, I evaluated all of the collected data, detected common issues and found potential solutions for them. 

Once the medium-fidelity prototype was completed, I gathered a focus group, reflective of the target users, to find any issues still remaining with the app that the previous testing didn't identify. Using the information gathered from the focus group, four main issues were identified and changed. 

The first test conducted on the device prototype was a general stress test to see if the product was stable enough for its intended use. The goal was to test the durability of the material and the strength of the design. 

This was done by dropping it, placing bottles of different weights, sizes, and temperatures, as well as carrying it in small spaces like a full backpack. 

After creating the high-fidelity model was created I performed an in-person unmoderated usability test. The participants used the product as they typically would and I documented any uses, points, and concerns of the product. 

As this project's objective was to create a minimum viable product (MVP) the screens below reflect the development of a mobile app designed with the previous UX/UI design in mind. 

Once the MVP was complete I did a final round of usability testing in which I measured the behavioral KPIs during the test and the attitudinal KPIs in a questionnaire after the test, so that there was an indication of the success of the UX design.

Underneath the mobile app development screen are the MVP of the physical HydroPuck devices (battery and cable charged).