HydroHomies
HydroHomies is a water intake tracking app that allows people to stay hydrated while connecting with their “hydrohomies”.
Homies Hydrate Homies.
Role
Team Leader
Duration
7 Weeks
Tools
Figma, Figjam,Discord, MS Word
Team
Abby Brams, Tyler Eckert, Spencer Gillam, & Halle Russell

Executive Summary

The idea behind this app was to create something that would work for people of all lifestyles. When coming up with ideas to pitch for this project, I wanted to create something that I felt like everyone needed and would benefit from. Creating a water tracker app that actually kept people interested was a big goal for our team. With this in mind we made sure to add a social aspect to help keep people engaged which included competing with their “hydrohomies” and participating in challenges.

The Lean UX Process

To create HydroHomies, our team utilized the Lean UX approach from Gothelf and Seiden. This process consists of a continuous process of getting feedback from testing and iterating designs until we reach our desired outcome. Since this was a class project, we were on a strict time constraint of having our final deliverable within 8 weeks. In order to accomplish this, we first created a backlog of everything we needed to include, then split it up into two separate sprints, and finally began our interviews and designs.

Goals

Motivate users to stay hydrated Create an easy to use platform

Challenges

Creating something that people come back to Coordinating time around everyone’s schedules Keeping tasks consistent for each member between iterations Testing unfinished work

Introduction

HydroHomies intention was to create an engaging and fun way for people to track their water intake in order to stay healthy and hydrated. We incorporated friendly competition in order to help encourage users to reach their goals. Using the Lean UX process, we built assumptions of what the users wanted and needed rather than requirements. After some initial brainstorming, we created a low fidelity prototype and began testing. After each test we would iterate our designs for the next round of testing until we finally had happy users and results.

Sprint 1

The first sprint took up the first 3 weeks of our project.

Design Week 0

The first week was dedicated to going through the Lean UX Canvas. This involved us brainstorming ideas of what we wanted to include in the app, creating proto-personas, ordering our hypotheses by risk and priority, and finally creating our backlog.

Proto-personas

Proto-personas are preliminary representations of the user group for a project. We created them at the beginning of our design process as a way to try and understand our potential users' goals, needs, behaviors, and attitudes. For this project, these proto-personas were based on assumptions. The main purpose of the proto-personas is to help the team build empathy and gain a better understanding of the users' perspectives to help us make better design decisions and improve the user experience.

Proto-persona #1
Name: Brian Webster Role: The Gym Bro
Proto-persona #2
Name: Francis Young Role: Health Conscious
Proto-persona #3
Name: Joe Average Role: College Student

Hypotheses

There were a lot of things that we needed to accomplish with our product. In order to organize what we think our users needs are, we created a chart of possible business outcomes, possible users, and what feature we would create to appeal to these users and outcomes.

Once we finished this list, we reorganized the hypotheses in order of risk and then created another chart called a backlog to help us prioritize which tasks we need to do first.
Hypothesis Table - Ordered By Risk
A hypothesis table has a list of all the possible features we have discussed our users wanting, how it could affect the business, and then ordered by how difficult it would be to implement.
Product Backlog
A backlog is a list of all the things we need to do in order to achieve our goals.

Design Week 1

The second week was all about quickly coming up with a design to test and get feedback on. Before settling on something to test, everyone took a stab at designing something before we came together as a group to decide what to show our users. The design I originally created, is what ended up being the basis for our first prototype to show users. Once we decided on a design, we created a usability plan with all the questions we wanted to ask our users. Besides designing, this was the start of our standup meetings that occurred every other day. In these meetings we talked about what we had done or been working on and the plan for the week. Having these meetings so frequently helped the team stay on track.

Daily Standups

Stand-ups are a crucial part of the business world so it was important for us to incorporate them into this project so we could be familiar with them as we enter the professional world. These were very quick meetings where we discussed what we had been working on since we last met, what we needed to go over that day, and what we were going to work on the following day.

Stand-ups
These are examples of one weeks worth of stand-ups that show who attended, what we did, and what we need to do.

Wireframes

When using Lean UX, you being building designs based off assumptions rather than starting with user research. This resulted us in having many different iterations of designs. We ended up having four different versions of designs in the end before getting to what we considered to be final. Following each interview, we made changes immediately after to hopefully improve for the next round of testing.

For each design iteration the team worked together to design each feature. We would all come to our meetings with something to show and then work together to find the perfect middle compromise of all our designs.

Design Iteration Version 2
The first iteration of designs was very low fidelity and meant to get our ideas across. The second version was what we used to conduct our initial usability testing.

Usability Plan

Prior to conducting our interviews, we created a usability plan that allowed us to stay on task while being on the calls. Additionally, this helped ensure that we were consistently asking the same questions to each user and getting non bias feedback. For our usability tests, we did not have specific guidelines of people that we wanted to talk to since we wanted this app to work for everyone. We reached out to anyone who would talk to us and tried to keep the questions as general as possible.

Research and Usability Plan

First Tested Prototype

For our first prototype, we made something that showed an idea of what we wanted for the final, but not completely functional. A lot of our initial prototype had things that were not interactive or that would autofill upon clicking.

Affinity Maps

Each week we had to interview three people in order to consistently get feedback. The way we made sure everyone was participating equally was whoever scheduled the interview, moderated it. This allowed for all of us to have a chance both to lead a usability test and take notes. As the interviews went on, we individually took notes on the questions being asked and synthesized them at the end. For each interview, we created affinity maps. At the end of each interview we would group alike findings in order to help us decide which features users needed.

Design Week 2

The third week we focused on synthesizing our feedback and making decisions about what we needed to change in our designs. Using the same prototype we had from the previous week, we added more details and created a more functioning prototype. Since we had done the majority of the design work in week 1, we only had minor changes for this week. We continued doing our stand-ups and affinity maps for our interviews. Since this was the third week, and therefore the end of Sprint 1, we held a retrospective. This was a longer meeting dedicated to going over what we thought went well, what did not, and what we want to improve on and work on for the following sprint. Having a retrospective allowed for everyone’s voices and opinions to be heard and create a plan to better our team for the future.

Retrospective

At the end of this sprint, we completed a retrospective. This was a time where as a team we shared what we thought had gone well, what we could improve on, and what we needed to change the following sprint. Retrospective allowed our team to ensure that everyone’s voices were being heard and that we were all on the same page for the work going forward.

Sprint 2

The first sprint took up the last 3 weeks of our project.

Design Week 0

The first week of the second sprint was dedicated to revalidation. Our team went through our original thoughts to see what we needed to change after our intitial testing. The proto-personas was the main concern of this week. We needed to see if the three we had originally came up with still aligned with our data or not. Following this, we reevaluated our backlog and assigned the remaining tasks to this sprint and organized them by priority.

Updated Proto-personas

While evaluating our data we realized that a lot of the people we talked to did not struggle with any health issues. This resulted in us eliminating our third persona due to that one being mainly for those with health concerns.

Updated Backlog

Our updated backlog contained all the tasks we did not get to during the first sprint at well as anything from the first sprint that we felt we needed to allocate more time to. Having this updated log helps ensure we were all on the same page and staying on task.

Design Week 1

The second week of Sprint 2 was spent working on another iteration of designs based on feedback from the previous sprint. From our first prototype we heard back that our app felt a bit “cold” and “clinical”. Since this is not the vibe we wanted to convey to our users, we spent a lot of time considering different ways to create a more welcoming and fun environment. After playing around with some design changes, we decided to interview the same people that we did the first week in order to see if we were able to create a better experience for them. Since we were talking to the same people, we changed up the research plan and asked more specific questions about the app in hopes to get more helpful feedback. Additionally, at this point we played around with the idea of creating an a prototype for an Apple Watch in order to help increase efficiency and ease of use for users.

Updated Designs

In efforts to create a more inviting app for our users we created a splash screen to welcome our users when they first open it. Additionally, on the tracker, we completely reworked the page to include a clearer visual of how much water one should intake, made it more obvious what the users’ goal is, and used the person’s name to try to call them out and encourage them to drink more water.

Apple Watch Designs

While working on updating our designs, we decided it would provide additional value to users if they could use our product on a smart watch. We ended up splitting up the work and half the group worked on the mobile designs and the other half on the watch. We then came together to discuss opinions and make changes to both sets.

Updated Usability Plan

In order to stay consistent with the first sprint, we updated our usability plan with questions more specific in order to get better feedback from users. At this point, we wanted to get more detailed responses as well as an idea of what else the users would be interested in having had this app became a reality. A lot of the questions on the new plan were geared towards the possibility of having an Apple Watch function as we wanted to get input on that and what it would take for us to build it if the need was there.

Design Week 2

The third week of Sprint 2 was synthesizing the data we collected from our interviews. We also conducted our second round our interviews with the same participants we met with during the first Sprint. We continued our affinity maps to narrow down what changes to make or to add and ensure our user’s happiness. Our participants loved our new designs and we spent the rest of the week making the prototype fully functional and focusing on the smaller details. Throughout the week we continued holding our stand-ups to keep each other on track and hold each other accountable and at the end of the week we conducted our final retrospective.

Updated Affinity Maps

Once again, after every interview we made sure to input our notes and see where the similarities and differences arose within our participants. We did this to help us visually see what features our interviewees loved, hated, or wanted.

Refining the Prototype

Based on the feedback we received, we altered our designs. Our second round of interviews heavily influenced our final prototype as we made it our mission to meet our user’s goals and needs. This resulted in a more playful design, larger buttons, a new logo, and a complete redesign of the leaderboard and profile pages.

Refinement Week

After the two sprints, we had a week to go through our official refinement process. This time was dedicated to make sure we had fixed and mistakes and focus on really creating a seamlessly functioning prototype. One of the things that took up a lot of this time was ensuring that the placement on every screen was the same and that everything followed an 8-point grid. While we found a few inconsistencies while we went through our designs, there were minimal things to change due to us trying to be proactive in the previous weeks.

Conclusion

Overall, this was one of the greatest learning experiences I’ve had in my college career. I learned how to lead an amazing team and work with everyone’s different styles and availabilities. It taught me how to be a better leader and designer because I not only had to pay attention to what our users needed, but also what my team needed. I think using the Lean UX method is a fast way to get results and it taught me a lot about how to work together as a team, how to take feedback, how to quickly iterate on designs, and how to be comfortable with sharing incomplete work. Using the Lean UX method went against all the things my brain would normally tell me to do which made it difficult for me at times to wrap my head around all the requirements and iterations. While I loved being able to get so much feedback quickly, it was a lot of work trying to keep up with all the iterations within such a short amount of time but I think our team combated it well and I’m very pleased with the application we’ve created.

If I had more time I would’ve liked to do a few more usability tests just to truly confirm with our users that their needs are being met. I also would have liked to play with interactions more in Figma. Our prototype is functional and flows well but there are a lot of things to play with in the prototype settings that I would have liked to spend more time on to help create a more seamless experience for our users. Additionally, I would have liked to do more with our Apple Watch designs and gotten them tested for a second time. Using the Lean UX method may have been new and challenging for the group to adapt to, but I think we tackled it well and created something amazing that people could truly benefit from. I really learned a lot from working on this team and could not be more proud of the work we’ve done.

Thank you & don’t forget,

Homies Hydrate Homies :)