Steer Clear is a mobile application aimed at helping young drivers stay safe on the road while passing along savings to their families. The app gives young drivers an opportunity to practice their driving skills and be evaluated by how well they handle their vehicle.
An outdated version of the app was available to customers and their young drivers, but both the company’s internal reps and participants dismissed it as outdated and inefficient. It was time to rethink the app and find a way to appeal to younger audiences while adding value to their families and the company that insures them.
To better understand the market, I downloaded and explored numerous educational and driving apps. As the lead designer the Steer Clear team, it was important to study the various interactions and flows, from onboarding to account registration to dashboards. I also noted color pallets and visual styles, as it would need to appeal to the target audience, new drivers 16-24 years old.
Unlike other products in the company portfolio, Steer Clear was initially allowed to explore colors and styles that differed from the brand standard serious and corporate tone. The company still wanted its flagship color, red, to be at the forefront, so I researched companies that were known for their rosy hue to see how they introduced other colors.
While looking at other apps, I also noted emerging trends and styles. One particular style that stood out was the use of gradients in bright, bold colors. I looked at the client’s color palette and used began experimenting with gradient styles, angles, and textures.
Illustration styles were also explored, as the app would need graphics that were friendly and playful. While there were infinite styles and looks for inspiration, I went for a simple, flat, and fun style that could be modified with color with ease.
The project lead was inspired by the use of gradients and simple illustrations, and wanted to see colors pushed even further. Bold colors from the brand’s secondary palette, normally applied with limited use, now took center stage to make bright vivid statements. Gradient brightness, angle and percentage all went through various experimentation.
While the product team loved the direction of the color palette and gradients, the company’s brand department did not approve. They wanted screens to return to red and grays, with secondary colors used only in extreme limited amounts.
Not satisfied with Brand’s response, the UX team presented them with examples from Target and Nickelodeon. In the case of Target, we showed how secondary colors add visual interest and diversity to the UI, while for Nickelodon they allowed sub brands to have appeal to distinct audience without straying far from the parent brand. Research was also conducted using actual Steer Clear screens with the brand palette and something more bold, to see what appealed to younger audiences. While young audiences felt the brand colors were expected, they were more excited by bolder hues.
To blend the research results and demands of the brand, I investigated ways to minimize color while still maintaining pops of color. We knew product wanted to release an app that was appealing to its target audience, so we considered different ways of approaching the color conundrum.
While color and styling was at the forefront, I also kept working on the UI elements for screens throughout the app. Button styles, headers, and typography were all pieces that still needed to be ironed out.
As Brand continued to harp down on gradients, I explored other ways to create interest with color. I began using shape layered with monochromatic elements to create a gradient effect, without being a true gradient. The project lead was interested in this approach, and asked to see more examples of circle and swoosh gradients.
During this time, the creative director also stepped in, and wanted to explore more color options akin to Target. As is the case with experiments, sometimes they fail.
Meanwhile, Brand began to change their tune to the strict color rules, and after presenting more research, began to relax. The creative director was relieved but still wanted to see more exploration of shapes and layering on pages that were not copy or interaction heavy. After exhausting this option, the header shape was then explored, helping to create a better color/white space ratio.
As the copy began to trickle in, content began to shape the illustrations. New, bolder spot illustrations evolved, and momentarily the color palette went bold. After bold, vibrant screens reared their heads, we revisited our visual and color language to refine it to its final state.
At long last, brand, product, and UX came to a consensus of the look and feel to be used. Subtle, monochromatic gradients could be used on pages such as onboarding and verification screens, while used minimally in headers elsewhere. Bold illustrations were toned down, and the use of objects rather than people was agreed upon. Red was still the dominant color, but the secondary palette found places to pops of color and youthfulness.
With Brand battles settled, I was finally able to focus on other areas of the app and the UI for both the iOS and Android versions. The hub of the app, the dashboard, was a screen that relied on secondary colors and iconography for visual interest to deliver important information.
While there were many iterations between the first and final approved version, the exploration was a much simpler experience compared to the color and styling.
Interaction design was key in making the drive flows successful, and I worked closely with an architect to ensure the screens led the user through the process with ease and clarity.
As the Steer Clear app finalized and my role came towards its end, I went through countless reviews of screens to ensure all illustrations were accounted for and all color hierarchy made sense. Likewise, finalized copy gave the screens a polished feel, and playful animations provided a touch more of fun.
