Altın Örümcek Award Automotive Category Winner

Škoda Turkey Website Development

We redesigned and developed skoda.com.tr to align with the renewed design language of Škoda Global.
VISIT WEBSITE
Škoda Turkey Website Development
BRAND
Škoda Turkey
CLIENT
Yüce Auto A.Ş.
LOCATION
Istanbul, Turkey
INDUSTRY
Automotive
RELEASED
2022
OVERVIEW

About the Project

skoda.com.tr 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.
01
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.
02
Localization.
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.
03
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.
HOW WE DID?

Expertise

UX Research
UX Design
UI Design
Design System

Web Frontend Development
API Integration
Quality Assurance
Team

3 * UX / UI Designer

4 * Front-End Developer

2 * Project Manager

2 * QA Engineer

Tech

Sketch App

React / Typescript

NextJS

Styled Components

Storybook

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

skoda_software_development_project_timeline
COGNITIVE

Benchmark

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.
ux_ui_desing_benchmark
DESIGN

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?
skoda.com.tr 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.
Consistency
Starting by creating a design system for the project allowed us to maintain consistency throughout the design processes and during the development phase.
Efficiency
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.
Collaboration
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_fontux_ui_desing_color_code
ux_ui_desing_system_component

Some components from the design system

DESIGN

Solutions & Key Features

Comparison
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.

skoda_software_development_comparison
skoda_software_development_comparison_design
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.

skoda_software_development_inventory_inquiry
Price List
Our client expected the price list section to offer users a rich experience beyond a classNameic 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.

skoda_software_development_price_list
skoda_software_development_price_list_design
Navigation Solutions
At skoda.com.tr, 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.

skoda_software_development_mega_menu_example

Mega menu example

skoda_software_development_quick_access_links

Quick Access Links

skoda_software_development_sticky_in_page_navigation

Sticky In-Page Navigation

skoda_software_development_in_page_cross_links.png

In-page Cross-links

DEVELOPMENT

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 anatomic 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.
ux_ui_desing_storybook

Usage of Storybook

DEVELOPMENT

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 experienceacross every platform.
skoda_software_development_design_1
skoda_software_development_design_2
skoda_software_development_design_3
skoda_software_development_design_4
skoda_software_development_design_5
skoda_software_development_design_6
skoda_software_development_design_7
skoda_software_development_design_3
skoda_software_development_design_4
skoda_software_development_design_2
skoda_software_development_design_1
skoda_software_development_design_5
skoda_software_development_design_6
skoda_software_development_design_7
ÖA
Öykü Akkılıç
Digital Marketing Assistant Manager, Škoda
“They have always been creative and solution-oriented.”
RESULTS
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..”
skoda_software_development_burak_altun
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."
skoda_software_development_yagnur_tetikcan
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."
skoda_software_development_ugur_sozen
Uğur Sözen
Software Development Lead at Brew
Download a presentation of our recent worksSay Hello

CONTACT US