Academic Project
Academic Project
MERGE
MERGE
MERGE
Company
Company
Merge
Merge
Merge
Function
Function
UX/UI
Designer
UX/UI
Designer
UX/UI
Designer
Tools
Tools
Figma
Chat GPT
Adobe Creative
Figma
Chat GPT
Adobe Creative
Figma
Chat GPT
Adobe Creative
Description
Description
MERGE is a marketplace specialized in designer fashion, tailored for a target audience with high visual culture seeking alternatives to the mass market. The platform centralizes emerging labels and niche brands that, due to their scale, are often inaccessible to the general public, connecting independent designers with users who value exclusivity and authenticity over multinational corporations.
MERGE is a marketplace specialized in designer fashion, tailored for a target audience with high visual culture seeking alternatives to the mass market. The platform centralizes emerging labels and niche brands that, due to their scale, are often inaccessible to the general public, connecting independent designers with users who value exclusivity and authenticity over multinational corporations.
Problem: The fragmentation of visual references and fashion news forced users to jump between multiple platforms, facing interfaces that were aesthetically rich but functionally confusing and difficult to scan.
Solution: I centralized the experience by unifying "Outfits" and "News" sections under an information architecture that prioritizes readability and quick scanning of specifications and included services. I implemented a persistent (fixed) cart button and ergonomic navigation that ensures a seamless conversion without sacrificing the brand's editorial aesthetic.
Problem: The fragmentation of visual references and fashion news forced users to jump between multiple platforms, facing interfaces that were aesthetically rich but functionally confusing and difficult to scan.
Solution: I centralized the experience by unifying the "Outfits" and "News" sections under an information architecture that prioritizes readability and quick scanning of specifications and included services. I implemented a persistent (Fixed) cart button and ergonomic navigation that ensures a seamless conversion without sacrificing the brand's editorial aesthetic.
Problem: The fragmentation of visual references and fashion news forced users to jump between multiple platforms, facing interfaces that were aesthetically rich but functionally confusing and difficult to scan.
Solution: I centralized the experience by unifying the "Outfits" and "News" sections under an information architecture that prioritizes readability and quick scanning of specifications and included services. I implemented a persistent (Fixed) cart button and ergonomic navigation that ensures a seamless conversion without sacrificing the brand's editorial aesthetic.
Interviews
Interviews
To validate the proposal, I conducted a research phase based on interviews with users who fit our "fashion enthusiast" profile. The goal was to understand how they discovered new brands and what barriers they encountered when purchasing from small or unknown websites.
To validate the proposal, I conducted a research phase based on interviews with users who fit our "fashion enthusiast" profile. The goal was to understand how they discovered new brands and what barriers they encountered when purchasing from small or unknown websites.
The identified problems were key to the product's development: users admitted that the lack of real-life visual references (seeing clothes on other people) and the dispersion of fashion news forced them to use multiple apps. These insights justified the creation of the "Outfits" and "News" sections within MERGE, resolving the fragmentation of the experience into a single platform.
The identified problems were key to the product's development: users admitted that the lack of real-life visual references (seeing clothes on other people) and the dispersion of fashion news forced them to use multiple apps. These insights justified the creation of the "Outfits" and "News" sections within MERGE, resolving the fragmentation of the experience into a single platform.
Features
Features
The application's architecture is built on a modular system that integrates e-commerce with social interaction. The following key features have been prioritized to optimize the User Journey:
Intelligent Search: Implementation of advanced filters by brand, aesthetic, and values to facilitate the discovery of niche labels.
Clothing/Sneakers Catalog: Product organization through dynamic sections and technical filtering for efficient navigation.
The application's architecture is built on a modular system that integrates e-commerce with social interaction. The following key features have been prioritized to optimize the User Journey:
Intelligent Search: Implementation of advanced filters by brand, aesthetic, and values to facilitate the discovery of niche labels.
Clothing/Sneakers Catalog: Product organization through dynamic sections and technical filtering for efficient navigation.
Inspiration Wall: Integration of an editorial news feed and user-generated content (UGC) to drive daily engagement.
Profile Management: A user control center that includes favorites, purchase history, personal posts, and advertiser settings.
Store Directory: Geolocation mapping tool featuring advanced filtering systems and personalized recommendations.
Inspiration Wall: Integration of an editorial news feed and user-generated content (UGC) to drive daily engagement.
Profile Management: A user control center that includes favorites, purchase history, personal posts, and advertiser settings.
Store Directory: Geolocation mapping tool featuring advanced filtering systems and personalized recommendations.
Low-fidelity wireframe
Low-fidelity wireframe
Initial prototyping focused on Information Architecture (IA) to validate system flow before the visual phase:
Core Structure (Bone Structure): Definition of content hierarchy and placement of control elements through a modular design approach.
User Flow: Optimization of the user journey, from personalized onboarding to the final checkout process.
Tactical Usability: Definition of button hierarchy and interaction points to minimize the user's cognitive load.
Initial prototyping focused on Information Architecture (IA) to validate system flow before the visual phase:
Core Structure (Bone Structure): Definition of content hierarchy and placement of control elements through a modular design approach.
User Flow: Optimization of the user journey, from personalized onboarding to the final checkout process.
Tactical Usability: Definition of button hierarchy and interaction points to minimize the user's cognitive load.
Navigation Validation: Testing the placement of filtering elements and access points (Store, Wall, Profile) to ensure rapid navigation.
Functional Iteration: Elimination of visual noise to center user attention on critical decision points within the interface.
Navigation Validation: Testing the placement of filtering elements and access points (Store, Wall, Profile) to ensure rapid navigation.
Functional Iteration: Elimination of visual noise to center user attention on critical decision points within the interface.
Design System
Design System
To ensure the scalability and consistency of MERGE, I developed a Design System that defines the product's visual DNA. The goal was to create a sophisticated interface that does not visually compete with the fashion content, following an Atomic Design methodology.
To ensure the scalability and consistency of MERGE, I developed a Design System that defines the product's visual DNA. The goal was to create a sophisticated interface that does not visually compete with the fashion content, following an Atomic Design methodology.
Color Palette: Selection of organic and neutral earth tones (#22333B, #5E503F, #F2F4F3). This palette aims to convey exclusivity and warmth, allowing product photography to remain the center of attention.
Typography: Implementation of the Kanit family across various scales (from Semibold 60pt for headings to Light 15pt for body text). A clear typographic hierarchy was prioritized to facilitate readability and rapid scanning of information on mobile devices.
Iconography: Creation of a custom icon set. These elements act as clear signifiers, enhancing intuitive navigation and reinforcing the modern, technological identity of the platform.
Color Palette: Selection of organic and neutral earth tones (#22333B, #5E503F, #F2F4F3). This palette aims to convey exclusivity and warmth, allowing product photography to remain the center of attention.
Typography: Implementation of the Kanit family across various scales (from Semibold 60pt for headings to Light 15pt for body text). A clear typographic hierarchy was prioritized to facilitate readability and rapid scanning of information on mobile devices.
Iconography: Creation of a custom icon set. These elements act as clear signifiers, enhancing intuitive navigation and reinforcing the modern, technological identity of the platform.
Landing Page
Landing Page
The landing page design was conceived as a fundamental strategic piece for the launch of MERGE, functioning not only as a presentation but as a tool for market validation and lead generation. The visual structure follows a narrative that guides the user through the exclusivity of the brands and the editorial value proposition, utilizing negative space and large-format typography to reduce visual noise and focus attention on the core benefit. By aligning this site with the app’s design system, a consistent brand transition is achieved, reinforcing user trust before starting the download process.
The landing page design was conceived as a fundamental strategic piece for the launch of MERGE, functioning not only as a presentation but as a tool for market validation and lead generation. The visual structure follows a narrative that guides the user through the exclusivity of the brands and the editorial value proposition, utilizing negative space and large-format typography to reduce visual noise and focus attention on the core benefit. By aligning this site with the app’s design system, a consistent brand transition is achieved, reinforcing user trust before starting the download process.
Objectives:
Attract qualified traffic.
Communicate differential value.
Convert visits into downloads.
Objectives:
Attract qualified traffic.
Communicate differential value.
Convert visits into downloads.
Objectives:
Attract qualified traffic.
Communicate differential value.
Convert visits into downloads.
High-fidelity wireframe
High-fidelity wireframe
The High-Fidelity (Hi-Fi) phase represents the technical materialization of the application under pixel-perfect criteria. In this stage, I integrated the final design system over the previously validated structure, ensuring a clear visual hierarchy where fashion photography is the absolute protagonist.
The High-Fidelity (Hi-Fi) phase represents the technical materialization of the application under pixel-perfect criteria. In this stage, I integrated the final design system over the previously validated structure, ensuring a clear visual hierarchy where fashion photography is the absolute protagonist.
Visual Detail: Application of contrasts, soft shadows, and modular spacing to elevate the perceived quality of the product.
Interactive Feedback: Design of button states, transitions, and micro-interactions that guide the user and confirm their actions.
UI Realism: Use of real content and final typefaces to test readability and compositional balance on high-density displays.
Visual Detail: Application of contrasts, soft shadows, and modular spacing to elevate the perceived quality of the product.
Interactive Feedback: Design of button states, transitions, and micro-interactions that guide the user and confirm their actions.
UI Realism: Use of real content and final typefaces to test readability and compositional balance on high-density displays.
Navegation
Navegation
The navigation structure was designed following a Mobile-First methodology, ensuring that critical functions are accessible with one hand through an intuitive bottom navigation bar. The flow was conceived as a circular journey to allow an organic transition between discovering trends in the "Wall," locating points of sale in "Stores," and the final purchase in the catalog. By optimizing the placement of interactive elements within the natural thumb zone, user fatigue is reduced and the User Flow is simplified, achieving a seamless user experience that encourages retention and optimizes conversion.
The navigation structure was designed following a Mobile-First methodology, ensuring that critical functions are accessible with one hand through an intuitive bottom navigation bar. The flow was conceived as a circular journey to allow an organic transition between discovering trends in the "Wall," locating points of sale in "Stores," and the final purchase in the catalog. By optimizing the placement of interactive elements within the natural thumb zone, user fatigue is reduced and the User Flow is simplified, achieving a seamless user experience that encourages retention and optimizes conversion.
Rotterdam, Holanda
+34 646 850 504
albertobll97@gmail.com
2026
Alberto Benito