Overview:
Earth+City is a local food producer in Toronto of plant-based, gluten-free food products mostly sourced from local suppliers and growers. What makes them unique is their commitment to activism and social and environmental initiatives that drive their work and business. The objective of this team project was to re-design their existing website (desktop and mobile responsive versions).
The re-design first-and-foremost focuses on the food (that it’s delicious, healthy and of high quality). It then offers more comprehensive information on their environmental and social impacts which is what makes them unique in the market. The new design is also designed for more automation by adding FAQs and more information on the business itself (so customers can help themselves and staff can focus on all the other aspects of business). Lastly, we suggested offering a sampler package which is a cost-effective solution for both customers and the business to have bigger orders, try an array of products, and offers something unique to the e-shop.
Role: I co-led, project-managed, and contributed in all aspects of the design process from research (contextual inquiry, in-person interviews), planning (persona development, information architecture), and design (features prioritization, wireframing, prototyping, usability testing). I also was the lead with the developer and digital marketing teams. I then co-designed another version of the UI for the website (both desktop and mobile)—which is what is presented below.
Timeline: 3 weeks
Team: 4 UX Designers + 1 UI Designer
Deliverables: High-fidelity clickable prototypes for a website (desktop prototype and mobile-responsive prototype versions).
Problem:
Earth+City (E+C) came to us to help re-design their website which is currently a Shopify e-commerce website. The original site is pretty bare bones, though there’s an e-store page where customers can order food to be delivered or picked up. The initial problem was how do we get people to buy through the website?
What also made them different than other food producers was that they built social and environmental activism into their business. We wanted to know if focusing on this (which was originally lacking on their website) would be the way to go to draw more customers.
Solution:
We conducted research through 1) an online survey to look at people’s attitudes and behaviours around farmers’ markets, and food decision-making, and 2) a teammate and I visited E+C at the farmers’ market to interview their customers.
At the core of Earth+City’s food is their activist drive to provide environmentally and socially-sound products. This is one of the unique drivers of their business. The other is their relationship they’ve developed with their customers through weekly farmers’ markets around Toronto. However, we found what draws customers to E+C is their food is it’s delicious, healthy and good quality; meanwhile, E+C’s activism initiatives is a “nice-to-have”; and, people ultimately enjoy visiting farmers’ markets (E+C’s primary distribution). The top reasons that people considered for their food purchases were:
We found that there was ultimately one persona, but two variations.
So, their website serves two purposes for the two types of customers as: 1) an alternative way to access E+C products for established customers; 2) an informational website for new customers.
UI
I also created an alternative UI with a colleague.
RATIONALE:
The styling goes back to the core of the company: food and activism.
Food: The food is the focus with vibrant and beautiful product photography. The black and white neutrals for the rest of the website allows the food photos to “pop” and sell themselves.
Activism: We played on this with big, bold, strong, and impactful fonts in uppercase.
Action: With activism, you need to act with urgency— i.e., “Buy our food! Go! Do! Now!” This was subtly represented with the pop of greens (from their colour palette), which also presents their “green” environmental values.
Outcome:
The re-design first-and-foremost focuses on the food (that it’s delicious, healthy and of high quality). It then offers more information on the environmental and social impacts that the business makes for those interested. The new design is also designed for more automation by adding FAQs and more information on the business itself (so staff can focus on all the other aspects of business). Lastly, we suggested offering a sampler package which is a cost-effective solution for both customers and the business to have bigger orders, try an array of products, and offers something unique to the e-shop.
Click on images to see clickable prototype.
Desktop Design:
Mobile-Responsive Design:
