Serving Fresh

Serving Fresh is a web platform that fulfills online orders of produce from local farmers. 

Service

Branding, Mobile App, Website, Admin Dashboard 

Client

Serving Fresh

Year

2020-Present

PixelBook Go and Pixel 4 XL - 2_edited.jpg

Serving Fresh by Infinite Options (a start-up in San Jose) is bringing Farmers' Markets on a digital platform, delivering fresh local produce to the doorstep of their consumers. 

Check out the live project on App Store and Google Play or visit the website ServingFresh.me

My role was to design the branding for Serving Fresh from the ground up and then redesign the app to make the user flow easier and visually in sync it with the brand identity. 

Before:

 

The prototype was built to an extent by a team of developers without a design file before I joined the team. The owner of Serving Fresh described it as "an app designed by engineers, for engineers".

before_2x.png
Meal Selection - guest_2x.png

Mobile First Approach

I tool a mobile-first approach to design for the project. Designing the app first helped us focus on the absolutely necessary and important details in a limited screen space. 

iPhone XR, XS Max, 11 – 3_2x.png

Bringing local farmers online during the pandemic

Serving Fresh was born in 2020 to help local farmers get more online business. The app lets consumers order produce from local farmers and the Serving Fresh team takes care of the deliveries for a small fee. 

32.2% of farms report that they have struggled to cover their expenses due to COVID-19 related effects. 

Diff stages – 1_2x.png

Value Proposition

Serving Fresh connects local farmers who have seen a decrease in the sales due to the pandemic to consumers who are highly motivated to eat healthy and order home deliveries to reduce their exposure to virus. 

moodboard_2x.png

Moodboard to determine brand colors

After coming up with a generic palette, I experimented with different saturations of green, orange and yellow. An insight from this was low saturation tones looked more unhealthy / passive, while higher saturation and deep tones looked healthy and stimulating. 

green _2x.png

Color iterations on the UI

color iterations_2x.png
Serve Fresh_presV2_Page_06_2x.png

Before locking down the brand colors, I wanted to see how it worked with our UI design. I took feedback from friends / family and the marketing team for how they felt about the colors.

 

Some questions that I asked were:

1. Are you able to clearly see the contrast and read everything on the screen?

2. What do the colors make you think of? 

3. What feelings is it instilling? 

4. Follow-up questions on what liked and didn't like - such as why, how did you make that association. 

*As a small start-up, we did not have the time and budget to talk to real users for testing. Hence the feedback came from friends, family, marketing team and the development teams.  

Logo Iterations

Group 1464_2x.png

Initially the app was called Serving Now and we felt that the name lacked a sense of what the company was about which is "Fresh, Organic Produce Delivered".  After brainstorming and consulting with the marketing team, we narrowed down to Serve Fresh and Serving Fresh. With parallel logo iterations, the team decided on Serving Fresh as the final name.

Initial business model - deliveries by farmers

Initially the business was setup such that the farmers would make the deliveries themselves. This meant that the customers could only order from one farmer at a time on the app. This not only limited the options for the consumers but we also realized that the small orders were not enough incentive for the farmer to make the deliveries within the Serving Fresh system. If anything, it was a huge inconvenience for them. 

Pivot point - taking control of deliveries

At this point, Serving Fresh decided to take control of the deliveries. This led to a much simpler user flow where customers have to choose a delivery day (which are dates when the farmer's markets setup). Now they have a whole variety of produce to choose from just like when they are physically at the farmer's market. The Serving Fresh team bundles the orders at the market and delivers it to the customers twice a week. 

Process Screens

Too many filters and upfront decisions on the first iteration
 

Delivery days, Farms, Type of Produce 

Serving fresh_logo_Page_02_2x.png
Reducing the filters

Delivery days, Type of Produce 

Group 1468_2x.png
Profile - rewards_2x.png
Initial Reward System:

 

Punch card system to encourage repeat orders. With a very small number of customers, this was not very compelling and obvious for them. 

New Reward System:

Automatic coupons applied during checkout. This is made the purchase and reward relationship very obvious to the customers and incentivizes them to order at least $30 worth of produce to activate the first coupon. 

Mask Group 4_2x.png

Collaboration with developers

I work with developers to make sure the final product matched the design intent. Simple flow diagrams help the teams connect backend login with frontend design to completely understand and implement user flows. 

Login and sign up – 1_2x.png
SF v3 App Flow_2x.png

Design System

I developed a design system for which is applied throughout the Serving Fresh App and customer facing Website. As we learn more about our customers and update the UI, the system evolves simultaneously. 

All assets_2x.png

Present Design

As of October 2021, this is what the screens look like. 

Once they have selected their produce, they can easily checkout and make final changes on the 'Cart' page. There is a 'Refunds' page if there is anything wrong with the order.Once they have selected their produce, they can easily checkout and make final changes on the 'Cart' page. There is a 'Refunds' page if there is anything wrong with the order.

Discount Coupons are applied automatically to the eligible order. This also makes it easy for the user to view purchase / discount relationship.

After receiving their orders, consumers can rate their experience and quality of the produce they received. This helps the company get direct feedback and improvise. 

Group 372_2x.png

The first thing after getting into the app is for the user to select a delivery date - the position on the top is to prioritize that action. 

Home – 3_2x_2x.png

Latest Home Page

In the past year, we've have updated the page to make it SEO friendly. 

We got feedback from users and the marketing team to incorporate visuals for delivery areas. 

We also highlighted the policy of No Minimums and No Subscriptions which sets us apart from our competitors. 

Responsive Design and Development

During this project, I learned how tedious is the process of creating responsive websites from the ground up. 

Web-based Admin Dashboard

I worked directly with the business owner (in this case, my boss and product manager) to understand what how he manages the business and what features and insights would help him run the business more efficiently. 

instagram - SF_2x.png

Marketing Collateral

As a sole designer, I regularly design marketing collateral for the brand. This includes posts and animations for social media, print media designs as well as merchandise designs. I design and manage weekly newsletter via MailChimp.