Feb 1, 2022
Design Principles
How FREE NOW Uses 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 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.
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 for 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.
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.
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.
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.
