An app to track your two-wheeler at all times.
Reading time: 5 minutes
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.
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
- Scale & proportion
- Dominance & emphasis
- Similarity & contrast
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.
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
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
- The simplicity of Apple
- The rigour of BMW
- The speed of Porsche
- The technology of Uber
- The blandness of gov.uk
- The severity of Royal Bank of Scotland
- The flimsiness of Ryanair
- The pretentiousness of Rolex
- The dated thinking of Nokia
In a nutshell, the brand would be:
“Forward-thinking and robust but never complex”
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.
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.
“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.
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.
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.
H1: Roboto Regular, 36
Message: Roboto Regular, 22
Body: Roboto Regular, 20
Icons and Images
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.
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
“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
For more information, please visit: heleneobrien.com