vertical-shot-road-with-magnificent-mountains-blue-sky-captured-california.jpg

Otokoç

Project Overview

Otokoç requested a web platform to showcase its vehicles and enable online vehicle sales in future phases. The project focused on designing a platform where users could explore detailed information about the vehicles, including specifications, pricing, and features. The site was optimized for both desktop and mobile devices to ensure a seamless and user-friendly experience. Since the integration of an online sales module is planned for later stages, the platform was designed to be scalable and flexible. This website aims to reflect Otokoç’s brand values, enhance user engagement, and stand out in the market.

Project type: UX/UI, Responsive

Case study timing: 10 Week

Role: UX/UI Designer

Sayfa sayısı: 60+

Tools: FIGMA, Photoshop, Zeplin

Design Brief

The design emphasized prominently showcasing promotional campaigns to attract customers to offline stores while highlighting the brand's scale and reliability to build customer trust. Special attention was given to categorizing vehicle models effectively, ensuring users could easily navigate and find the options that suit their needs. Additionally, the "Branches" section was carefully designed to help users quickly locate nearby locations, facilitating their journey toward purchasing a vehicle. This approach aimed to create a seamless and engaging experience, both online and offline, while reinforcing the brand's authority and trustworthiness.

Project Goal

The primary goal of the project was to create a scalable and user-friendly digital platform that effectively showcases Otokoç’s extensive range of vehicles while supporting the brand’s offline store traffic. The platform aimed to enhance customer trust by emphasizing the brand's scale and reliability, streamline the browsing experience through well-structured vehicle categorization, and simplify the process of locating branches to facilitate offline purchases. Additionally, the project was designed with future scalability in mind, preparing the platform for seamless integration of online vehicle sales in later phases.

Project Plan

The project started with analysis meetings held with the client to define the scope, identify key functionalities, and determine the required pages. These discussions ensured a clear understanding of the project’s goals and the client’s expectations.

Afterward, a comprehensive benchmark study was conducted, examining both domestic and international websites to gather insights into industry standards, user expectations, and innovative features. This research provided a strong foundation for the design direction.

Using these insights, a moodboard was developed to establish the visual style and design concept, ensuring alignment with the brand identity and creating a cohesive creative direction.

The design phase was organized into sprints, with each sprint focusing on specific sections of the platform. Draft designs were shared with the client at the end of each sprint for feedback and approval. This iterative approach allowed for continuous refinement, ensuring the final product met the client’s needs while delivering an optimal user experience.

Information Architecture

A clear and intuitive site map was designed to ensure seamless navigation and easy access to key information. Main sections, such as Corporate, Services, Contact, Legal Texts, Brands, Campaigns, Membership/Profile, and FAQ, were organized with relevant subsections to enhance the user journey. Special focus was given to categorizing services like Sales, After-Sales, and Insurance, as well as grouping vehicle models under the Brands section. This structure ensured user-friendly navigation while supporting scalability for future updates.

Navigation

The logo was positioned in the top left corner of the page to align with common user habits and ensure easy recognition.
Menu items were arranged in the header based on the information architecture, providing a clear and intuitive navigation experience.
The "Brands" section was emphasized by placing it as a secondary navigation below the main header, with a collapsible feature added to save space and improve accessibility.
Vehicle brand logos were incorporated to enhance visual recognition and engage users effectively.
The "Search" and "My Account" icons were highlighted in orange, a corporate brand color, to distinguish them from other menu items and draw attention.

Hamburger Menu

An accordion structure was used for two-level headings in the hamburger menu, allowing users to access sub-levels directly on the same page.
For three-level headings, the final level opens on a separate page to reduce visual clutter and maintain a clean interface.
Similar to the desktop version, the "Brands" section features logos prominently at the top of the page to capture the user's attention effectively.

Slider Design

The visual and information sections were separated within the slider to create a dynamic and organized structure. The text area was visually distinguished from the image area by using a background layer, ensuring text readability across all images.
Slider arrows and navigation dots were positioned side by side, enabling users to access all actions and information from the same location, enhancing usability and interaction.

Campaign Listing

It was communicated to us that campaigns are created specifically for each brand. Based on this information, the card design includes vehicle brand logos placed between the text and visual sections for better clarity.
To help users filter by campaign type and quickly find the campaign they are looking for, a tab bar was introduced to display category options. Additionally, a dropdown filter for selecting vehicle brands was placed at the top of the page for further refinement.
A consistent banner design was used across all listing and detail pages, maintaining a unified visual language. Each page also included a title and description area for added context.

Branch Information Access

The page provides two options for users to access branch information. In the first view, users can interact with pins on the map, which display vehicle brand logos and allow them to access address and phone details for the selected branch.
For users unable to find the desired branch information via the map, a "scroll" icon at the bottom of the page guides them to a second information section. This section displays branches in a list format, organized as individual cards.
The card design was simplified to ensure easy access to key information, and branch operating hours are displayed via a lightbox to maintain clarity and reduce on-page clutter.

Brand Page Design

Large vehicle images were prominently featured on the first screen to provide users with an impactful visual experience and a quick overview of the brand.
Users scrolling down the page could access detailed information by clicking the button on model cards specific to the brand.
A clean and minimal card design was implemented, focusing on simplicity while ensuring that all detailed information was available on the dedicated detail pages