The day I joined the team at Mark One, the company took a turn to develop a smart cup that tracked water-like beverages. Not only did the team need more time to develop the sensor in the Vessyl, but they also saw a need for people to stay hydrated. I came on board and began to develop an app that helped people stay in their sharpest and strongest through hydration.
Role: Visual Designer for Front-End
Have you heard that you should drink 8 cups of water per day? The truth is, we all have different hydration needs. Nearly half of american adults drink less than the daily recommendation of water.
Not drinking enough water can effect so many aspects of a person's life such as mood, anxiety, skin, dental problems, constipation, cramping and so much more. Plus, there are so many factors that also influence and affect hydration such as age, sex, weight, height, activity level and more.
“Have you heard that you should drink 8 cups of water per day? Truth is, we all have different hydration needs.”
— PRYME VESSYL
Pryme Vessyl is a smart cup that automatically knows and tracks water-like beverages that you drink. The Vessyl cup paired with a mobile device will help its user fulfill their unique hydration needs.
In all of the apps, users filled out a "form" and was given a "goal" (an amount of water that they need to drink by the end of the day). This kind of calculation was incorrect due to the change of activities throughout the day. The issue that we ran into many times throughout the iterative process was trying to dispel the concept of "8 cups of day" equals hydration in our focus groups. Some did not see the need to receive reminders to drink water and thus the team had to show them the real data and statistics on the topic of hydration. We took note that we had to educate people through the app by providing timely, encouraging insights about drinking water.
Things groups pointed out while using other apps
- Found on boarding to be uneventful and boring.
- Untrustworthy due to lack of consideration to activity levels
- Not educational or informative about the importance of hydration.
Here were some areas we kept in mind while brainstorming ideas on the app experience.
- How can this be an unique experience for our users?
- How can we use on-boarding as an opportunity to educate our users?
- How else can we help our users stay motivated and inspired?
- If user has limited time to know how they're doing, how can we show his hydration level at a quick glance?
- How can we visually show decay in hydration?
Working closely with the UIUX designer, he would design these wireframes and hand them over to me. We would then sit down with the design team to test and see how else we can improve the flow. We would then prototype the animation and test it in smaller groups within the company.
Insight would change depending on the user's hydration need. User will receive different insights throughout the day. The type of insights were organized into an Insight Tree so that the developers knew what the outcome would be after putting in certain inputs.
Create an account
This was my take after sketching a quick storyboard of how I thought the process should look like after the user signed in. If I were to not have any limitations in terms of coding, I would make it engaging like this - using depth of field and smooth camera transitions. The goal of this animation was to provide a seamless bluetooth connecting phase in the app and see what was feasible for the developers.
In order to create this section of the app more eventful and educational, the design team and I came up with an idea to create an upward movement from one question to the next as if the user was being moved up a level every time they gave an answer. Each question would be connected by a line and towards the end, it would lead the user to a white dot that glowed blue. We saw the on-boarding section as an opportunity to teach users how to read the LED line on the cup. If you see the blue dot, you're in Pryme! If not, time to hustle and drink more water!
After experimenting with the first set of visual designs, the team felt like the homescreen was a bit dull with just one shade of blue. I started to experiment with gradients to give it more dimension and interest.
This idea then morphed into what if the user wanted to just glance at the homescreen real quick to see how they were doing? How would we show their hydration status? I then created and experimented with 2 colors - light saturated refreshing blue and a dull navy blue to communicate which part of the spectrum of hydration the user was in. I then worked closely with the developers to provide them with the Hex Values in creating this interactive/personalized background. We also had to tackle some hiccups in terms of particles, # of characters, type of insights, etc.
From Insight to Beverage/Activity Timeline
The Timeline plays an important aspect of the app. We wanted to let users know how they're making progress and exactly what in the past has affected their hydration for the day. By keeping the goal in mind, we didn't want it to just be a "right now / here" kind of thing but a process where goals are met and there is growth.
Being inspired by the ripples made when anything touches water, I drew circles to show the amount of impact it would have on a user's timeline. These circles would represent different physical activities the user would participate in. I created a system of how these assets would map on the screen and how they would be deleted. For ex: Figuring out how much information to show on the timeline. Our goal was to allow the user to see the entire day on one screen by zooming in but because we set milestones to hit and the developers were already swamped building other parts of the app, we decided to tackle this as phase 1 by allowing 3 hour increments on a screen at a time. As the user would swipe down to see earlier parts of the day, time would fade in and out next to the line.
End of day Summary
Users are asked during on boarding what time they typically go to bed. With that information, the app notifies the user with an EOD summary notification 30 mins before the user's bedtime. By providing access to the user's end of day summary on the homescreen before bedtime, users are able to see how they've done today and how to improve for tomorrow.
PRYME TIME CELEBRATION
After adding a Pryme bar to show the status of the user's hydration and how much more they needed to drink, I animated a dynamic "In Pryme Time" screen. It showed 3 important information - how long the user has been in Pryme, how much longer they will be in Pryme before they drop off and a quick encouragement.
This animation prototype was to show developers what we wanted to see in the app when the user would get to PrymeTime. Everyone absolutely loved this and it made them even more excited to get to their Pryme!
APPLE WATCH DESIGNS
After animating and working with the developers on the app, I took on the initiative to research the Apple Watch. We had big hopes and dreams for the Apple Watch. After understanding some of the design constraints and researching on what the actual needs were for a person wearing a watch, I had to narrow down what was feasible for phase 1. In order to stay consistent with the app, I designed the same visual assets but on a smaller scale. The notifications had to appear in a timely manner and have give good insight.
This is available on the Apple Watch today.
My ideal next steps would be to continue refining the animation, working closely with the developers. I would also like to include overall error message system, settings, and also a profile screen where the user could see their weekly and monthly hydration status. For now, it is on the app store for use.