KM20 e-com website redesign
KM20 is the leading concept store, offering fashionable clothing from the most current designers and promising brands.
My role
UX/UI Designer
Team
Producers, Manageres, Designers
Timeline
2024 (4 months)
Overview
KM20 is the leading concept store in Moscow, playing a significant role in the global fashion industry.
We redesigned and reimagined the KM20 website, enhancing user experience, creating a new visual style, and ensuring it reflects the brand’s unique legacy.
Screenshots of the old website design
Goal
My goal in this project was to execute the redesign process from concept to the final design handoff to the client.
The Challenge
The main challenge was crafting a fresh, minimalist but still unconventional visual identity for the KM20 website while preserving its original brand essence, rethinking the user experience, and integrating modern e-commerce design patterns, all within a tight three and a half month timeline.
My responsibilities
In this project, I worked as a Middle UX/UI Designer and was responsible for the following tasks.
Concept development, competitor analysis, reference gathering, site map design, documentation, user flow creation, wireframing, prototyping, testing, final layout design, UI-kit development, preparing frames for handoff to development, brand book development, and client communication.
UX Design
At the UX design stage, I performed the following tasks:
Analyze the old interface
Identify unique and template pages
Gather references for the mood board
Perform a competitor analysis
Define the website's functionality
Create a sitemap
Develop wireframes
I analyzed over 20 e-commerce online stores to identify common interface blocks, functionality, user flows, and to gather references. After that, my art director and I created a sitemap, identified interface artifacts, and began searching for the interface layout.
Sitemap for the KM20 Online Store
Our layout was inspired by a dynamic menu concept from Embacy’s Head of Design, which stakeholders approved. This menu adapts based on user behavior, adding relevant links.
After exploring multiple options, we selected a design that balanced functionality with a unique composition. The chosen layout, divided into four zones, aimed to enhance usability and increase entry points for users.
Layout Scheme for the KM20 Online Store
UI Design
In UI design, the goal was to create a minimalist interface while maintaining continuity with the previous brand identity. I analyzed the results of the UX stage and established guidelines for designing the website’s interface. It was decided to use a minimal number of typography styles, spacing, and colors.
Home page
Dynamic menu
I created hundreds of interface solutions, and midway through the project, I presented a version that the clients loved. It was a success and a turning point in the process, as the next step was to scale the design across the remaining pages.
Key interface pages
Design adaptation was my direct responsibility, and considering the stakeholders' requirements, I was able to implement all the intended functionality for mobile devices. During the process, I created prototypes that easily demonstrated various user flows before the actual development.
Mobile screens
Results
The main result of this project was its implementation. The KM20 team successfully brought our design to life online, and the Embacy team is proud of it.
Created a site map and an interface functionality table, ultimately optimizing the project workflow.
UX Design
Designed a unique layout system and scaled it across all website pages.
UX Design
Analyzed over 40 online stores and compiled a reference database.
UX Design
Simplified interface navigation and increased entry points from the homepage to products by 3x.
UX Design
Optimized the user authentication process by 30%
UX Design
Designed a minimalist style system and created a detailed UI kit, enabling developers to speed up the development process.
UI Design
Designed over 100 highly detailed screens in Figma for various device types.
UI Design
Prototyped user flows, which ultimately helped quickly explain design solutions to the client.
UI Design
Collaborated with Embacy to deliver the project on time, developed a new visual language for KM20, and achieved 100% client satisfaction.
Result
KM20 e-com website redesign
KM20 is the leading concept store, offering fashionable clothing from the most current designers and promising brands.
My role
UX/UI Designer
Team
Producers, Manageres, Designers
Timeline
2024 (4 months)
km20.ru
Screenshots of the old website design
Screenshots of the old website design
Overview
KM20 is the leading concept store in Moscow, playing a significant role in the global fashion industry.
We redesigned and reimagined the KM20 website, enhancing user experience, creating a new visual style, and ensuring it reflects the brand’s unique legacy.
Goal
My goal in this project was to execute the redesign process from concept to the final design handoff to the client.
UX Design
At the UX design stage, I performed the following tasks:
I analyzed over 20 e-commerce online stores to identify common interface blocks, functionality, user flows, and to gather references. After that, my art director and I created a sitemap, identified interface artifacts, and began searching for the interface layout.
Analyze the old interface
Identify unique and template pages
Gather references
Perform a competitor analysis
Define the website's functionality
Create a sitemap
Develop wireframes
Sitemap for the KM20 Online Store
UI Design
In UI design, the goal was to create a minimalist interface while maintaining continuity with the previous brand identity. I analyzed the results of the UX stage and established guidelines for designing the website’s interface. It was decided to use a minimal number of typography styles, spacing, and colors.
Home page
Dynamic menu
I created hundreds of interface solutions, and midway through the project, I presented a version that the clients loved. It was a success and a turning point in the process, as the next step was to scale the design across the remaining pages.
Item page
Catalog page
Home page
Design adaptation was my direct responsibility, and considering the stakeholders' requirements, I was able to implement all the intended functionality for mobile devices. During the process, I created prototypes that easily demonstrated various user flows before the actual development.
Mobile home page
Mobile home page
Mobile catalog page
Mobile order placing page
Mobile about page
My responsibilities
In this project, I worked as a Middle UX/UI Designer and was responsible for the following tasks.
Concept development, competitor analysis, reference gathering, site map design, documentation, user flow creation, wireframing, prototyping, testing, final layout design, UI-kit development, preparing frames for handoff to development, brand book development, and client communication.
Results
The main result of this project was its implementation. The KM20 team successfully brought our design to life online, and the Embacy team is proud of it.
Created a site map and an interface functionality table, ultimately optimizing the project workflow.
UX Design
Designed a unique layout system and scaled it across all website pages.
UX Design
Analyzed over 40 online stores and compiled a reference database.
UX Design
Simplified interface navigation and increased entry points from the homepage to products by 3x.
UX Design
Optimized the user authentication process by 30%
UX Design
Designed a minimalist style system and created a detailed UI kit, enabling developers to speed up the development process.
UI Design
Designed over 100 highly detailed screens in Figma for various device types.
UI Design
Prototyped user flows, which ultimately helped quickly explain design solutions to the client.
UI Design
Collaborated with Embacy to deliver the project on time, developed a new visual language for KM20, and achieved 100% client satisfaction.
Result
Our layout was inspired by a dynamic menu concept from Embacy’s Head of Design, which stakeholders approved. This menu adapts based on user behavior, adding relevant links.
After exploring multiple options, we selected a design that balanced functionality with a unique composition. The chosen layout, divided into four zones, aimed to enhance usability and increase entry points for users.