Fer Suárez

Chiquihuite MX

Role

UX Designer

Project type

E-commerce website

Tools used

Sketch

Illustrator

WordPress

Live website

https://chiquihuite.mx/

Overview

Chiquihuite MX is a Mexican-based startup committed to promoting local producers and fair trade practices. Their mission is to support local farmers, producers, and crafters by selling a range of vegan snacks, crafts, drinks, juices, and organic products.

At the beginning of the pandemic, Chiquihuite MX approached us to develop a new e-commerce website that would allow them to sell their products online and become business resilient for the incoming lockdowns. As the project’s lead designer, I created an intuitive and user-friendly website that would help them achieve their business goals.

Objectives

🤔

What were we trying to achieve?

📌
Develop a brand new e-commerce website
📌
Shift sales from in-person to digital
📌
Ensure business continuity during the pandemic
📌
Continue to support fair trade and local producers, farmers, and crafters

Constraints

🚧

What restrictions did we have to consider?

📌
Limited budget for development
📌
4 weeks to launch
📌
Stakeholders had no prior e-commerce knowledge

Responsibilities

📋

What was I responsible for?

📌
Visual design of the website
📌
Using a visual builder, HTML, and CSS to create the website inside WordPress and WooCommerce
📌
Provide training to key stakeholders about managing the online store
📌
SEO optimization for each product page

Results

🚀

What did we achieve?

📌
Increased online visibility for the company and its products
📌
Increased sales and revenue
📌
Streamlined the purchasing process for customers during lockdown

The problem

Business resiliency for the pandemic

Designing and developing an e-commerce website to sell their locally produced organic products during the pandemic while supporting fair trade and local producers.

Additionally, there was a need to train key stakeholders on managing their online store using WordPress and WooCommerce.

Visual exploration

Optimizing the design process to meet the deadline

During the Chiquihuite MX e-commerce project, the team and I faced a tight deadline for launching the website, which made time management a crucial aspect of the design process.

To optimize our time, I conducted the visual exploration phase in parallel with other project phases.

What I did...

🤓
📌
Conducted two design iterations to ensure there was enough time for development
📌
Ensured that the website's overall look and feel were aligned with the company's branding
📌
Created high-fidelity designs

Home page

Hero banner 👉

In this version of the home page, the banner had:

📌
Placeholder for a hero image related to fair trade
📌
A brief intro to what the brand sells and their business model
Fair trade section 👉

The stakeholders wanted to show the fair trade cycle

📌
Added relevant images to represent each stage
📌
Created an illustration to represent the local producers
👇 Version 1
👇 Version 2
👈 Hero banner

In this version of the home page, the banner had:

📌
Solid color with a single heading
📌
A button leading to the store
👈 Fair trade illustration

I understood the importance talking about fair trade but it took a big area of the page, so:

📌
I created an illustration that represented the local producers
📌
Added a brief intro text and a button that led to a fair trade subpage
👈 Products highlight

I suggested doing a product photography session to use in this section

📌
Highlighted the top 4 products the brand sold
📌
Simple button design for users to go to the product's page

After two design iterations

Getting to the final design to move on to development

What I learned...

💡
The stakeholders preferred the design that included illustrations and only used photos for products.
The use of shapes and solid colors aligned with the organic nature of the brand.
I suggested to the stakeholders to move the products highlight section below the hero section, that way, users could arrive at the online store faster with less need to scroll.
👇 Final home page design
👈 Illustrated hero section

I created a hero banner that had three key elements:

📌
An animated illustration that represented the local producers that the brand helps
📌
A heading that reflected explaining how everything was made in Mexico
📌
A button leading users to the store page
👈 Products highlight

This section was used directly from version two of the designs presented to the client

📌
Highlighted the four top products
📌
Leveraged the product photos that the stakeholders invested on
📌
Added buttons that lead to each of the product's page
👈 Fair trade section

Given the importance of fair trade for the brand, I did the following:

📌
Added an illustration to represent one of the local farmers the brand supports
📌
Added a brief introduction as to why fair trade mattered and how the brand supports it
📌
Adding buttons that lead to the store page
👈 Meet the brand

It was important for the stakeholders for the users to understand who they were and why they created Chiquihuite

📌
Kept on with the illustrated them of the design
📌
Added a brief introduction for the brand, who they are, and their goals

PRODUCT DOWNSELECTION​

Selecting the top priority products to meet the deadline​

I suggested the stakeholders should down-select the number of products to be featured on the website, ensuring that we could launch a the end of the fourth week of the project.

What I did...

🤓
📌
Worked with the Chiquihuite MX team to identify the most popular and profitable products
📌
Moved on designing the store and product page.

Store page

👈 Paginated store page

To meet the launch deadline there was one design for the store page

📌
A 3x4 grid to show 12 products per page to the user
📌
Dropdown category selection menu for users to navigate
📌
Each product had their respective photo - product photos were provided by the client
👇 Final Design

Product page

👇 Final Design
👈 Simplified product page

Like the store page, there was only one design for the product page

📌
Two column grid where the left side had the featured image of the product
📌
Added a color block below to include additional product information

Stakeholders Training

Enabling the stakeholders for a successful launch

In preparation for the Chiquihuite MX e-commerce website launch, it was crucial to provide the key stakeholders with the necessary training to manage the online store effectively.

 

What I did...

🤓
📌
I conducted a quick training program for the key stakeholders of Chiquihuite MX on how to manage their online store using the WooCommerce platform.
📌
I offered ongoing support to the stakeholders to ensure that they were comfortable using the platform even after the website launch.

Results

Maintaining business continuity, launching a digital presence, and training stakeholders

What was achieved...

🚀
📌
Successfully launched a new e-commerce website for Chiquihuite MX
📌
Developed a custom design for the website that aligned with Chiquihuite MX's branding and mission
📌
Streamlined the product selection process to feature a curated selection of items
📌
Ensure smooth operation and business continuity by training key stakeholders on how to use WordPress and WooCommerce to manage their online store
📌
Enabled Chiquihuite MX to expand their reach and customer base by providing a convenient and accessible way for customers to purchase their products online

Looking back

Learnings and Takeaways

Collaboration, collaboration, collaboration
Engaging with the stakeholders early on can render powerful allies that can help meet tight deadlines.
Tight deadlines impact design
The pandemic unprecedented effects put a rush on all projects that were crucial for business continuity. This rush can compromise the design process and how I can approach it.
Iterating with a tight deadline is not ideal
4 weeks didn't feel like enough time to fully flesh out the design and I would have appreciated more time to experiment, iterate, and test the user flow.