Context

Equalfood is a company that offers subscription-based produce boxes. We are a team of three designers who contacted Equalfood and volunteered to develop a proposal for a new app. We had access to all the company’s founders and their data, conducted interviews with clients, and used real data to inform our design, aiming to enhance their service with a more effective digital solution.

This project was undertaken on a volunteer basis and may not be implemented by Equalfoods.

TIMELINE

3 weeks

TOOLS

Figma, Marvel

The challenge

DELIVERABLES

User interviews

Affinity mapping

Competitive analysis

Paper wireframes

User stories & flows

Mid-fidelity

Wireframes

Usability testing

Equalfood currently has a website where users can subscribe to their produce boxes. However, there is a growing need for a more streamlined and personalized subscription experience. To address this, we proposed designing a mobile app that better aligns with user needs while supporting Equalfood's goals.

Understand the target/users
Easy and fast subscription/checkout process
Create more engagement with costumers.
Engage costumers in a comunity with the same values.

High level goals

ROLE

UX & UI design

Design approach

Discovery

Equalfood's interview

Before approaching design, it was important to understand the core values of Equalfoods and what were they
goals for their business. An interview with a internal stakeholder from Equalfoods revealed valuable insights.

User interviews

We conducted in-person interviews by reaching out to potential users: people who cook regularly, have a somewat healthy lifestyle and have a full-time occupation. One of the interviewees had actually been subscribed to Equalfood’s service for a period of time.

• Understand the user’s online current shopping habits.

• Understand how adhering to a service of home delivery ingredients would benefit their life.

• How much commitment do they have about being zero waste food.

• Did the users have ever use or give any consideration to a service like the one Equalfoods provides.

Interview goals

Affinity mapping

We mapped out user responses with an affinity diagram and grouped them based on needs, motivations and
behaviors.

Define

Persona

Based on the research findings, a persona was created: Isabel Costa - the archetypical with goals, needs and frustations that represent the needs of the larger group.

User Stories

Based on Isabel’s needs we created different user stories so we could better understand what features our app would need to have.

Feature Definition

After analyzing all insights from Equalfoods and our users, we defined which features were necessary.

Equalfood’s insights

User’s insights

Features

Competitive Analysis

Before we continued to develop layouts for each feature we did a complete competitive analysis on apps/websites that mainly sell and/or deliver food (groceries/meals) as direct competitors or as indirect competitors. This competitive analysis gave us better understanding of how apps are are providing a solution to their target market segment.

Apps/websites analysed

User flow

To start mapping the paths our users can take to do the 3 mains tasks we would develop we develop this user flows.

App map

Having in consideration our research and having defined the main features we would develop, we did a hierarchical diagram of the structure of the app.

Ideation & Design

Paper wireframes: usability testing

We translated te paths we developed in the previous user flows to paper wireframes and made a functional prototype using marvel app. We did a testing round with 5 users in order to reveal possible usability problems.

Key problems found:

Mid-fidelity wireframes

After doing the necessary alterations according our previous usability tests we developed the mid-fidelity wireframes and did a simple prototype in figma.

Key problems found:

User Interface

Moodboard

To define a particular style or concept we created a moodboard that helped us develop the visual interface of our app.

Design style guide

Our next step was developing our design style guide. Changing Equalfood’s logo was not an option, so we used a complementary color system that worked with their current logo and with their original blue. In this style guide is represented the te color scheme, typography and a large majority of components we used on the app.

Visual design & final prototype

We designed an app for IOS following human Interface guidelines from Apple.

Login in

Easy login, giving the user several options: e-mail, facebook, or mobile phone number.

Homepage

How much food saved is in evidence on te top of the homepage

• this way users can be reassured of how they are contributing to help

Tips & tricks where users can obtain useful insights and share their knowledge

• this way the users feel integrated and engaged with the community

Recipes where users can get different recipes to cook with Equalfood's ingredients. Users can like the recipes and give their input through comments, this generates interaction within the community

• this way users have always available recipes that are tried and verified by others.

Community news where users can get to know where their vegetables/fruits come from.

• this way users can get to know the farmers and that they’re supporting local economy.

Subscription process

Subscription topics/screens are easy and quick to understand. Based on previous test results:

• Option to download the receipt.

Tips & Recipes

• Users can share their own tips and quickly search what tips are of interest to them by using the different filters available.

• Users can receive tips in form of small weekly challenges, making it a fun process.

• Simplified subscription process through elimination of all hidden information.

Final interactive prototype