Designing for Anchor, a new way to build healthy hydrating habits
Creating mood boards and style tiles for a water-minded app.
We just finished a moment of flaring our ideas, going on our own and generating ideas for how we may implement our Zoom app in wireflow form. As a quick aside towards focusing down onto one solution, we now have to start thinking about our solution’s identity, using mood boards and style tiles to communicate these ideas.
If our brand were a person 🧐
In class, our team met and completed the brand personality activity to nail down the vibe for our potential solution. You can find our brand personality chart below.
Some important things to call out:
- We want to position our solution as youthful and fun. Drinking water isn’t really all that sexy, but with the right marketing we think we can make it work. Our brand should be bright and energetic to motivate our college-aged audience to want to drink water.
- We want our brand to be relatable and understanding. We’re here to encourage users to improve themselves and we want them to know that we’re there with them every step of the way. We should be there to congratulate our users at the right time and be there to pick them up after a set back. Our brand should be seen as human and helpful.
- Our brand should also be clean and structured. We’re helping our users achieve a goal so we need to be reliable and composed. Users should know that they can depend on us and that their hard work won’t go wasted. Brands like Notion and Airbnb also help their users get things done and have similar positioning.
About the name… ⚓️
We had a lot of names thrown out as we were developing our prototype, from tame ones like WaterWise, to perhaps more audience-appropriate ones Daydrink!
Ultimately, we settled on Anchor for its nautical-themed potential as well as a fun nod to B.J. Fogg’s concept in Tiny Habits. At the end of the day, it’s what our app does — creates a new set of anchors to latch onto to increase the amount of water we drink.
Our team’s mood boards! 😊
Before we met, we each brainstormed what conception we had of Anchor. When we came together to start developing our identity, we were surprised to see how much overlap there was both aesthetically and visually!
Karen’s mood board
You can find a link to Karen’s Pinterest mood board here.
For my mood board, I tried to find images that would complement each other aesthetically but could also stand on their own individually in terms of our branding. I used the brand personality form we made in class as a jumping off point. I incorporated clean designs such as Kinfolk, the Airbnb UI kit, Notion as well as physical objects that I thought were on the same lines as our brand like the roller skates (retro but cool). A common theme throughout all of our mood boards were different shades of blue, and I really liked the water/pool/ocean patterns. I’m hoping this mood board conveys a clean and exciting vibe that our brand is going for.
Kristina’s mood board
I went for a summery, beachy vibe to match a casual and fun tone that should come with hydration (hydrate or die-drate at darties lmao). I also thought that using fun colors and graphics might keep users engaged in the anchor points in a similar way that the Duolingo owl keeps users engaged when it notifies them to do their Spanish practice. There are few delightful technologies out there and I think when you’re intruding on user behavior it helps to be delightful, which is what this moodboard is meant to convey.
Ray’s mood board
You can find a link to Ray’s Google Docs mood board here.
For my mood board, I wanted to have a clean, classy, fun and inspirational theme. I aimed for a vibe like the city of Seattle, which is modern, fun, clean and certainly very hydrated. I want our users to feel encouraged to drink more water by a source that feels trusted and that seems like it has the users’ best interests at heart. This spurred the inclusion of the “another day, another opportunity” poster. I also included the Duolingo owl as an example of a fun and trusted helper. I also tried creating a fun atmosphere by adding pictures of people enjoying themselves. Of course, I also incorporated a theme of hydration and water and added pictures of water that fit the mood board’s tone.
Vincent’s mood board
Words I want to associate with Anchor include “motivating,” “intellectual,” “youthful,” and “fun.” For my style tile, I approached the aesthetic problem by thinking of an aesthetically pleasing Instagram feed — nice colors, muted with pops of color, and projecting a level of happiness and supportiveness. Blue is a natural choice for a water-mindfulness app, and I liked deep blues and royal blues as well as sea foam greens. Anchor should also be a bit of a party, creating pockets of delightful interactions throughout a Zoom meeting, and so I threw in some photos to reflect that
Anchor’s UI kit
Seeing that we were more or less on the same page, we dove into developing our style tile for the app, which you can find in its completed state below. More info about our rationale after the jump!
Some things to call out here about our design decisions:
- Our logo is all lower case to seem approachable and human. The the bold, black font is readable and provides a feeling of structure and stability. The blue anchor obviously show a connection to water and represents how our app works. However, we omitted sharp edges from the anchor so that it seems more friendly, welcoming and more fluid-like. The anchor’s shape itself is also reminiscent of a smile, which helps promote our fun, youthful vibe.
- When thinking about our typefaces, Fredoka One is a good header font because it’s bubbly and bouncy and effervescent like water; at the same time, the typeface is also not far off from traditional sans serifs, making it a youthful but intellectual choice. The body needed a bit of restraint to balance out this choice, and so we chose Sofia Pro, a nice, clean geometric sans that complemented well with Fredoka One.
- Our button choice is circular and smooth to evoke more imagery of water. The all caps font helps give the button a modern but also fun feeling. We also ensured that the buttons had hover effects so that our UI is responsive and detail-oriented like our brand is supposed to be.
- Our primary colors are blue and some grayscale colors. The blue is there to evoke hydration imagery but also because it’s soothing and welcoming. The grayscale colors are used to create a clean, structured and organized feeling. However, we threw in colorful green, pink and yellow secondary colors because we wanted our UI to still be fun and youthful. Having only blue, grey, black and white colors seemed a bit too corporate to us.
- The app icons were drawn by Vincent. We were inspired in part by the way water droplets like to cling and pool together on surfaces, and so we intentionally ensured there were no harsh outside corners in our icons.
