This page is not yet fully optimized for mobiles. Will be released soon.


Skoda Auto [FJORD]

Simply Clever

Role: UI/UX (Service) Designer
Timeline: September 2014 - January 2016
Scope: Automotive, Product pages, Service Ecosystem
Team: FJORD (Berlin branch)
Client: Skoda Auto
Product page - Specific model

SKODA Auto is one of the world's oldest automotive companies, proudly celebrating over 120 years of production (2016). Re-imagination of it’s online services platform was given to the trustful hands of FJORD's Berlin branch. A global design and innovation consultancy with a focus on service design.

The entire project emerged with the necessity of bringing responsive design to live. Stakeholders quickly realized limits and show-stoppers in the case of creating tablet and mobile versions of the current architecture. The prediction of massive workload ahead sparked the idea of creating the new design from scratch. With the new design comes new logic. Both were the duties of the FJODA team (FJORD + SKODA).

Project coverage gradually expanded from product related pages to cover additional online services and tools from every phase of the customer lifecycle. Use cases include the discovery of the desired car from stock, locating a preferred dealer, specific website architectures for dealers, and portals dedicated to the maintenance of customer’s cars.

All of this required expansion of team from 3 (project status when I joined the team) to 10 people. 3-4 work-streams working in parallel separated into Prague and Berlin, coordinating efforts with each other and aligning with Accenture's cross-functional team. These streams consisted of analysts, project owners, content department, etc.

What is going on here
Market coverage map

SKODA Auto operates in 98 countries and every market requires different features of the platform to fulfill the customers’ needs. Therefore existing content management system had to be connected with a new presentation layer in a form of modular approach, where admins (importers) of each country-specific instance will drag and drop only the useful modules to cover their market needs. Imagine proprietary wordpress-like-cms on steroids :-)

Modular system

This framework was born to accommodate the continuous development of responsive sites for SKODA Auto. It’s comprised of atomic building blocks and necessary toolkit to design any digital responsive User Interface within SKODA ecosystem (excluding web applications - "tools”).

Modules and Prototypes in play (tablet version of Homepage instance on the left)

Design system (design part of the framework) consisted from styleguide, global functions, grid + 2 specific components:

1. Modules - A unified block of content that consists of Front-end and Back-end layers. Every piece of content has to live inside a module. Each module was designed to be used for 3 breakpoints (desktop, mobile, tablet).

2. Prototypes - A prototype is a set of rules that are used to assemble a page. Every page laying in this ecosystem is an instance of some prototype.

The growth of this system’s complexity was influenced by a range of problems we were addressing with modules. The essence of a modular approach to design helped us to fight back this artificial expansion with the Reusability principle: With every new problem, we asked if the problem in front of us is so specific that it cannot be solved by using an existing module. This helped us to keep the ecosystem as simple as possible, given the constraints, and prevented us from creating duplicated solutions and being "innovative" when it was not essential.

Password: designsystem
Instance of the Prototype: Importer Model Family

Large-scale project and unavailability of the workforce at the moment revealed many opportunities to switch between multiple design roles (UX / Visual / Interaction Design) and participate in various project stages. With a focus on web solutions (native platform was managed by other external workforce).

Projects of this scale require special extensive effort in the documentation for internal purposes (shared vocabulary, being on the same page, communicating the status of the project and it's parts etc.). Our team created a dedicated knowledge base describing our robust design system (around 200 Modules and 100 Prototypes across the platform). I’ve been involved in its maintenance and growth continuously from it's beginnings. I participated not only content-wise supporting my colleagues to describe the logic behind the system, but also from the technology standpoint, where I utilized my past programming experience and built an internal knowledge base (running on Jekyll - static site generator written in Ruby).

Regarding the design tools used in the process, Adobe Illustrator served us well for the 80% of the jobs. For prototyping, we relied mainly on Axure or Invision, depending on how complicated the concept (of user-interface interaction) was we aimed to test.

During the 1,5y I had a chance to join 2 user testings as an observer and in place support for teammates in process of hiring new talents.

Along this journey, guided by professionals from FJORD Berlin, I internalized diverse "design soft skills": how to cooperate with designers, separating emotionally from my design outcomes, to give and get constructive feedback and how environment, internal processes, and team setting influence quality of the end-result. (E.g. outposted alone in a cross-functional team full of analysts thinking  in a linear way and full mail inbox brings the challenge of protecting creative ideas.)