Bike Spy: a UI Visual Case Study

Hélène O'Brien
Jan 5, 2018 · 5 min read

An app to track your two-wheeler at all times.

Reading time: 5 minutes

Image for post
Image for post

Methods: mood board, brand personality and affinities, brand positioning, inclusive design, sketches, wire frames, usability testing, digital prototyping.

Tools: Sketch, InVision, sharpies, post-its and paper.

INTRODUCTION

Hello, I’m Hélène. Thanks for reading my post on Medium! I’m glad to be sharing one of my hi-fi prototype apps with you.

Further to creating an interactive prototype that allows users to track their two-wheeler, I was tasked with developing the visual design and brand proposition for the product.

Visual design is a language. It consists of a series of elements such as lines, colours, typography, images and proportional hierarchy.

For these elements to offer the relevant affordance, it is important to mind the six principles of visual design:

  • Unity & harmony

When applied properly, these principles give visual designs clear user interface, accessibility and usability.

Through a series of wireframes, mood boards, and iterations I developed a brand identity called Bike Spy and applied it to my original interactive prototype.

LOW-FI WIREFRAMES

Image for post
Image for post
Low-fi wireframes in Sketch
Image for post
Image for post
Low-fi wireframes in Sketch

As mentioned above, the first step I took to develop a strong visual identity for my product was to create low-fi wireframes in Sketch.

This allowed me to digitise the design functionality previously validated by users.

Here is where the visual design process begins.

Just like any other type of designs, it follows the double diamond process.

THE VISUAL DESIGN PROCESS

Image for post
Image for post
Double diamond process

1. Discover

Brand Personality and Affinities

In order to define the brand personality of my product, I used the brand comparison technique and thought of my product as…

The ideal blend of:

  • The reliability of Mercedes

and avoiding:

  • The blandness of gov.uk

In a nutshell, the brand would be:
Forward-thinking and robust but never complex

2. Define

Brand Positioning

Image for post
Image for post
Brand positioning (final version)

In order to define the positioning of the brand, I used the grid above and marked in blue where I saw the brand sitting.

I then presented this to users and made alterations where required.

Above is the latest validated version of the brand positioning.

Mood Board

Image for post
Image for post
Mood board

After defining the brand positioning, I created a mood board to communicate the user experience throughout the app.

I presented this to users and captured below some of their key words.

“Security”
“Serenity”
“Protection”
“Trust”
“Reliability”
“Hi-Tech”
“Spy”
“Sleek”
“See your bike from your phone”

This exercise validated the look and feel I wanted to deliver to users, I then had to transpose and develop it into the visual design of the product.

First, I needed to capture the colours that resonated with users key words.

3. Develop

Colour Palette

Image for post
Image for post

Black for power and robustness
Dark blue for trust
Beige for calm and control
White for simplicity and serenity

Turquoise for hi-technology
Green for security and protection
Red/Pink for alert

You can see above the primary and secondary colours I selected with the rationale on the right hand side.

The next step was choosing the typography which would deliver the concept behind the app.

Typography

I opted for a clean, legible, and hi-tech typeface to best communicate the intended user experience. The details and hierarchy can be found below.

Typeface: Roboto
H1: Roboto Regular, 36
Message: Roboto Regular, 22
Body: Roboto Regular, 20

Icons and Images

Image for post
Image for post

Hi-Fi Prototype and Iterations

After a series of user testing, I incorporated the feedback and fine tuned the visual design.

You can see below from left to right some of the key changes made to the screens.

Image for post
Image for post
Iterations from left to right.
Image for post
Image for post
Iterations from left to right.
Image for post
Image for post
Iterations from left to right.
Image for post
Image for post
Iterations from left to right.

4. Deliver

Image for post
Image for post
Final hi-fi prototype in Sketch
Image for post
Image for post
Final hi-fi prototype in Sketch

I conducted testing with seven different users.

As you can see above, the visual design evolved dramatically from the original screens.

Taking into account accessibility and usability - buttons, font size, hierarchy and colours evolved to ensure a smooth user experience.

Above is the final version of the hi-fi prototype. You can review user feedback further down.

TRY IT OUT

Please click on the following link to launch the prototype: https://invis.io/3BE2KDRJM

USER TESTIMONIALS

“I think this idea can be applied to so many other belongings, it looks great and sleek!”

“Well done for getting across serenity! Thanks for a great app, I can’t wait to have a scooter again”

“This is security for sure. This is a great concept and the graphic design is brilliant! I really trust this app”

“ I spy, spy with my little eye… love the design in general, it’s kind of … sturdy”

“Looks urban and sleek and very clear!”

BEFORE YOU GO

👏 50 Clap if you enjoyed this article, this will tell me to write more of it!

🤔 Comment if you have something to say

🙂 Click follow Hélène O’Brien to get updates of my recent articles

CONTACT

Email
LinkedIn
Twitter

For more information, please visit: heleneobrien.com

Image for post
Image for post
Me in action. User testing

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch

Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore

Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store