Designing interactions to effectivley log water consumption

H2Organizer is a straightforward app that allows the user to effectively track water and other drink consumption. My focus with this project was on interaction design. My goals were two-fold: to create a highly intuitive design and create interactions that are rewarding to the user and promote further use.

Project Info

Tools Used

Initial Research

To no surprise, there is a wide variety of water tracker apps in the app store. What came as more of a surprise was the lack of good ones. I saw overly complicated and thus overwhelming apps. These are one-task apps, they should be intuitive and simple. I also saw a lack of rewarding visuals and and opportunity to build polished interactive animations that reward the user and keep them coming back.

The Problem:

  • Overwhelming app designs all around
  • Task-flows are hard to manage
  • Lack of quality visual aesthetics

Process and Insights

Wireframes

Simplicity is the name of the game here. In creating my wireframes, I wanted designs that allowed for comprehensive and rewarding interactives and a straightforward task-flow.

Design Goals

Project Goals

Wireflow

My initial wireflow was my first chance to showcase the simple task flow I wanted to implement. The task of tracking water consumption can be achieved in 1-4 clicks.

Project Goals

IX-Flow

Designing quality interactive animations for my app was one of the main goals of this project. I wanted light and fun animations that rewarded the user for completing certain tasks. Additionally, I wanted my interactives to contribute to the simplicity and intuitiveness of my app. I began the ideation process with sketches of potential interactive animations. After personal analysis and peer review, I refined the sketches and mapped out the flow and definition of the interactions.

Project Goals Project Goals Project Goals
Project Goals
Project Goals
Project Goals
Project Goals
Project Goals

The Solution