smart-header-design

Client
smart

Agency
Computer Rock

Creative Team
P. Watmough
B. Reiss
B. Krammer

smart is pledging itself to switch to building electric cars only until 2020. In the midst of this decision they needed a new App to control their new line of electric cars, the smart EQ. The idea was to enable the customers to have complete remote control over their smart car, using the latest APIs and hardware. 

Fun and useful

Within Computer Rock I got to be part of the creative team bringing the App to life. One of the main goals was to give the user the best possible user experience, while carefully migrating all important brand aspects into the digital space. Starting out with a Design System to have a solid foundation for all Designs we also explored Animations and Illustrations as a means to involve the customer in a fun and exciting experience.

smart-wireframes

One Design for all Devices

Given the size of the project we made sure to design in a way that is reusable on all mobile devices. By defining set paddings and margins along which they can stretch we designed every element to be fully responsive. This fluid approach not only assures that the Design Principles stay the same - independet from platform or device - but also saves a lot of time in the long run.

smart-system2

A systematic approach

At the time we started there were no App Design Guidelines so we started to go through all existing brand material, carefully picking iconic brand elements and incorporate them into the Design. The Design had to be bullet-proof on all mobile devices and be usable by a number of Designers at the same time without loosing consistency. Hence we took the time upfront the build a framework of set paddings, margins, colours, fonts and behaviours before getting into the design details. All Elements of the system have their own ID throughout concept, design and coding, making it easier to work together. All information is stored in a central place, making sure that there is no loss of information when team members leave.

From print to digital

Initially, we took stock of all existing brand icons, realizing they have a very specific character to them. As most icons were made for use in print media, we had to carefully migrate the ones we needed to use in the App. We adhered to the Google Material Guidelines to make sure the icons could be used consistently throughout all digital products while keeping the characteristic brand features.

Illustrations and Animations

To make the App more relatable we used Illustrations for explanatory content. The simple style and colour palette is easy to understand and works well even on smaller devices. Due to the flat nature, all Illustration Elements can be combined in any number of ways, making it an expanding library of reusable assets.

1
2
3
smart-screens-1
smart-screens-2

Let’s build
something together