KoçSistem
KoçSistem is a digital platform that brings a broad technology offering together in one place, so visitors can explore and understand what the company does.
BRAND
KoçSistem
CLIENT
KoçSistem
LOCATION
Istanbul, Turkey
INDUSTRY
Technology
RELEASED
2024
OVERVIEW
About the Project
KoçSistem is a technology company that develops products, services, and integrated solutions. The platform presents that breadth clearly, so visitors can find what is relevant to them without navigating unnecessary complexity.
01
Complex and Confusing Information Architecture
Over time, as new content was added to the website, the information architecture became more complicated than necessary. This complexity often led visitors to leave the site without finding what they sought.
02
Creating a Concept in Line with Brand Identity
Content designed that with different approaches has caused the visual language to drift away from the corporate identity. The new website needed to reflect the traces of the KoçSistem brand. We were expected to redesign the interface to align with the brand language.
03
Highlighting Important Content
Our client wanted us to ensure easier access to the products and services that needed to be highlighted in the website design, which were not easily discoverable on the existing site.
04
Slow Loading Speed
The slow loading speed of the website negatively impacted the user experience.
HOW WE DID?
Expertise
Team
1 * UX Designer
2 * UI Designer
4 * Front-End Developer
2 * Backend-End Developer
2 * Project Manager
2 * QA Engineer
Tech
React
Next.js
Typescript
Storybook
GraphQL
Figma
Directus
Project Timeline
~5 Months
DISCOVER
Heuristic Analysis
We began our discovery process by performing a heuristic analysis of the existing website to identify pain points. We categorized these pain points into three levels of importance: critical, major, and minor. This analysis helped us pinpoint the main areas to focus on for improvement.
Reviewed structures:
Reviewed structures:
BENCHMARK
Benchmark Analysis
We analyzed the website designs of companies operating in similar sectors or offering a high volume of services and products. This analysis covered menu structures, category trees, communication languages, and homepage contents.
The findings were grouped comparatively by page.
IDEATE
Card Sorting
We identified the main pain points of the category structure.
Using Optimal Workshop, we conducted card sorting at the level of main categories and subgroups. We examined the relationships between the categories formed by participant groupings (similarity matrix).
Using Optimal Workshop, we conducted card sorting at the level of main categories and subgroups. We examined the relationships between the categories formed by participant groupings (similarity matrix).
Information Architecture
With the pain points we identified and the results of the card sorting study, we developed an information architecture tailored to the website's goals. Our primary goal was to enhance the discoverability of areas that were previously overlooked.
“In our UX research for KoçSistem, the main focus was on ‘information architecture.’ By conducting a card sorting study, we provided a general perspective on user expectations and usage habits. We combined the outputs of UX research with our client's industry experience to create a simple and understandable structure.”
Semih Elarslan
UX Lead at BREW
“We noticed that users were getting lost on the site due to the complex menu structure. By conducting a card sorting test with our client, we rebuilt the information architecture, resulting in a smoother and more intuitive site navigation.”
Selin Çelik Sevim
UX Designer at BREW
DESIGN
Solutions & Key Features
We designed a mobile-first, user experience-focused, dynamic, and aesthetic interface that aligns with the brand identity, using a unique visual language that integrates stock images with the institution's context.
For Services, Products, Sectors, and Blog sections, we moved away from image usage and created dynamic card structures on the homepage with vector drawings.
We simplified the Products, Services, and Industries and organized them into a mega menu. The structure we developed allows for highlighting any product or service within the mega menu.
When designing our modules, we ensured they were reusable and flexible. This increased efficiency during development and content management.
Incorporated video views on the page
Views where content and vector drawing will be used
We connected content through cross-links
Another example of a component designed to be flexible, responsive, and reusable.
DESIGN
Design System
We created a style and component library that encompasses the fundamental elements of the project. This makes the design process more systematic, enabling reusability and fast development, which enhances production efficiency.
Core Style Elements
Some key components from the design system file
PROTOTYPING
Interactive Prototypes for a Realistic Product Experience
We presented the designs by prototyping them using the Figma tool. This allowed us to demonstrate user flows, interaction designs, and animations to our clients in the most realistic way possible. This approach enabled our clients to visualize the final product accurately. Our prototypes helped prevent misunderstandings among team members during the development phase and eliminated uncertainties.
Realistic Experience with Prototypes
DEVELOPMENT
Our development approach and the reasons for our technology choices
Modular and Manageable Structure
During the project development, we opted for React and Next 13 to create a modern and effective structure. By leveraging Next 13's app routing feature, we made our project modular and manageable.To build a dynamic structure, we created a pool of components using React for the user interface and the CMS. When content managers wanted to create a page through the CMS, they could select desired components from this pool, input their data, and arrange the elements in the interface as they wished.
This approach allowed for the rapid and dynamic creation of new pages with just data entry, eliminating the need for new development.
"With our dynamic content management system, we enabled the quick, dynamic, and design-compliant creation of hundreds of pages."
Demir Danış
Software Development Lead at BREW
For each component created in the React interface, we made corresponding entries in the CMS. This dynamic structure allowed the components selected and populated with data in the CMS to be matched with the React components on the interface, enabling the creation of hundreds of unique pages with just data entry from the CMS. Additionally, we incorporated a theme feature, allowing different website designs to be created for KoçSistem's various websites using the same infrastructure.
We ensured that pages maintained their responsive properties across different devices by managing the size and distribution of components for six predefined dimensions:
This approach allowed us to maintain consistency and usability across various screen sizes.
Importance of Synchronization
We used "Directus CMS" as our database and facilitated data transfers via GraphQL. During implementation, we utilized the "@graphql-codegen/cli" package to generate TypeScript models from the database data automatically. This ensured that the models in the database remained synchronized with the client-side models, preventing runtime errors caused by synchronization loss.Search Engine Optimization
We adopted an SEO-focused approach. By using RemixJS's SSR feature, we rendered pages with their data server-side, making them indexable by search engines.Design System Compatibility and Storybook Usage
In designing, we employed CSS variables to implement the design system directly and integrated it using Module CSS. This resulted in a flexible, easily manageable, and theme-compatible development process. By using Storybook, we documented the components we created and provided a reference for the development and testing teams during the development phase.We ensured that pages maintained their responsive properties across different devices by managing the size and distribution of components for six predefined dimensions:
Cross-Device Compatibility
Mobile Min-Max(360px - 480px),
Tablet Min-Max(768px - 1024px),
Desktop Min-Max(1024px - 1440px),
Desktop_Large(>1728)
This approach allowed us to maintain consistency and usability across various screen sizes.
Volkan Aytan
Sr Digital Marketing & Marketing Comms Manager, KoçSistem
"They delivered the project and met our needs on time."
The product experience improved for visitors: pages are easier to navigate and understand, and the design direction has been well received. Collaboration with the internal team was straightforward throughout.
RESULTS
The Power of User-Centric Design
By leveraging innovative design principles and the latest technologies, we reshaped the KoçSistem website, transforming and enhancing the user experience. This transformation was achieved through a simplified interface that made navigation easier for users. As a result, there was a significant improvement in the website's user experience.
"Experiencing and comparing the renewed KoçSistem website with its previous versions was incredibly satisfying and impressive, allowing us to observe and experience the transformation in user experience firsthand."
İrem Alara Kutluay
Project Manager at BREW
"By supporting the use of stock images with illustrations and simplifying the design, we created a unique interface that allowed users to navigate the site more easily."
Gülay Tekneci
Sr. UI Designer at BREW
CONTACT
CONTACT