Aylin Serra Orhan
 For busy people who forget to drink water throughout the day and want to properly hydrate,  blu  is a mobile application: that sets personalized hydration goals, reminders and incentives to stay on top of them.  blu  is accompanied by a conceptual product, which is a bottle that tracks the amount you drink and automatically syncs it to your phone. Unlike other apps,  blu  keeps track of water consumption in a realistic and convenient way so that the user can go about their day with one less thing to worry about.   

APP DEVELOPMENT

As part of my Interaction Design class, we worked on the process of conceiving, mapping out and designing an app that we believed would make people’s lives easier in some way. I was drawing from the experience and need of myself and those around me when I came up with this conceptual app and product combination that enabled consistent and effortless water consumption.

 For busy people who forget to drink water throughout the day and want to properly hydrate,  blu  is a mobile application: that sets personalized hydration goals, reminders and incentives to stay on top of them.  blu  is accompanied by a conceptual product, which is a bottle that tracks the amount you drink and automatically syncs it to your phone. Unlike other apps,  blu  keeps track of water consumption in a realistic and convenient way so that the user can go about their day with one less thing to worry about.   

For busy people who forget to drink water throughout the day and want to properly hydrate, blu is a mobile application: that sets personalized hydration goals, reminders and incentives to stay on top of them. blu is accompanied by a conceptual product, which is a bottle that tracks the amount you drink and automatically syncs it to your phone. Unlike other apps, blu keeps track of water consumption in a realistic and convenient way so that the user can go about their day with one less thing to worry about.

 

  The example use case for  blu  would be someone who is distracted with the business of daily life which makes it difficult for them to keep up optimal hydration. As a solution the user would acquire the bottle, download  blu  and set up their account Afterwards, based on their personal information such as age, activity levels, height and weight, they would be given personalized goals and receive their first reminder to drink water. They would drink from the  blu  bottle, and with the power of bluetooth the app would sync their progress automatically. This way, the user is able to go about their lives having hydrated enough without extra thought or effort.

 The example use case for blu would be someone who is distracted with the business of daily life which makes it difficult for them to keep up optimal hydration. As a solution the user would acquire the bottle, download blu and set up their account Afterwards, based on their personal information such as age, activity levels, height and weight, they would be given personalized goals and receive their first reminder to drink water. They would drink from the blu bottle, and with the power of bluetooth the app would sync their progress automatically. This way, the user is able to go about their lives having hydrated enough without extra thought or effort.

 The way fitness trackers worked were my main inspiration for the project, so I looked to  Fitbit  for functionality inspiration. Additionally, I referenced another water drinking app called  My Water  that functioned purely manually as a reference for content, and  VSCO  as a jumping off point for the aesthetic — which later took on a life of it’s own.

The way fitness trackers worked were my main inspiration for the project, so I looked to Fitbit for functionality inspiration. Additionally, I referenced another water drinking app called My Water that functioned purely manually as a reference for content, and VSCO as a jumping off point for the aesthetic — which later took on a life of it’s own.

 These are some screens of my first prototype. The first is the home page, followed by the “Guide” page, the user profile and the social pages.

These are some screens of my first prototype. The first is the home page, followed by the “Guide” page, the user profile and the social pages.

 After creating the prototype I needed to test it on potential users. My main goal was to see if the content and flow made sense to the user. Across the board, all participants were able to complete all tasks, but there were a couple of lucky guesses and areas of uncertainty.

After creating the prototype I needed to test it on potential users. My main goal was to see if the content and flow made sense to the user. Across the board, all participants were able to complete all tasks, but there were a couple of lucky guesses and areas of uncertainty.

 I seemed to have had too much going on on the main page for actions to be clear. Some of the added elements such as “Guide and Explore” were confusing to the users which were removed as a result. I decided to get rid of anything that wasn’t a core functionality of the app.  Additionally, the  home  button which I had placed in the middle was confused for the  manual log water button  almost every time, so I turned it into the  manual log water button.

I seemed to have had too much going on on the main page for actions to be clear. Some of the added elements such as “Guide and Explore” were confusing to the users which were removed as a result. I decided to get rid of anything that wasn’t a core functionality of the app.

Additionally, the home button which I had placed in the middle was confused for the manual log water button almost every time, so I turned it into the manual log water button.

blu side by side2.jpg
blu web content10.jpg
 Here is the full progression of how the logo came to be; starting with physical sketch explorations and later exploring different iterations with color in the digital sketches. I initially wanted to include an upside down triangle as it represents the sign for water in alchemy, but ultimately realized that it wasn’t the most effective visual translation for what the app was developing into. While sketching out logos I was simultaneously exploring different visual styles for the main pages of the app. The hexagon, which I had used as a frame for the user identities stood out as a strong and unique shape which I then pulled into the logo.   

Here is the full progression of how the logo came to be; starting with physical sketch explorations and later exploring different iterations with color in the digital sketches. I initially wanted to include an upside down triangle as it represents the sign for water in alchemy, but ultimately realized that it wasn’t the most effective visual translation for what the app was developing into. While sketching out logos I was simultaneously exploring different visual styles for the main pages of the app. The hexagon, which I had used as a frame for the user identities stood out as a strong and unique shape which I then pulled into the logo.

 

 Wireframes showing the onboarding process, along with an example of manual water logging progression.

Wireframes showing the onboarding process, along with an example of manual water logging progression.

 Here is a mockup of a desktop wireframe. The mobile version of the app is where engagement and activity is most heavily expected; this is where the user sets up their account, receives reminders and alerts and can engage in the social element. The desktop’s primary differentiator is that this is where the user is directed if they want to purchase the accompanying bottle product.

Here is a mockup of a desktop wireframe. The mobile version of the app is where engagement and activity is most heavily expected; this is where the user sets up their account, receives reminders and alerts and can engage in the social element. The desktop’s primary differentiator is that this is where the user is directed if they want to purchase the accompanying bottle product.