Client
smart
Agency
Computer Rock
Client
smart
Agency
Computer Rock
Creative Team
P. Watmough
B. Reiss
B. Krammer
Remote Control
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
Fun and useful
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.
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.
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.
One Design for all Devices
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.
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.
A systematic approach
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.
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
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.
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
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.
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.
