Altın Örümcek Award Automotive Category Winner
Škoda Turkey Website Development
Škoda Turkey's website brings model information, price lists, and dealer locations together in one clear place for car buyers.
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.
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
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
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.
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.
Some components from the design system
DESIGN
Solutions & Key Features
Comparison
The model comparison experience lets customers search among Škoda models by body type, fuel type, and engine capacity, and compare two vehicles on technical specifications and equipment. The design had to respect the constraints of the the institution’s own database structure while staying clear for buyers.
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 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.
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.
Mega menu example
Quick Access Links
Sticky In-Page Navigation
In-page Cross-links
DEVELOPMENT
Atomic Development Approach
The interface is organised around reusable components and a shared visual language. This makes the product easier to understand and gives future pages a consistent foundation.
Components can be reviewed in isolation before they are assembled into full page experiences, keeping interaction, content, and visual decisions aligned.
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.
Components can be reviewed in isolation before they are assembled into full page experiences, keeping interaction, content, and visual decisions aligned.
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
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.
Ö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..”
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
CONTACT
CONTACT