Altın Örümcek Award Automotive Category Winner

Škoda Turkey Website Development

We redesigned and developed to align with the renewed design language of Škoda Global.
Škoda Turkey
Yüce Auto A.Ş.
Istanbul, Turkey

About the Project was diverging from Škoda's global design language and had lost its freshness. Various solution partners had made different developments over time to meet evolving needs. However, this led to a loss of visual consistency and a decline in code quality. As a result, the site was unable to provide users with an enjoyable and seamless experience.

Our client requested a redesign and development of their website to align with the global brand identity. While developing the new website, we needed to consider the website’s compatibility with mobile devices. Simultaneously, we had to take into account the habits of Škoda Turkey visitors.
Designing an interface in line with the global brand identity.
We were expected to design an interface that embodies the core characteristics of the renewed Škoda brand language, remains faithful to the corporate identity, and clearly belongs within the Škoda ecosystem.
We were expected to develop specific solutions in the digital world with our UX/UI design and coding power that would meet the needs of potential Škoda owners and address the expectations of the target market. Our client specifically highlighted this requirement among their preferences.
Increasing visitors' dwell time on website.
We strategically designed model introduction pages on the website with a rich multimedia experience to aim at retaining visitors for a longer duration on the page. Additionally, we created promotional sections within the price list pages to incentivize user engagement.


UX Research
UX Design
UI Design
Design System

Web Frontend Development
API Integration
Quality Assurance

3 * UX / UI Designer

4 * Front-End Developer

2 * Project Manager

2 * QA Engineer


Sketch App

React / Typescript


Styled Components


Project Timeline

In this approximately 8-month project carried out by Brew, we provided design and frontend development services. Adhering to the timeline and progressing with bi-weekly sprints, we successfully completed the project.

~8 Months



We initiated the project by examining the approaches of Škoda Global and Škoda distributors operating in other countries worldwide. While we had a comprehensive style guide document, the adaptation of components and content presentation varied from country to country. We navigated through corporate websites prepared based on the guidance of primary distributors in different countries, analyzing solutions in each country to assess their strengths and weaknesses.

Preparing a Design System

What is?
The design system is a method used in web and mobile application development. It encompasses a set of rules, components, style elements, and guidelines designed to ensure consistency in the design and user experience of a project.

Why was a design system necessary for this project? was a massive site containing hundreds of components and dozens of pages. Keeping it up to date required constant development in both content and software. To maintain control over the design and development processes, facilitate teamwork among our teams, and preserve brand consistency, we started by creating a design system. We translated the global style guide into our environment and designed the components we might need, from fundamental elements to custom solutions, starting from an atomic level.
Starting by creating a design system for the project allowed us to maintain consistency throughout the design processes and during the development phase.
Reusable components and style guidelines accelerated the development process. The team no longer had to solve the same design issues each time, resulting in time savings.
The design system fostered better collaboration between the design and development teams. Using a common visual language and component standards made communication easier.
ux_ui_desing_next_font ux_ui_desing_color_code

Some components from the design system


Solutions & Key Features

We developed a module where users can search among Škoda models using fundamental features such as body type, fuel type, engine capacity, allowing them to compare two desired models based on technical specifications and equipment features. While conceptualizing this module, the most crucial constraint we faced was the necessity to adhere to the database structure utilized within the institution's own processes.

Inventory Inquiry
We designed an inventory tracking module where users can inquire about Škoda vehicles of their interest, specifying the model and equipment, to find out their availability in terms of location (city) and dealerships, along with available color options.

Price List
Our client expected the price list section to offer users a rich experience beyond a classic table format, allowing them to view the prices of the vehicles they are interested in along with detailed information about the equipment packages, while also providing insights into the basic features of that particular model.

Navigation Solutions
At, which contains dozens of pages, we used cross-links for visitors to quickly find what they were looking for. Mega menus dynamically structured according to the primary breakdown, a swift navigation bar providing smart prompts based on the page being visited, sticky tab menus allowing rapid movement between content within pages, and cross-links at the bottom of pages facilitated seamless navigation throughout the site.


Mega menu example


Quick Access Links


Sticky In-Page Navigation


In-page Cross-links


Atomic Development Approach

We developed components adhering to atomic design principles. These components had a modular structure that could be extensively viewed within the Storybook environment. This approach reduced interface design to an atomic level, allowing the gradual production and linking of reusable components.

Storybook encompasses components created through an atomic approach. The library provides a suitable environment to visualize and test components in isolation. Consequently, even before pages were connected to backend services, we were able to deliver them to stakeholders involved in backend development.

The comprehensive component library underwent detailed analysis and testing by other stakeholders, such as software teams involved in the project. Subsequently, necessary service connections were established, and the pages were integrated.

This approach provided an integrated and seamless infrastructure for the successful completion and delivery of the project.

Usage of Storybook


Simultaneous Responsive Software

To enhance the usability and accessibility of the website, all components at an atomic level were simultaneously coded to be mobile-responsive. They were optimized to function seamlessly across different devices and various resolutions. This approach ensured a consistent and smooth user experience across every platform.
Öykü Akkılıç
Digital Marketing Assistant Manager, Škoda
“They have always been creative and solution-oriented.”
The contributions of our design team were pivotal in the successful completion of the project. Their efforts to develop visually appealing, modern, and attention-grabbing pages maximized customer acquisition. Enhancing our clients' web presence furthered the project's core aim of customer satisfaction.
“Providing genuine value to users stood out as my most crucial accomplishment. Learning at each stage of the project was a truly enriching experience..”
Burak Altun
UI Designer at Brew
"Maintaining a grasp on every detail throughout the project's development process allowed for a consistent and structured code base. This facilitated the implementation of design changes with less effort towards the project's end. Additionally, working with a detail-oriented, proficient team who embraced the project was among the greatest gains."
Yağnur Tetikcan
Software Development at Brew
"At the project's conclusion, delivering all components and pages ready for implementation by another development team required significant knowledge, experience, responsibility, and a paradigm shift. This stands as the most significant technical achievement for our team."
Uğur Sözen
Software Development Lead at Brew
Download a presentation of our recent works