Guzzi UI

Process

  • I started by chewing on the assignment over and over in my head. As I went and did other normal daily tasks thoughts began to stream in.
  • Eventually I began working up these thoughts in my “problem space” in a sketch book; this allowed me to quickly identify the considerations and affordances needed to make the UI work in the context of a car navigation system.
  • Then I did some research and took an audit of other car interfaces (both analog and digital). I clipped them a Collection in Dropmark for analysis to help inform the UI and overall design direction: https://jdsimcoe.dropmark.com/574794.
  • Since I had limited time for iteration, I moved to Figma for the core of the design process. I would work on small pieces at a time, and found that new ideas would come and build on my existing ideas when I came back to the design.
  • Normally my process would involve more sketching/whiteboard and team collaboration, but getting my ideas into Figma into a moldable state enabled me to more quickly iterate and build on my ideas working solo.
  • Finally I carved off a separate Figma board with all the layers I would need to execute a Framer prototype. I used Framer’s native Figma integration to pull designs in and began adding interactions and motion to the prototype.

UI Decisions

  • Most car UIs are technical with lots of cognitive load and small UI controls—I wanted the UI to feel light, easy to glance at to get useful information, and not be distracted
  • “Distracted” driving and safety was a huge concern—even though the car is self-driving, much technology pulls us away from the world around us, I wanted the interface of this project to disappear as much as possible, be useful when needed, and allow the driver to enjoy the drive
  • I was inspired by the Apple Watch’s focused “one-thing-at-a-time” interface; I wanted the car interface to be largely against a black background, and be very stripped down with icons to access the various modalities of the app
  • My intention (hard to convey in flat designs or Framer) was to have the actual touch screen have haptics built in, like the Apple Watch and latest iPhones—haptic feedback adds to the feeling of a screen having depth and tactility

Color

  • Reducing the color palette for day/night is an effort to simplify the interface of the screen, suit the natural environment and not provide colorful distractions that will pull drivers and passengers away from the experience of driving and sightseeing.
  • Amber Case wrote a fascinating article about why blue light is contributing to health problems; many military and aerospace interfaces heavily use orange/red lights to avoid the cognitive strain of blue light; this influenced the decision to have an orange theme for night, and a blue theme for the day

Typography Selection

  • I wanted a typeface family that was versatile, worked well at different sizes and contexts, offered a range of variety, and had monospace variants
  • Also, I wanted something that felt like it “fit” in the context of a car, driving, and roads
  • I chose the Overpass family of fonts (based on the U.S. Federal Highway System’s Highway Gothic): http://overpassfont.org/
  • Overpass performs very well at small sizes, but also works at larger display sizes
  • It brings in a character that hints at roads and driving, but still remains neutral and balanced
  • It was important that the typefaces on the screen were large enough to be read by people with poorer eyesight, but not too large for people with great eyesight. The UI I present below strikes a balance to support any use type. 8pt Grid
  • 8pt grids are fairly standard for touch interfaces (Apple’s HIG roughly conforms and Material UI almost completely conforms to an 8pt grid)
  • I tried to use the 8pt grid for layout/spacing/typographic scale and in as many areas as I could
  • An 8pt grid promotes harmony among elements as they are spaced out on the screen

Hi-Fi Screens

Night Theme

The goal with the Night Theme was to surface colors that would reduce eye-strain at night and provide optimal viewing for the natural environment.

Day Theme

The Day Theme screens represent the same six views previously shown in the section above. I won’t repeat the explanations. The only thing that is different is that the UI colors are optimized for blue light during the day. Similar to Apple’s Night Shift and products like F.lux, the idea is to shape the display of the screen to best suit the environment. Blue for sky/day.

Dusk/Dawn

I didn’t have time to fully develop the Dusk/Dawn themes, but the color spectrum I developed would support this:

Animation/Prototype

I animated some of the basic ideas of the Dashboard UI and flow in Framer. There are lots of fine-tuning and different interactions that I wanted to explore (like moving dials, rpm, gearing, power, advanced button states, etc.) but I wasn’t able to get to them in the 10hr window:

https://framer.cloud/cRbqC/

Final Thoughts

This 10 hour exercise felt like it flew by! There are some many other things I wanted to explore:

  • I felt like I was just scratching the surface on the interactivity of dials/switches
  • I wanted to add some affordance UI to the slide up dock panel to indicate it could be slid back down
  • The animation and movement of the UI is something I also wanted to convey.
  • Being able to bounce ideas off other designers, and iterate more on the concepts would allow these ideas to develop even further.

My feeling coming away from this exercise is excitement and thirst for more. I thoroughly hope you enjoy my thinking and exploration!

Jonathan Simcoe

Text