FREE NOW Blog
Published in

FREE NOW Blog

Design Principles

How FREE NOW Is Using Design Principles to Build a Better Driver App

A walk through ​the creation process, the principles and how we are using them today

Here at FREE NOW, we have a distributed team of designers working on various products, including our rider and driver apps, internal and external management tools, etc. These products have significant differences regarding where, why, and how users interact with them.

As a team, we split up the work on the different projects and topics, but we soon realised that we were focusing too much on our respective areas. We noticed that design decisions were inconsistent across product squads, mainly because they were taken based on the individual designer’s perspective.

Over time, mostly during our design critiques, the designers working on the Driver app found that it was getting increasingly challenging to design for drivers despite having a shared context of how to do it. ​​We needed a proper guidance to improve the design process and the output across the squads.

Considerations when designing for drivers

Fact: It’s dangerous to use a mobile phone while driving. Taking your eyes off the road and checking your phone for 5 seconds at 70 km/h is the same as driving 100 meters blindfolded. With this in mind, our design starting point has been to minimise drivers’ need to look at their phones.

Photo by Thibault Penin on Unsplash

Making things a bit more complex, drivers usually have their phones mounted on the car dashboard, approximately 70 cm away from them. Compare that to a person holding a phone in their hand, where the usual distance between their face and phone is 15 cm.

As for their environment, most of the time, passengers are in the back seat, likely traffic around them, and bright sunlight or other vehicles headlights coming through their windshield.

Our driver app also has a dedicated area where drivers can track their earnings or plan their day. The design of these features, which they may access while not necessarily driving, should also be considered.

Creating our design principles

What guidance should we follow? Here’s how we created a set of design principles for our driver app.

Alignment

We decided to set up a task force to create a set of design principles that would help us design our driver app in the FREE NOW way. We asked ourselves a question: What should our design principles stand for?

To get more context on what we were dealing with, we sent a survey to the designers in our team, asking when, where, and how they would use design principles. With this survey, we understood that these principles should be our guiding star, reflecting our design philosophy and articulating what is essential for us when designing.

We also agreed that the principles are not just for designers but everyone influencing the design direction of our products. They should guide tradeoff-type decisions during product development and provide a framework for designers and stakeholders to make better decisions.

Ideation

The ideation phase started with a session where the driver design team analysed the survey results and defined the design principles’ main characteristics.

We also had a team workshop. First, we generated ideas individually, then grouped them into clusters, and eventually voted on what we considered the most relevant concepts based on our initial discussion.

Screen capture with the results of the first workshop we did with the team

And after some work from the UX writers on our team, a draft version of the Driver Design Principles was ready to be tested in the real world.

Feedback

The next step was to test the principles in context, so we decided to run another workshop with the team. This time, we reviewed the current app and gave feedback using the principles we had recently defined.

This session helped us delve into each principle, highlighting some areas that needed clarification.

Refinement

Once the feedback round was wrapped up, we realised that we still needed to address some grey areas in the definitions. So we went back to the drawing board to discuss and better define each principle. Pretty much refine, align, test, and refine again.

Our five driver design principles

Now that you know how we crafted our principles let’s take a look at each of them and how they work.

Contextual

We consider the scenarios in which our products are used — keeping in mind driving, non-driving, and managing use-cases and their implications.

Our designs don’t exist in a vacuum. When exploring a new idea, we always consider the context it will be used. What type of driver, manager, or representative are we designing for? Where do they interact with our products? And, what might be distracting them or taking away their attention while they use any of our tools?

Safe

We encourage safe behaviour to minimise any potential risks while driving and using our app — avoiding distractions and helping drivers to keep their hands on the steering wheel.

Our designs never distract drivers or demand their complete attention while driving. We prioritise navigation and passenger details over unrelated information, showing the relevant information where and when drivers expect to find it.

Simple

We design in such a way that enables our users to quickly see and understand at a glance, allowing them to act confidently.

Our designs do not overwhelm users. This is achieved by removing any superfluous information. We always display legible fonts, both in size and contrast. Buttons, icons, or action targets are easy to identify and act on, especially in driving use-cases.

Reassuring

We empower our users to take control when using our tools, removing any doubts and helping them make conscious decisions about things that impact their daily working lives.

Our designs help our users to understand any action they choose to perform and what to expect. They decide which action to take, not us: it’s the opposite of “do it, because we said so”. If we want them to change a behaviour or perform a specific action, we provide them with a clear benefit.

Well-crafted

We craft delightful micro-interactions and pixel-perfect design solutions to positively impact our everyday users and their well-being.

Our designs are carefully considered, functional, and visually appealing. We do this to delight users and enhance the overall experience, whether generating engagement, preventing mistakes, providing feedback, or communicating our brand.

Design Principles, now what?

OK, now we have a set of design principles. But if a tree falls in a forest and no one is around to hear it, does it make a sound? It was essential to spread awareness of the driver design principles to the rest of our colleagues.

First, we used the product syncs to share the principles and give visibility of how we use them in our design. Then we had a round of feedback workshops — following the same format we had with the design team — with each cross-functional squad in the Driver tribe to help PMs, developers, data analysts, or anyone else see them in the context of their teams.

The principles are also included in our team activities, allowing designers to provide feedback based on this shared perspective during our critiques, round tables, or any ideation session. We also updated our Figma template file to include the principles on the readme page so that every time designers start a new project, they can recall it.

Figma template file

Our design team has grown a lot since we introduced the principles last year. To get everyone on board, we included the principles in the newcomers’ onboarding and did a recap session with all the designers.

Design principles card deck and posters by Vinicius Amaro

And why not make it fun with some cool stuff to keep the principles fresh in our minds, like wallpapers, cards, posters, stickers, etc.

This story was only written because of the work of many people, including, but not limited to, Charlotte McCourt, Ferran Lajara, Bruno Ferrari, Marc Bayona, Miguel Coletta, Alicia Hector, and many others.

--

--

--

The latest news and stories by the FREE NOW team

Recommended from Medium

UX in an agile world — An updated love story

Oliver Pitsch presenting his talk UX in an Agile World at World Usability Congress 2019 in Graz, Austria

From Prototype to Work of Art

UX Design Thinking applied to Concept Variants.

Teaching Patience with a Product and a Commercial

We Learn better together — EnRusk brings Design Thinking to Victorian schools

UXperts October round-up

Case study: Recreating an app’s user flow

ROLL UP YOUR SLEEVES NOW!

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
Vinicius Leitao

Vinicius Leitao

Designing @ Preply • www.viniciusleitao.com

More from Medium

Bright Horizons Design Interview Process

How we set up the FREE NOW Wave Component Library in Figma

How we set up the FREE NOW Wave Component Library in Figma

Patterns & Flows: Completing To-Dos with TeuxDeux

Design localization with Localazy Figma plugin