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.
BRAND
Škoda Turkey
CLIENT
Yüce Auto A.Ş.
LOCATION
Istanbul, Turkey
INDUSTRY
Automotive
RELEASE
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
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 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
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.
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
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 experience
across
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