Swiftleaf

This is my response to Tradecraft’s pre-interview design challenge.

The assignment was to “create a wireframe and high fidelity mockup of a signup and checkout flow for a monthly subscription vegetable delivery service, aiming to help alleviate the food desert problem.” 

What is a food desert? It is a neighborhood where there is little or limited access to healthy and affordable food such as fruits, vegetables, whole grains, low-fat milk and other foods that make up the full range of a healthy diet. A food desert does not simply refer to one’s proximity to a supermarket but one’s access to a food pantry or food-sharing program, as well.

‍
‍

‍

How can we help alleviate the food desert problem with a simplified sign-up and checkout flow that makes subscribing to the service (Swiftleaf) as streamlined and as effortless as possible for the user?

‍

Swiftleaf - a conceptual vegetable subscription application aimed at alleviating the food desert problem. Swiftleaf utilizes a streamlined sign-up and checkout flow that gathers the necessary information from a user, keeping the design both minimal and functional.

‍

Intended User Goals

• Having access to/able to purchase a selection of healthy vegetables
• Having the convenience of monthly vegetable delivery service
• Save time and money by ordering through the app when there aren’t a lot of options for healthy produce in the area.
• Eating healthier, cooking healthier meals instead of buying pre-cooked or processed food products
• Offer a wide selection of fruits & vegetables mixed together, also includes organic options

Intended Business Goals

• Provide adequate healthy vegetable options to families who are living in food deserts at an affordable price
• Get users to download and subscribe to the monthly subscription service. Users should be able to come back and use the app again, which can be achieved by reducing cognitive load (saved searches, meaningful defaults, pre-filled forms, etc.)
• Retain users by making the sign-up and checkout flow as easy and as effortless as possible. The easier it is to get through, the higher the retention rate is for users who want to come back and continue using Swiftleaf
• Promoting the application, making money, building brand awareness - in order to grow and promote the business so that more people will use the service. The service will help alleviate the growing food desert problems in cities and areas where residents don’t have access to fresh vegetables on a daily basis

Aligning User Goals with Business Goals

• Subscription model should allow users to select various subscription levels of foods/vegetables according to their individual needs.
• Subscription should give the users options suited for their needs. Produce mixed boxes comes in 2 different sizes, and also includes an organic option. Price varies depending on the option selected.
• Subscription should also include a text field for users to input potential allergies or produce they would like to exclude from their order. Example: if they don’t want to receive a certain type of vegetable due to an allergy they might have
• Option to remember username and/or password for next time should be incorporated. Searches and user preference/user-customizable options such as allergies etc. should be able to be saved within the application. App can suggest different options and recommendations for food allergies etc

‍

Research into Food Insecurity

which is a lack of access to a sufficient amount of good because of limited funds. More than 49 million American Households are considered to be food insecure and are vulnerable to poor health as a result (source: tolerance.org). That means that 1 in 8 Americans face food insecurity, 13 million of which are children (source: Move For Hunger)

• People who are low-income or are living below the poverty line are especially at risk: Hispanics, African-Americans, households with children, and single mothers
• People living in food deserts realizes that stores in their community have an unhealthy amount of processed foods — compare the distance between the closest fast food restaurant and closest grocery store. This is known as food imbalance
• People living in rural areas are at a disadvantage because they are typically further from food pantries. They also have less available produce and nutritious food to choose from (Source: Move For Hunger)
• Families in these areas usually have little-to-no access to nutritious foods, meaning that they are likely to have unbalanced diets and skip meals.
• People (mostly parents) are unable to travel to the grocery store to buy groceries/produce due to outside factors (responsibilities, kids)
• People are paying more up to 10% more for groceries that are sold in food deserts vs. the same groceries sold in suburban areas.
• People/families are relying on fringe food and want to make changes their eating habits / lifestyles

‍

‍

User Flow: Sign-up & Checkout

In order to make the sign-up and checkout flow as effortless as possible for the user, I researched heavily on current vegetable subscription services from around the United States (FarmFreshToYou, Misfits Market etc.), as well as subscription services that sold pre-packaged foods and goods. The subscription models didn’t differentiate too much from each other during the sign-up and checkout period, but some were significantly easier to use than others. After hours of researching tutorials on wireframing/prototyping and experimenting with a few different designs and flows in my low-fidelity/mid-fidelity mockup, I conceived this flow for my assignment:

‍

Low Fidelity Wireframe

After the initial User flow is clear, I conducted a solo design sprint with sketches of pen and paper first and then conceptualized it in Adobe XD. My goal for the wireframes are:

• Create an easy-to-use signup and checkout flow with the least amount of clicks / interactions needed from the customer
• Gathering the customer's email, phone number, and/or social accounts to login
• Making sure to get the customer's location as soon as possible with a ZIP code to ensure that Swiftleaf is available for delivery in their immediate location

‍

Mid Fidelity Wireframe

In building out the design into Mid Fidelity, I aim to allow the customers to:

• Select various box subscription sizes, with pricing and size being dependant on how many people they want to feed
• Manage frequency of delivery schedule, customize food items, and make any account changes
• Input in delivery and billing information, with the ZIP code at the start of the flow confirming available delivery, as well as receive text reminders for deliveries
• Review order to have a full overview of what they want to purchase. This includes the produce service option that they selected, frequency of delivery, delivery and billing information, and showcasing important information that confirms their subscription service before they can place an order

‍

Visual Branding

I created a simple design system that included a custom logo, colors, typography, and components. I chose to use white and green to convey growth and renewal, which fits with the overall theme. I decided to limit this green to only the logo, CTA, the price of the product, checkboxes, and navigation options.

‍

UI Mockups

I chose to go with a minimal aesthetic that emphasizes functionality as the foundation for my design; I utilized my graphic design background to create a logo and design proper typography, information architecture, visual hierarchy, and layout. I emphasized the visual design by crafting a design language for the app that isn’t too dark or too light.

‍

‍

‍

High Fidelity Prototype + Flow

The final flow includes steps that I hypothesized would be best in order to achieve a painless sign-up + checkout flow

‍

Splash screen + Get Started

• Users are greeted with a splash screen to identify the application
• Asked for ZIP code immediately to confirm if delivery is possible in the customer's general area since it is needed to start the sign-up flow

ZIP Confirmation

• Made ZIP confirmation a pop-up instead of its own separate page, since this is just to confirm the delivery area for the service.
• Message displayed conveys important delivery information to the customer
• Customers also have the option to go back and change their ZIP code if it is incorrect.
  

Subscription Selection

• Kept the logo on the top of the screen to reaffirm the legitimacy of the app and conveys trust in the customer, turning over a higher conversion rate
• Made the delivery confirmation in bolded text to remind the user that Swiftleaf is still delivering to their ZIP code, with an option to change ZIP again
• Designed a variety of different subscription boxes that would best fit the customer's preferences when it comes to ordering healthy foods on a weekly basis

Product Selection

• Added a back button in case the user decided to change their mind
• Added a section for customers to add anything that they would like to exclude due to allergies
• Included a checkbox option to remember their box preferences to avoid re-entering the same information later

Create Account

• Here I ask for all the regular user information (Name, address, etc.), which makes more sense since the user doesn’t have to enter in their name or information twice.
• Progress bar was simplified from 5 steps to 3 steps to condense and simplify the process
• Only asked for email, password, and password confirmation in the “Create your account” page since customer's first name, last name, address, phone number etc. will be filled in on the next page (Delivery)
• Added option to remember email address alongside password strength meter for security

Delivery

• Form fields ask for all regular user information (Name, address, etc.) so customer doesn't have enter in their name or information twice
• ZIP code automatically fills out from form field at the beginning of the flow
• Delivery date and address confirmation are shown with an option to edit
• Billing information is combined with delivery to reduce friction in adding credit card information, billing address, etc.
• Option to mark if billing is the same as delivery, as well as a form field input for promotional codes

Order Review

• Summary of previously entered information from the customer for them to double check before confirming the subscription order
• Option to change subscription box, delivery information, and billing information
• Included delivery information as well as terms and conditions in case customer has questions regarding the subscription
• CTA changes to "Subscribe" to confirm payment for the subscription

Order Confirmation

• Confirms order for subscription with a "Thank You" blurb
• Confirms delivery date and time for first delivery, as well as an email confirmation and tracking information when the subscription box has shipped
• Option to continue shopping (will link back to Product Selection page) or view order details
• Order confirmation page has an option to return back to the home screen or back to Product Selection screen
• ‍
• ‍