What was needed?

Our client came to us with an idea for a native application that enforced safer, undistracted driving by allowing parents to establish rules for their child to follow on their mobile device and monitor for unsafe behavior. We had complete freedom to develop the brand identity, which included a name for the app, a logo, app icon, favicon mark, word mark, and the visual language we would use throughout the application. Working with our copywriter, we brainstormed ideas for an app name. We centered naming ideas around three categories: supervision, driving, and device. What we liked about dont™ was that it got straight to the point. Essentially this app is telling the child “don’t” when they participate in distracted driving. We kept the word lowercase and omitted the apostrophe allowing it to become more of an entity – there was a name and an action. Additionally, it helped to visually balance the word.

Design goal

We wanted a logo that was fresh and bold so it would stand out amongst the crowd in the app stores. Our simpler UI made it possible to go bolder with a logo without overwhelming or distracting the user. We were relying heavily on the use of alert coloring throughout the app and wanted to lean into that motif with our logo. The name itself was a strong indicator of the app’s purpose, so we wanted the logo to correlate to the driving aspect and safety. This led to us drawing inspiration from traffic signs and alert colors. Because this is an app that requires a parent and at least one child, we needed two versions: one to clearly identify the parent app, one to clearly identify the child app.

The process

The first stage of our process included a moodboard for styles and color inspiration. Starting with a moodboard not only established the tone we are trying to set for the app, but it’s a great way for us to educate future clients about our design process from start to finish. We extrapolated our color palette beyond the typical red, yellow, and green to not only include blue, but also their tints and shades. We were drawn to the use of brighter, bold alert colors, not just for use as a metaphor, but as a way to direct and engage the user through the app. The styling of the app was done in tandem with the branding design, which enabled the design team to work efficiently and make changes as problems developed throughout the design and build phases.

Once we established a visual language we wanted to implement throughout the app, we began sketching. Perhaps you’re thinking “Why start with sketches?” Sketches illustrate initial concept ideas, allow for quick, immediate iterations, and are a good tool for manual thinking before diving into the digital realm. Working with pencil and paper gives you something tangible to work with, something you can feel and make sense of. That’s removed when you immediately jump into working digitally. Our initial ideas included connections to traffic signals and mobile communication. Our client desired a clear association to traffic lights, so that was the primary focus for this first iteration.

As you can see the above sketches show a few combinations of a couple directions we were considering. Taking these ideas, we moved our work into illustrator. Working in illustrator allowed us to clean up our lines and implement the exact colors we chose to review as a team before meeting with our client.

The first round of digital logos incorporates color to our cleaned-up sketch designs. From here, we begin to pick out as a team what we like, drop what we don’t, and make new iterations based on those collaborative decisions.

For the next iteration there was a heavier focus on readability and scan-ability. A logo is a symbol for a company, and clear, distinct shapes, type, color, and imagery are imperative for its success. We dropped the arrow at the end of the word “dont” and worked on a logo that incorporated all the components that we liked from above keeping in mind that what we create needs to be legible as an app icon.

Knowing that we were ultimately going to need an app icon was vital to our process. Through good app icon design, you gain more visibility, which leads to more user downloads. If you’re going to be designing an app icon, you’ll want to establish the purpose of the icon from the beginning of the design process. Your icon is the first point of engagement that a user has with your app. This is your opportunity to cut through the noise that is cluttering the app stores through your use of color, text, and imagery.

The three variations are very similar and include dark grey text placed over color, representing the alerts mentioned above, with one of the shapes symbolizing a chat bubble. Our client liked the ideas that we presented to them, but like many clients who are uninitiated, they struggled to put what they didn’t like into words. Sometimes all they can say is “I like it, but I’m not sure. Can we see something else?” It can be really difficult for clients to see how an abstraction can work with design, especially when they get stuck lingering on a more literal depiction and can’t let go of their original idea. It is our job to parse through their comments and peel away the takeaways.

Here’s what we learned. They wanted a logo that was simpler, a bit more literal, and with a greater emphasis on the purpose of this app. Our client was also concerned about their app getting lost in Google Play and the Apple App Store.

Our design team went back to the drawing board. Literally.

We reminded ourselves that our focus was on three things: the app name, communication, and driving.

Researching again what was already in the app stores - we saw that most safe driving app logos are very literal. Our client was concerned about dont getting lost in the app stores and going unnoticed. In order to stand out in the app stores, we focused on a logo that did not include traditional iconography related to driving. The word “dont” is strong on its own, and with the right treatment, encompasses what dont is about.

Returning to sketches, the design team focused heavily on creating a word mark. While color had been implemented in the previous iteration, stepping back and sketching in black and white let us focus on the forms being created without distractions.

Feeling confident with the direction that we were headed, we started reworking our sketches in Illustrator. Creating the letter forms from geometric shapes to mimic the shape of traffic lights, and also to create the illusion of movement.

For uniformity, each letterform was created using circles and squares. Creating our own type for this logo enabled us to manipulate each shape independently, resulting in four distinct letters that were original and meaningful to the app. The repeated curvature of each shape gives a sense of movement that carries the viewer from the beginning to the end of the word “dont.” The colors mimic a traffic light - first red, then yellow, then green.

The result

We landed on a word mark that merged aspects of two different designs from above. The final word mark is bold and utilizes geometric shapes to create motion between letterforms. Still using the established alert colors, but in a subtle way, prevents the word mark from interfering with alerts or status indicators used throughout the app. The placement of color, in the center of the rounded colors, is a nod to our original inspiration – a traffic light. A strong correlation to driving/traffic was a top priority for our client, and they desired a mark that grabbed the attention of teen drivers, without being childish, and was also eye catching for parents, without being too literal.

We had bounced around the idea of using the full word mark for our app icons as well, however we chose to simplify the design knowing that we would need a parent and a child version.

For both the child and parent apps we shortened the logo down to just the lowercase “d”. The word “dont” has a hard stop at the end, and we wanted to emphasize that, so we added a period. We also made the period red, just like a traffic light, to accentuate the concept of “stop” (or in our case “dont”). Within the dont app the driving behavior of the child is either allowed or not - an extrapolated idea of stop and go, which led to the decision of making the smaller circle within the “d” green.

The dont | parent app icon keeps the same grey “d” from the word mark but has been placed on top of an off-white background. For stark contrast to differentiate between the two apps, we inverted the colors for the dont | child app icon.

DONT™ BRANDING CASE STUDY

What was needed?

Design goal

The process

The result