top of page

OrderFresh

A mobile application that helps people to engage and sustain a healthier way of eating.
animat-calendar-color.gif

Timeline

Oct 2016 - Dec 2016

animat-diamond-color.gif

My Role

Designer,

Researcher

animat-designsoftware-color.gif

Tools

Figma, Adobe XD, Illustrator, inVision

animat-lightbulb-color.gif

Skills

Research, Storyboard, Sitemap, Prototyping,

Usability Testing

Background

Many people are unable to access sustainable food options because they face time constraints, limited budgets, and inconvenient options. Thus they are unable to consume the healthy products they want and instead opt for harmful alternatives such as fast food or low-quality options.

So, how might we help to improve the quality of the food these people eat?

This case study is a part of the User-Centered Design curriculum at the University of Washington. My design team of four envisioned and designed OrderFresh to help users know about their food, develop a healthy diet and have fresh and local food everyday with greater convenience and affordability.

Design Overview

OrderFresh stands to educate, promote, and provide access for people to take control of their health and well being while supporting sustainable practices and environmental practices. 

orderfresh Build Mode - InVision - Googl
Group 2181.png

Login / Register

Login to OrderFresh through email or social media accounts. First-time users can register to set up contacts and payment methods.

Users can choose to skip the process and retrieve the setup pages through "profile" page.

Purchase Products

Filter the products by their types (vegetables, fruits, meat...), characteristics (Non GMO, Organic ...), farm distances (more or less local farms) and ratings.

Add the products you like to the cart and proceed to checkout.

orderfresh Preview Mode - InVision - Goo
Group 2181.png
orderfresh Preview Mode - InVision - Goo
Group 2181.png

Farm Details

Filter the farms you like and add them to your favorite farms. Learn more about the farm and its produce by reading the farm biography and watching the videos about the farm.

Check out the farm reviews and buy products directly from the farm if you like it!

Find a Recipe

Filter the recipes by cuisine type, dish category (starter, main, dessert...), dietary need, cooking time and ratings. You can also choose the main ingredients you want to include in the recipe.

Select the recipe you like and buy the needed ingredients directly from the page! Follow the cooking instructions through watching the videos and/or reading the detailed step-by-step text instructions. Share your success with the community and add your reviews!

orderfresh Preview Mode - InVision - Goo
Group 2181.png
orderfresh Preview Mode - InVision - Goo
Group 2181.png

Market Ride-share

Find other market-goers or Uber groups heading to various farmers markets and reserve your seats. Attend farmers markets without the hassle of a bus or a long walk!

Design Process

We used the Alan Cooper's Goal-Directed Design approach to reach our final product solution for OrderFresh.

Group 12.png

Competitive Analysis

I took a careful look at existing solutions within our context and analyzed their strengths and weaknesses in order to determine potential threats posed to our product and identify undeveloped opportunities left available for us to design for. 

Group 13.png
Group 15.png
Group 14.png

I found there was no service offers customers a full experience from learning about a farm and its owners, to modifying recipes based off of customers' preferred products and farms. Thus, one of the potential opportunities the current market makes available for us is that we can incorporate the ability for our users to find everything they would need in order to enjoy local products and local markets.

User Research

We got three key takeaways from interviewing 10 participants reflected a wide range of ages, career paths, and financial security.

Participants were at least somewhat curious about where their food comes from.

Participants were concerned about their general health and well-being and at least consider organic food.

Frequenting farmers market or higher-end grocery stores like Trader Joe’s and Wholefoods was not a sustainable option for most participants in terms of convenience and affordability.

Personas

We defined our target user as a health conscious individual who lacks the ability to grow his or her own garden and does not have the time to go to a farmers market or actual farm on a consistent basis. We created three personas based off of our user interviews and online research.

User Persona 3 – 1.png
User Persona 3 – 2.png
User Persona 3 – 3.png

Ideation

I brainstormed and sketched out screens and features of various concepts and components without worrying so much about feasibility just yet. 

sketch.PNG
sketch.PNG
sketch.PNG
sketch.PNG

Then my team conducted a group critique. We commented on the strengths, weaknesses, feasibility, and
originality of each sketch.

5.PNG
4.PNG

We pooled similar ideas and decided on our three most promising user-interface functions:

3.PNG

Farmer Bio: Helps consumers know more about the source of the food through allowing farmers to add a personalized description to show off their farm and highlight key information consumers might want to know.

2.PNG

Product Listings: Allows users to filter products by type (fruit, vegetables, meat, dairy), characteristic (organic, natural, GMO-free) and their farm location.

1.PNG

Market Ride-share: Enables users to find other market-goers or Uber groups heading to various farmers markets and reserve a seat, allowing them to attend farmers markets without the hassle of a bus or a long walk.

Storyboard

I visualized how users would actually use OrderFresh by creating both photo and sketch storyboards to understand the context in which our users would engage and interact with the app.

Finding a ride-share:

screen-shot-2016-12-09-at-6-36-15-pm.png

Food delivery:

Capture.PNG

Recipe:

Group 129.png

Information Architecture

Capture1.PNG

Paper Prototype

The paper prototype was divided into three main tasks that were later used to evaluate our design through user testing.

Task 1:  Look at markets in both list and map perspectives, view rides on Sunday, Wednesday, and Friday, and then sign up for a ride to University District Market at 11:30am on Friday, 11/18.

a.png
b.png
b.png
c.png
d.png

Task 2: Locate local farms, find LH Ranch’s farm biography page, watch a video from their farm, and add their farm to your favorites.

a.png
b.png
b.png
c.png

Task 3: Look up a recipe using potatoes, save the potato soup recipe, and add the ingredients for potato soup to your shopping cart.

a.png
b.png
b.png
d.png
d.png
e.png

Usability Testings

We conducted usability testings with 6 participants with our paper prototype and gained five key takeaways from these testings.

Finding: Market Map/List View is Unnecessary

When participants tested the map and list views for finding nearby farmers markets, we realized that the map view is confusing and does not display all the information that is needed for the user to make a decision on where they want to go. 

Solution: Combine Map and List View

We changed the design to a single combined map-list-view page and placed letter labels on the market location pins for clarity. We redesigned this page in a similar style to the Ride-share page, where users can select for which day of the week they would like to view markets.

Finding: Ride-share Day Displays are Confusing

Ride-share displays are confusing for users attempting to find rides to markets. Participants did not understand the correlation between the days of the week, colors, and location pins on the map. We intended for our display to have a different color for each day of the week that corresponded to the color of a location pin on the map, so that users could distinguish between rides on different days, but this design is clearly ineffective.

Solution: Only Display Rides For One Day

We refined the design of the Ride-share page to only show rides for one day at a time in order to eliminate the confusion regarding the several colors and days and overall help people more quickly find what they are looking for.

Finding:  Farm Bio Symbols are Unclear

The Farm Bio page’s symbols for natural, organic, and GMO-free are unclear in meaning. Participants were largely unaware of what “O” and “N” stood for. While some users had difficulty with these symbols, others found it vital to the page.

Solution: Provide Full Name of Symbol When Pressed

We improved by allowing users to tap on the symbol in order to see a small tool-tip appear. For example, the “O” icon shows the text “Organic” when tapped on by users. This feature is also added to the similarly-designed icons on the product listing page.

Finding: Farm Bio Content Could Be Better Prioritized

While most of the participants liked the Farm Bio page overall and especially praised the ability to open a list of that farm’s products, they voiced concerns when it came to page content. Participants expressed their first priority was to find the farm’s products instead of seeing the description of the farm.

Solution:  Horizontal Scrollbar With Products

Taking into account these priorities, we added a horizontally-scrolling panel showing the products, as well as a “view all” link to see all of the farm’s products in a standard product list view. We also shortened the farm description to a few lines that could be expanded further if the user was interested in reading more.

Finding: Recipe Search is Complex and Confusing

Half of our participants found aspects of the recipe page’s search functionality to be confusing. Participant 4, after typing in the search query, thought that pressing “Done” would initiate the search—she failed to realize that she had to press “Search” afterwards. Participant 6 was unsure about the meaning of the green plus and red minus controls in the search text popup. Participant 5 had issues with the flow of the search interface: he expected pressing search (from the recipes page) to open a simple search functionality, but he was instead surprised when the extensive search popup opened. He further noted that the time slider conveys time less effectively than a drop-down would. Participant 5 also mentioned that he would like the ability to exclude specific ingredients (in addition to the existing “include” functionality) for the sake of avoiding allergens.

Solution:  Simplify and Revamp the Recipe Search

We had to revamp the recipe search feature while simplifying it for ease of use. To simplify the recipe search while incorporating advanced functionality, we made the search button open a basic search that allows users to search through recipe titles and ingredients easily. To seamlessly incorporate advanced functionality, we placed an expandable area below the search text field that allows users to include or exclude specific ingredients as well as limit results to recipes cookable in a certain time range.

Wireframes

1.PNG
3.PNG
5.PNG
8.PNG
10.PNG
12.PNG
2.PNG
4.PNG
6.PNG
9.PNG
11.PNG
13.PNG
14.PNG
15.PNG
16.PNG
17.PNG
18.PNG
19.PNG
21.PNG
20.PNG
22.PNG
23.PNG
24.PNG
25.PNG
26.PNG

Interaction Flow

a.png
b.png

Final Product

Login / Register: Login or Register to setup your OrderFresh account.

00_Splash_Screen_–_2.png
Group 2181.png
01 Login.png
Group 2181.png
02 Register.png
Group 2181.png
03 Set Location.png
Group 2181.png
Phone.png
Group 2181.png
Payment.png
Group 2181.png

Product Listing: Search or filter products you like and add them to cart.

products.png
Group 2181.png
product filter.png
Group 2181.png
product results.png
Group 2181.png
product adding.png
Group 2181.png
product added.png
Group 2181.png

Shopping Cart: Edit your shopping cart and proceed to checkout.

cart.png
Group 2181.png
edit cart.png
Group 2181.png
pay.png
Group 2181.png

Farm Listing: Search or filter farms you like and buy products directly from your favorite farms.

farms.png
Group 2181.png
05 My Favourite.png
Group 2181.png

Bookmark the farm you like for easy access.

Group 2181.png
farm details.png
farm products.png
Group 2181.png

See all products of the farm you selected.

Recipes: Search or filter recipes you like, follow the instructions and prepare your meal.

Recipes.png
Group 2181.png
Group 2181.png
recipe filter.png
recipe result.png
Group 2181.png

Select ingredients you want to include in the recipe.

Select your expected preparation + cooking time.

Group 2181.png
recipe details.png

Buy ingredients needed for the recipe directly from the page.

Share your success with other users.

Market Ride-share: Find other market-goers or Uber groups heading to various farmers markets.

Markets.png
Group 2181.png

Select the market you want to visit.

Group 2181.png
market details.png
market details – 1.png
Group 2181.png

Confirm your reservation of selected ride-share.

market details – 2.png
Group 2181.png

Reflection

A good app is not just a good idea: it takes time, research, critiques, and failure. I believe becoming a designer is no different. It takes time to learn the design process, researching new techniques, receiving critiques on the thought process, and failing from time to time.

It was vital for the project and myself to incorporate a user-centered approach. I received critical iterative feedback from my users, peers, and professor that allowed me to think outside the scope of the original conception.

The project not only helped me better understand the role of a UX designer, but also prepared me for being a solid analytical, creative and visual thinker with good communication and collaboration skills.

bottom of page