EKOLAND
CASE
Website
Brand Identity
TOOLS
Figma
Adobe Firefly
Adobe Illustrator
YEAR
Redesign 2024
TEAM
Madeleine
Svensson
BACKGROUND
Sustainable Development Goal Nr. 12 from the United Nations highlights the importance of responsible consumption and production. Choosing eco-friendly products, minimising single-use plastics, and recycling are key steps towards achieving this goal.
Digital purchases via e-commerce have long been a growing trend in Sweden, and today, in terms of food and everyday goods, it accounts for 33% of all purchases. For the age group 25-39, the figure is the highest at 44%.
THE BREIF
Create a e-commerce site that helps nudge users towards better choices that help us reach United Nations Goal Nr. 12.
Give the brand Ekoland a business model, and a new visual identity. Create an easy to use interface for effective online shopping.
THE SOLUTION
To promote sustainable consumption in e-commerce I designed Ekoland to offer zero-waste bulk goods that are locally grown. This approach reduces packaging waste and supports local farmers and reduces carbon footprints from transportation.
THE INTERFACE
The e-commerce interface is designed to be user-friendly, time-saving, and visually appealing, making it easy for customers to make environmentally conscious choices effortlessly.
DESIGN PROCESS
To understand the problem I started off with doing research and digging for data.
The UX research done by the Baymard Institute provided me with valuable UX insights.
The Stylesheet showing color choices, typography and approved color contrasts.
THE PERSONA
To help keep the design user-centered, I created a persona based partially on my research findings and partially on Ekoland's target audience.
MOODBOARD
The Ekoland brand values are:
Hope - For a Sustainable Future
Kindness - For the Planet
Health - For You and Your Body
To reflect these values in the design, I used a deep bluish green to represent strength and nature. The bright greens create a contrast that pops and brings an energy associated with hope. To complement these colors, add warmth, and incorporate neutral shades, I used a light beige for the background.
The Figma variables used to create a prototype and ensure cohesive design.
A selection of the UI components built through Atomic Design principles.
The imagined customer experience and suggestions for Key Performance Indicators.
The making and editing of the hero image through AI by Adobe Firefly.
NEXT PROJECT
Protech
Designing a lead capture landing page while introducing a new product line
Group project│E-commerce │CTA
