Designing a CSA food app in 3 days — a UX case study
A couple of weeks back I was tasked with designing a digital solution for the food industry. Now here’s the catch: it had to be done in less than three days. If you are familiar with GV’s Design Sprint then you understand this is actually possible. I found this a great opportunity to document a step-by-step guide to designing an app in just 24 business hours. In this article I will break down my process and the design phases for each day.
Background
Common Food is a farm that uses Community Supported Agriculture (CSA) to sell their vegetables and fruits. They sell shares of their farm that people pre-pay for at the beginning of the year. Each week during the growing season community members receive a box of food.
Challenge
Design a digital experience that will help Common Food Farm sell its extra food each week to its shareholders. Help the shareholders find extra food considering their varying knowledge, interest and dietary constraints.
Day 1: Learn
Research Methods
The research phase tends to take up some time so any existing information I have at hand is a great way to save time. Marketing material, competitors, user surveys or if it’s an existing app reading user reviews in the app store so I start getting in that user mindset early on.
Surveys
Common Food surveys their shareholders at the end of every season to better understand them. Here is some of this year’s feedback
“I LOVE cooking and canning. Love it! Can I get some more of those heirloom tomatoes?!”
“What is kohlrabi? I just threw it away. The lettuce was great though.”
“My son is allergic to broccoli so we never use that. I don’t know what to do with the garlic scapes.”
“I wish I had more kohlrabi! I like to turn it into kimchi.”
“ I keep telling you — we have to get more CSAs out there! Big Farm is not stopping. Everywhere I look I see more genetically modified monster crops! We need to support getting this out to the people …. (continues) ….”
“Is there a way we could get more beets?”
“I’ve never heard of bok choi before. It looks pretty but I am not sure how to cook it.”
A new report from Field Agent finds that produce is a popular category for online grocery shoppers in both planned and unplanned purchases. Sixty-five percent of the consumers surveyed said they bought fresh produce, making it the top choice along with chilled dairy products. Thirty-one percent said they bought fresh fruits and vegetables on impulse, beating out snacks (23%) and candy (14%). However, 39% of digital shoppers didn’t buy fresh produce online because they prefer to inspect it in person. Source: Grocery Dive
Market Research
Although consumers are increasingly turning online to buy groceries, just one in 10 Americans buy fresh produce, meat, poultry and fish through e-commerce, market research company Mintel found. To counteract consumer hesitation and improve sales, grocers should promote cost savings and provide in-depth product information to build trust and convey quality, the research suggests. Also reordering options like Amazon’s “Subscribe and Save” are an appealing feature to busy consumers, especially women (48%) who are more likely than men (37%) to make online food or drink purchases. Source: Grocery Dive
How Might We’s (Brainstorming)
How might we reduce waste and allocate foods by collecting data from our shareholders?
How might we sell extra food each week through seasonal recipes and promotions?
How might we help the shareholders find extra food based on their dietary preferences?
User Personas
The results from the user survey provided sufficient information to create user personas. I opted for creating age and gender agnostic personas to focus on achieving user goals equally regardless of age and gender.
Comparable Problem
Once I am ready to enter the sketching phase I research a similar problem and solution that exists in similar industries or from direct competitors to identify best practices.
Box size and content variety
FarmBox Direct and Farm Fresh to you offer different box sizes and different produce options.
Customize box content
FarmFresh to you lets you customize your box, add or remove produce and set quantity of an item. You must pay for your box before you can customize it. You can also create lists for items to exclude.
Authentic Photography
Farmstead lets you add as many items as you wish to your box (as its not subscription based) you can add, remove and browse items than checkout once you are fully satisfied. Farmstead offers authentic fresh photography of produce unlike the other competitors who use stock photos.
Approach
My approach is to design an app to collect data from shareholders, such as household size, dietary preferences and constraints in order to recommend seasonal food crates that shareholders can easily customize. Using Artificial intelligence to learn about the food habits of shareholders to provide recipes, food suggestions and targeted promotions to help find and sell extra food. Test which combinations are the best for a specific dietary preference and make suggestions. This received data helps to get feedback from shareholders we can then find out what type of produce or combinations users keep reordering and what produce they actually like the most during what season.
Day 2: Sketch and Design
I like to start sketching right of the back as soon as I feel I kind of “get it”, I sketch a lot I like to get all the bad ideas out of the way and keep what works best. I map out the journey and from there I define user, task, and goal specific journeys.
User Journey
Having settled my user personas, comparable problem, and initial sketches. I set forth to design a journey for an existing shareholders who already subscribed to the service and is placing an order for the first time through the mobile app, hence we already have the user’s schedule, shipping and billing information in our database. Once all this is done I’m ready to start wireframing.
Wireframes
Wireframes are a skeleton view of the app or as I like to call it the bones this allows me to focus on key functions, elements, and actions before starting on visual design or putting on some skin. I opted for High-Fidelity wireframes this way I just have to splash on some color and place images and icons.
Visual References
After wireframing I look for visual references within the industry for my moodboard.
Color Scheme
I went for a bright red color scheme. Bright colors create appetite and red is also a color that triggers shopping (Sales, promos, clearance etc.)
Typography
Iconography
When it comes to icons and saving I time I don't recommended drawing them out. As much as I enjoy illustrating my own icons time is not on my side right now. I recommended an icon library like Material Design icons or as I used for this app The Noun Project. However, The Noun Project requires a subscription to be able to fully customize their icons if you don’t purchase a subscription you must give the author attribution.
Logotype
I wanted an obvious name but also a significant logo so FarmCrate was the best choice for the name once I thought of that I though a crate as a logo and soon after some iterations I came up with combining a farm and a crate.
Design Variations
I like to try out different styles and design variations I try not to settle for the first option and iterate until I find a common ground in my design.
Day 3: Prototype
On the third day I finished up the final designs and I started to prototype. I preferred to wait until this stage mainly because if I start prototyping during the wireframing phase although they are Hi-Fi (and I often do this) a lot of time is spent on interaction screens. For this project I added the interaction screens, hover actions, screen overlays, and pressed buttons after the design was finalized to save time.
Final Designs
Auto-animate
I used Adobe XD for prototyping thanks to the auto-animate feature I now have a fully functional prototype. This is a great way to save time on interactions instead of spending a couple of hours on After Effects I just selected the auto-animate option on XD.
Next Steps
Usability Testing
Test the prototype with actual users. My personal favorite for usability testing on prototypes is Maze.Design it’s easy to use and offers comprehensive data on your prototype.
Iterate
Take the findings from the usability test and iterate upon the design also improve the user flow.
Conclusion
There is no space for distractions on limited timelines you have to stay focused on the project and organize yourself. I timed myself and set limits for how much time I would spend on a given task. I tried to keep it as simple as possible, starting from the sketches and the user journey then everything just fell into place.
Final Thoughts
Always trust your instinct and don’t be afraid to tweak your design here and there. If you compare my wireframes to the final design I made design choices to improve the final design and boy did they improve. Also use a software you are familiar with, you know the shortcuts and don’t have to spend much time figuring where things are.
