Increasing brand awareness on fashion ecommerce landing and product pages
My role
Lead UX/UI designer (solo)
Timeline
4 weeks
Tools
Figma
Client
Green Earth: A new British clothing brand for eco-conscious shoppers
Green Earth is a new clothing brand based in the UK, selling sustainable and ethical fashion. They cater to young, eco-conscious consumers who want to make a positive impact through eco-friendly clothing choices. The brand emphasises organic materials and presents a natural, earthy, minimalist aesthetic.
Challenge
Boost brand awareness & conversion for Gen Z & Millennial consumers
As a new brand, Green Earth required mockups of a responsive e-commerce website to present to its investors and stakeholders. The design had to appeal to male and female Gen Z and millennial professionals. It needed to be engaging, relevant, and reflect the brand’s values of sustainability and minimalism.
With a limited budget, they only required designs for the landing and product listing pages to present their design direction and secure further investment for full website design. Their business goals were to introduce their brand and generate sales via a good conversion rate.
Approach
Design engaging landing & product pages driven by market insights
I conducted a UI audit of direct and indirect competitor websites to understand the experience consumers would expect. Using these insights and secondary user research, I crafted a visual design to establish a cohesive and relevant brand identity to increase brand awareness among the target audience.
I developed the website incrementally—with sketches and wireframes to high-fidelity designs—to facilitate iterative improvements. I created a design system based on the visual design and applied UX principles to optimise the landing and product listing pages for conversion.
Discovery
Eco-conscious shoppers struggle to find alternatives to fast fashion due to limited brand awareness
Secondary User Research
Due to the project’s time constraints, I prioritised conducting secondary user research over primary methods. This provided sufficient user insights to inform design decisions and limit assumptions. I reviewed quantitative data & literature to understand the target audience and identify problems and behaviours that influence the design. Here are the key insights:
Gen Zs & Millennials are the biggest consumers of ethical & fast fashion.
Target 21—35 year olds
Males adopt ethical clothing quickly, but females dominate fast fashion.
Target male & female shoppers
There is a growing demand for ethical alternatives to fast fashion.
Highlight this value on the landing page
Competitor UI Audit
I performed a UI audit of competing brands to design a familiar interface and improve usability (Jakob’s Law). As user research indicated, the target audience shopped at popular fast fashion brands, so I analysed fast fashion and eco-friendly e-commerce sites. This provided insights for optimising the design elements—like hierarchy, colours, and typography—on the landing and product listing pages for brand awareness and conversion.
The focus
How might we design a shopping experience to offer eco-conscious Gen Z & millennials an eco-friendly alternative to their fast fashion favourites?
Visual Design Direction
Establishing a grounded, minimal brand identity to guide the UI design
I curated imagery to capture Green Earth’s natural & earthy aesthetic. These informed the selection of a balanced, grounded colour palette and readable, minimalist typefaces. Sample copy was also chosen to guide the tone of the copywriting.
Colour scheme
Design rationale
Dark green was chosen as it symbolises sustainability & nature, while light brown represents earthiness. Grey reflects calmness, white enhances readability, and black ensures text legibility on a white background.
Typography
Design rationale
Yantramanav and Poppins, san-serif typefaces, were chosen to convey simplicity and minimalism, similar to competing brands. Yantramanav's tall caps for headings and Poppins' geometric form for body create a balance and clear hierarchy.
Low-Fidelity Designs
Sketching & wireframing responsive web designs based on insights
Sketches
Using information architecture patterns from the audit, I sketched the landing and product page layouts to iterate and develop ideas quickly. This helped establish the hierarchy with the different components.
The landing page aimed to engage visitors and introduce the brand, driving clicks and conversions. The product listing page focused on streamlined browsing, clearly displaying prices and descriptions to facilitate conversions.
Wireframes
From the sketches, I designed wireframes for the pages in Figma to further develop the UI design. For responsive design, I adopted a mobile-first approach to ensure a minimalistic design for both mobile & desktop interfaces. Hierarchy, typography, white space and alignment were optimised to create an effective design. Read the rationale for the key design decisions below.
Hierarchy
Design rationale
The landing page engages visitors with a prominent hero section, clear value proposition, and CTA to facilitate immediate shopping and prioritise conversion.
The goal is to drive action, so the shop prompts are near the top. The About, Reviews and Subscribe sections, positioned lower, build brand awareness without distracting from the primary goal.
Responsive design
Design rationale
The hierarchy remains the same on all pages to ensure brand consistency and optimise content across mobile and desktop.
Elements like Product Categories and About sections are adapted to be stacked to fit the column system, while content-rich elements, such as the Product Highlight and Reviews sections, use horizontal scrolling for an engaging experience.
Design System
Defining the common design elements to create a consistent brand and UI
Based on common components from the wireframes, a design system was established to maintain consistency throughout the website. The system outlines guidelines for the colour palette, typography, buttons, input fields, grid system, iconography & image cards. See below for the rationale behind some of my decisions.
Colour palette
Design rationale
White was chosen as the primary colour to maximise readability. A light brown became the secondary colour used on product cards to reinforce the brand. Dark green was selected as the accent colour on CTAs to attract attention against lighter backgrounds. Colour variants ensure flexibility while maintaining a cohesive brand awareness.
Button design
Design rationale
I designed buttons for each screen size, adjusting font size and padding to optimise readability and clickability. All buttons were larger than 44 x 64px, with important CTAs, like subscribe and payment, being full-width on mobile.
Buttons had no corner radius to reflect the trend seen on other fashion websites.
High-Fidelity Design
A responsive e-commerce web design for Green Earth’s launch
The design system was applied to wireframes to create the final screens, with adjustments made as needed. The hero section features an image representing both genders to engage both male and female visitors, directing them to separate CTAs for men's and women's apparel.
Green was used in notification banners and footers to reinforce the accent colour and the brand name "Green Earth". Product card imagery incorporated a light brown background, aligning with the brand's earthy theme.
Keywords identified from competitor analysis inspired the hero heading "Fashion for a Better Earth," effectively integrating the brand's message with its name. These keywords were strategically utilised across the website to ensure relevance and effectiveness.
Explore the rationale behind some of the key design decisions below.
Key design decisions
Use of colour for brand awareness
Design rationale
Given the brand name "Green Earth," green colours were used near the logo wordmark to create a subconscious association and reinforce branding. Images of models in natural, green, or brown settings were chosen to reflect the brand colours. Featured imagery was slightly desaturated to evoke a 'grounded' feeling, aligning with the brand's desired tone. The clothing featured is muted rather than vibrant, consistent with the overall colour palette.
Design decisions to boost conversion
Design rationale
To drive conversions, the value proposition and CTAs are placed within a dedicated container, with clear action-oriented language encouraging users to shop. This aligns with the primary goal for both visitors and the business.
Consistency is maintained by using green for the banner and CTAs, signalling clickable elements. This hero section is designed to stand out from the rest of the content, effectively capturing visitors' attention and guiding them toward the conversion goal.
Conclusion
Key Lessons
In this project, I learned how UI principles can influence the user experience and drive business outcomes. I applied fundamental UX principles to create a practical and effective design solution tailored to the client's requirements. The limitations and constraints of this project highlighted the importance of user testing and feedback in evaluating & refining design effectiveness.
Design Critique
The design effectively enhances brand awareness through strategic placement of the brand name, prominent imagery, and clear value proposition at the top of the landing page. Consistently designed CTAs contribute to improved conversion rates, supported by a well-defined hierarchy and readability across the content. The website demonstrates effective responsive design across both desktop and mobile platforms.
Areas for improvement include evaluating the project's impact on brand awareness and conversion metrics more comprehensively. A limitation of this project was the absence of primary user research and testing, which are crucial for ensuring the effectiveness and usability of the design decisions. Consequently, this fictional case study serves as a valuable exercise in applying UI principles to create a cohesive website design.
👋 Get in touch at