Design Process
I began by brainstorming and sketching out initial layout ideas before translating them into a wireframe. Throughout the process, I continuously referenced competitor sites to ensure my approach was both relevant and competitive. Using a grid for structure, I refined the design step by step until I achieved a layout that met my vision.
Changes Based On Feedback
To refine my design and enhance user focus, I gathered feedback from UX/UI designers. Their insights guided targeted improvements, elevating the user experience. The updated version is on the right.
Improved button variations to help guide users by providing primary, secondary and tertiary versions.
Changed the newsletter sign up button text to "subscribe" to make the action clearer to the user.
Increased touch area of navigation links to make them more user friendly.
Since the store locator is in the footer and location is prompted on landing, I removed them from the top.
Resized images in "our values" sections to create more visual balance
Styling Guide
I explored various typefaces, considering those used by other companies for reference. While I noticed some common trends like Bespoke, Proxima Nova and Geometric Sans, I ultimately chose Futura for headings for its alignment with the look and tone I was aiming for. To complement it, I paired Futura with Lato for the body and link text, as the combination provided a balanced and visually appealing contrast.
Designed an Engaging Landing Page for a Fashion Brand
UX Research/ Wireframing/ Prototyping/ Peer & Mentor Feedback
Case Study
Uxcel Design Course Project (Spec)
"As an instructor on the Experience Haus UX & UI course, I had the pleasure of teaching Rob. His eagerness, motivation, enthusiasm, and exceptional diligence make it clear that he is destined for success."
Fi Patuck 🇬🇧
Instructor - Experience Haus (London)
Desktop
Select a fashion service and device type
Design a landing page
Write compelling copy to guide users
Explain your design process
You are a UI designer for a fashion service. Your goal is to design a landing page that meets users' needs and engages them to use the service. Ensure it communicates the unique value proposition of the service provides a modern and minimalist design to reflect the company's brand identity.
Design Scenario
What I Did
- Conducted a competitor analysis to assess design strengths, weaknesses, and gather inspiration.
- Developed initial sketches and wireframes to map out the landing page layout.
- Created a high-fidelity mockup featuring interactive elements for enhanced user engagement.
- Collected feedback from the Uxcel community to identify strengths, weaknesses, and opportunities for improvement.
Overview
Tasks
To start, I explored several high-end retail websites such as Versace, Hermès, Net-A-Porter, and Ralph Lauren. My goal was to not only analyse competitors but also to gather inspiration for my own design. I paid close attention to key elements like icons, imagery, layout composition, tone, and the overall aesthetic and user experience.
I identified consistent patterns across competitor sites, particularly with key icons like search, account, wishlist (heart), and shopping bag. Most brands embraced smart, minimalist designs, leveraging whitespace to create clean, breathable layouts. Observing these common design choices boosted my confidence in my own approach, reinforcing my vision for a cohesive and intuitive design.
Competitor Analysis Insights
High Fidelity Design
During the creation of the high-fidelity mockup, I encountered some challenges, particularly with the alignment of imagery and text in the footer and values sections. These obstacles led to several adjustments to ensure a cohesive and polished design.
A key focus of the design is emphasizing the company's core values. As sustainability becomes increasingly important, I made it a priority to highlight the brand's commitment to sustainability, diversity, inclusion, and community engagement. These values are prominently featured and thoughtfully summarized, offering users a clear understanding of the brand's mission and impact.
Colour Contrast Tests
To make sure my palette was compliant with WCAG, I ran my choices through contrast testing. Before I settled on my final colours for my initial design I made sure they at least met AA standards.
Changes Based On Feedback
To refine my design and enhance user focus, I gathered feedback from UX/UI designers. Their insights guided targeted improvements, elevating the user experience. The updated version is on the right.
Improved button variations to help guide users by providing primary, secondary and tertiary versions.
Changed the newsletter sign up button text to "subscribe" to make the action clearer to the user.
Increased touch area of navigation links to make them more user friendly.
Since the store locator is in the footer and location is prompted on landing, I removed them from the top.
Resized images in "our values" sections to create more visual balance
Styling Guide
I explored various typefaces, considering those used by other companies for reference. While I noticed some common trends like Bespoke, Proxima Nova and Geometric Sans, I ultimately chose Futura for headings for its alignment with the look and tone I was aiming for. To complement it, I paired Futura with Lato for the body and link text, as the combination provided a balanced and visually appealing contrast.
During the creation of the high-fidelity mockup, I encountered some challenges, particularly with the alignment of imagery and text in the footer and values sections. These obstacles led to several adjustments to ensure a cohesive and polished design.
A key focus of the design is emphasizing the company's core values. As sustainability becomes increasingly important, I made it a priority to highlight the brand's commitment to sustainability, diversity, inclusion, and community engagement. These values are prominently featured and thoughtfully summarized, offering users a clear understanding of the brand's mission and impact.
High Fidelity Design
Colour Contrast Tests
To make sure my palette was compliant with WCAG, I ran my choices through contrast testing. Before I settled on my final colours for my initial design I made sure they at least met AA standards.
Design Process
I began by brainstorming and sketching out initial layout ideas before translating them into a wireframe. Throughout the process, I continuously referenced competitor sites to ensure my approach was both relevant and competitive. Using a grid for structure, I refined the design step by step until I achieved a layout that met my vision.
High Fidelity Design
Colour Contrast Tests
To make sure my palette was compliant with WCAG, I ran my choices through contrast testing. Before I settled on my final colours for my initial design I made sure they at least met AA standards.
To start, I explored several high-end retail websites such as Versace, Hermès, Net-A-Porter, and Ralph Lauren. My goal was to not only analyse competitors but also to gather inspiration for my own design. I paid close attention to key elements like icons, imagery, layout composition, tone, and the overall aesthetic and user experience.
I identified consistent patterns across competitor sites, particularly with key icons like search, account, wishlist (heart), and shopping bag. Most brands embraced smart, minimalist designs, leveraging whitespace to create clean, breathable layouts. Observing these common design choices boosted my confidence in my own approach, reinforcing my vision for a cohesive and intuitive design.
Competitor Analysis Insights
Tasks
Select a fashion service and device type
Design a landing page
Write compelling copy to guide users
Explain your design process
You are a UI designer for a fashion service. Your goal is to design a landing page that meets users' needs and engages them to use the service. Ensure it communicates the unique value proposition of the service provides a modern and minimalist design to reflect the company's brand identity.
Design Scenario
What I Did
- Conducted a competitor analysis to assess design strengths, weaknesses, and gather inspiration.
- Developed initial sketches and wireframes to map out the landing page layout.
- Created a high-fidelity mockup featuring interactive elements for enhanced user engagement.
- Collected feedback from the Uxcel community to identify strengths, weaknesses, and opportunities for improvement.
Desktop
Overview
Designed an Engaging Landing Page for a Fashion Brand
UX Research/ Wireframing/ Prototyping/ Peer & Mentor Feedback
Case Study
Uxcel Design Course Project (Spec)
Designed an Engaging Landing Page for a Fashion Brand
UX Research/ Wireframing/ Prototyping/ Peer & Mentor Feedback
Case Study
Uxcel Design Course Project (Spec)
Design Process
I began by brainstorming and sketching out initial layout ideas before translating them into a wireframe. Throughout the process, I continuously referenced competitor sites to ensure my approach was both relevant and competitive. Using a grid for structure, I refined the design step by step until I achieved a layout that met my vision.
Styling Guide
I explored various typefaces, considering those used by other companies for reference. While I noticed some common trends like Bespoke, Proxima Nova and Geometric Sans, I ultimately chose Futura for headings for its alignment with the look and tone I was aiming for. To complement it, I paired Futura with Lato for the body and link text, as the combination provided a balanced and visually appealing contrast.
Changes Based On Feedback
To refine my design and enhance user focus, I gathered feedback from UX/UI designers. Their insights guided targeted improvements, elevating the user experience. The updated version is on the right.
Improved button variations to help guide users by providing primary, secondary and tertiary versions.
Changed the newsletter sign up button text to "subscribe" to make the action clearer to the user.
Increased touch area of navigation links to make them more user friendly.
Since the store locator is in the footer and location is prompted on landing, I removed them from the top.
Resized images in "our values" sections to create more visual balance
"As an instructor on the Experience Haus UX & UI course, I had the pleasure of teaching Rob. His eagerness, motivation, enthusiasm, and exceptional diligence make it clear that he is destined for success."
Fi Patuck 🇬🇧
Instructor - Experience Haus (London)
Desktop
Tasks
Select a fashion service and device type
Design a landing page
Write compelling copy to guide users
Explain your design process
You are a UI designer for a fashion service. Your goal is to design a landing page that meets users' needs and engages them to use the service. Ensure it communicates the unique value proposition of the service provides a modern and minimalist design to reflect the company's brand identity.
Design Scenario
What I Did
- Conducted a competitor analysis to assess design strengths, weaknesses, and gather inspiration.
- Developed initial sketches and wireframes to map out the landing page layout.
- Created a high-fidelity mockup featuring interactive elements for enhanced user engagement.
- Collected feedback from the Uxcel community to identify strengths, weaknesses, and opportunities for improvement.
To start, I explored several high-end retail websites such as Versace, Hermès, Net-A-Porter, and Ralph Lauren. My goal was to not only analyse competitors but also to gather inspiration for my own design. I paid close attention to key elements like icons, imagery, layout composition, tone, and the overall aesthetic and user experience.
I identified consistent patterns across competitor sites, particularly with key icons like search, account, wishlist (heart), and shopping bag. Most brands embraced smart, minimalist designs, leveraging whitespace to create clean, breathable layouts. Observing these common design choices boosted my confidence in my own approach, reinforcing my vision for a cohesive and intuitive design.
Competitor Analysis Insights
Overview