Responsive design of a farm box web app
I had the opportunity to refine my visual and interface design skills in my master’s program course, Interaction Design Studio, at Carnegie Mellon University. In this project, I was working with three other designers to design and prototype a responsive web app of a subscription service to a “farmer’s market box,” which we refer to as a “farm box.” I led the creation of the overall design language, and the interaction designs of the mobile app.
Tools & Methods
Tools
Figma
‍
Methods
Rapid Research
Customer Journey Map
Sketching
Wireframing
User Flows
Visual Design System
Interaction Design
Digital farm boxes aren’t flexible or personable enough. How might we create a digital farm share box that emulates the values of an in-person experience?
Design a digital farm box experience with personal touches, like you would get in an in-person experience.
Landing page of the Locally Farm Box website shares recommendations from farmers and general categories of produce.
Product details page has personal touches from the growers, such as recipes and sourced farms.
The Locally Farm Box website includes farm profiles, which adds a personal touch for users to connect with growers.
The Locally Farm Box website includes recipes recommended by the growers themselves.
Giving farm box services a personal, natural, and an aesthetic design.
Table of Contents
Context
Rapid Research
Wireframing
Design Language
User Interface Design
Reflection
What is Locally?
Locally is a weekly subscription service to a “farmer’s market box,” which we refer to as a “farm box.” It is designed for a responsive website, and focuses on addressing gaps between in-person experiences to digital.
Main contributions
I contributed to my team across the entire project from research to sketches to the final pitch. My main personal contributions were the design language, and high-fidelity interfaces, and the branding logo.
Digital farm boxes lack touchpoints that you would get in an in-person farmers market.
The touchpoints include moments to get transparency on produce options, connection with farmers, discoverability of unique in-season food, and relaxing feel of an in-person farmers market.
3 Rapid research interviews
2 Customer journey maps
Rapid research findings
We conducted user research with the rapid research approach, using directed storytelling and customer journey maps. Participants included locals who frequent farmers markets in the Pittsburgh area, as well as a subscriber to a fish co-op. We synthesized our findings into one combined customer journey map that captures the key points in our interviewees’ experiences.
‍
Design insights
- Discoverability: A unique value of farmers markets is to buy and discovery in-season food.
- Transparency: People compare quality/price and shop with a recipe in mind.
- Connection: People prefer to build a relationship with farmers and producers.
- Enjoyability: Farmers market shopping is fun and relaxing for users.
Customer journey map of an interviewee and their experience with in-person farm boxes.
Our proposed service
In our proposed service, we address the design insights (user needs) found in our rapid research. Locally can fulfill user needs for discovering high quality food, transparency for the pricing of affordable fresh food, while connecting consumers and farmers.
Proposed customer journey map of a digital farm share box, Locally.
Translating design insights into features.
I created sketches to create user flows, which turned to wireframes after my team  tested with a few participants in our class.
3 Testing sessions
3 total iterations
Low to mid-fidelity sketches and wireframes
Three main tasks were designed for testing:
- Add a honeycrisp apple to your box
- Learn how to use the apple in recipes
- Learn about the farmers who produced it
Low-fidelity sketches and wireframes.
Giving farm box services a personal, natural, and an aesthetic design.
The last ingredient in the farmers market experience is enjoyability, as found in rapid research. I wanted to emulate that into a design that was personable and friendly.
Picking the right colors and typeface
For the color scheme, I selected greens, orange, and a brown to emulate an organic, natural feel.
As for the typeface, I selected Arvo for a friendly, farm-like look. It is used in other designs, such as Animal Crossing (Nintendo game), that takes place in an island forest.
Color scheme and typography of Locally.
Branding logo
I designed the logo focusing on the motif of an apple. It represents what many shoppers would assosicate with a farmers market and fresh produce.
I also shaped the apple into a cubic form for a couple of resasons. The first is because of the words, “farm box,” that reminded me of a box shape. Also, it was intended to show a modern, technological feel as the farm box experience is digitized.
Sketches and final version of the Locally logo.
Improving enjoyability and usability with interaction designs and UI design.
Interactions and animations were added to support the visual design, assisting the user to intuitively use Locally.
Adding interactions
During the prototyping process in Figma, animations and interactions were intentionally added. This helps usability, as noted in Jakob Nielsen’s 10 usability heuristics. Details will be annotated in this section.
UI Walkthrough video (YouTube):
https://youtu.be/6UfzWZdqyaE
Video of the Locally demo for mobile. (Clicking on the video will jump to YouTube.)
Home page interface.
Product details page interface.
Recipe card interface.
Farmer profile page interface.
Farm box card interface.
Defending design decisions with user needs
Through the project, my team and I often referred back to our research insights to determine our goals and design ideas. Using research as our source of truth was a major factor in helping the team make faster decisions.
‍
This also applied to our high visual fidelity mockups. Defending my decisions for the design system came from our research findings about need for enjoyability and connection. I designed the visuals for Locally especially with those things in mind. In the future, I will know to keep my research documents handy throughout the design process.
