En Flor

Web design & e-commerce integration for En Flor, an ethical brand specializing in natural health products. The project involved user research, information architecture, wireframes, mockups, and seamlessly integrating the design into the Shopify platform. Project Timeline: November 2023 to March 2024.

En Flor case study

Helping a local brand expand internationally

En Flor prides itself on locally made, ethically sourced products. Their range of creams and oils - crafted from flowers and plants indigenous to Argentina - are thriving on the local market. Building on their success, En Flor aspired to expand beyond Patagonia. Wanting to grow their reach, they approached me to create an e-commerce website. The goal? To share their sustainable products with a global audience and ship orders internationally.

Visit Enflor: Enflor.net

User Research

As a small brand growing and stepping into the world of e-commerce, En Flor first needed to better understand who their audience was.

A website that truly meets user needs and preferences

Conducting user research before designing the website was crucial for understanding customer needs, designing a user-friendly and intuitive interface, and finding design solutions that instill trust with customers and maximize conversion.

Below are some of the design principles & direction decided based on the research insights.

Research Overview
icons
icons

Opt for a simple information architecture and easy nav not to overwhelm users - increasing engagement and optimizing conversion (sales)

Create a responsive but desktop-first website, ensuring optimal UX on larger devices - preferred by users for online purchases

Develop content to enable brand building, inspiring trust, differentiation and more critically be visible in the search engine rankings

Working documents (research)
empathy map sample
empathy map sample

Empathy map

user journey sample for web design
user journey sample for web design

User Journey

Starting the design

After research - we moved to the design, starting with information architecture and wireframes.

Sitemap

The sitemap and architecture for an e-commerce website is rather straightforward. We knew from the start what should be the main pages and structure but I helped En Flor decide on what should be included on the content-oriented pages of the future site. Based on the research it was important to have sections of the site informing users on the brand story, the products, the ingredients, and methods of production.

sitemap sample for web design
sitemap sample for web design
prototype sample for web design on figma
prototype sample for web design on figma
Wireframes

Wireframes are the blueprint of a site, outlining its structure and functionality. They help to focus on user flow and ensure smooth navigation - without consideration for colors or other visual elements., which are explored in the next stage.

wireframe sample for web design
wireframe sample for web design
Refining the design

Once the wireframes were done, I turned them into high-fidelity mockups and then integrated the design to Shopify.

Powered by Shopify

Using the wireframes and insights from user research, I built an online store on Shopify. I made sure the designs aligned with the client's vision and seamlessly integrated with Shopify's requirements. This involved adapting the designs to fit the platform's guidelines while ensuring they remained user-friendly. I crafted product pages, organized categories, and developed site content to enhance the shopping experience. By meticulously translating the designs into a functional online store on Shopify, I ensured that En Flor's website not only looked great but also worked smoothly for customers, offering a comfortable and easy shopping experience.

Shopify logo
Shopify logo

Visit Enflor: enflor.net

Mockups
website design display for e-commerce
website design display for e-commerce
a laptop computer screen displaying a website page
a laptop computer screen displaying a website page
a laptop computer screen displaying a website page
a laptop computer screen displaying a website page
Thank You!

Hope you enjoyed reviewing my work! If you would like to see more or get in touch, fill in the form below and I will get back to you as soon as possible.