UX + UI DESIGN

Context

This was part of an individual school project for my mobile design class. The brief's theme was  "design for community."

The Problem

Backyard gardeners have excess produce going to waste while conscious shoppers are looking to buy locally-grown food. The community needed a platform to connect growers with people interested in getting the freshest produce in their neighborhood—at an amazing price. 

Solution

A mobile app that makes it easy to find, share, buy, and sell locally-grown produce. The app connects local farmers and gardeners with people looking for healthy, affordable, and fresh fruits and vegetables.

about.png
trust.png

Gain trust though reviews

 

contribute.png

Contribute to the community 

alerts.png

Get product availability alerts

 


Research

User Interviews

On approaching this problem, it was important to gain a better understanding of farming practices, backyard gardening, and grocery shopping habits in general. I was able to speak in depth with 7 people who shared their experiences with both buying and selling produce. 

User Stories

The combination of interviews and secondary research helped me identify 4 potential users:

  1. Roland, a backyard gardener who has a surplus of ripe produce and doesn't want it go to waste.
  2. John, a local farmer who wants to increase sales by setting up an online storefront.
  3. Sabre, a mother looking to save money on groceries while still feeding her family high-quality organic produce.
  4. Teresa, is a conscious shopper looking to reduce her environmental impact by consuming eco-friendly farming practices. 
personas.png

User Scenarios

Using my user stories, I created a scenario for each to start ideating around I might solve for each of their needs. I then identified key paths of their user journey and mapped out the flow of user steps. Some of the flows I explored included: 

  1. Discover produce
  2. List an Item to Sell
  3. Edit profile
  4. Ask a seller a question
  5. Send or request money
IMG_7900 2.JPG

Mapping the Journey

After scenarios, I “zoomed out” to observe the whole picture. The site map allowed me to design a fluid and intuitive way of navigating the app's content. 

 
 

Design Phase

Sketches

For the design process I first started with sketching and then gradually moved up, creating lo-fi wireframes to hi-fi prototypes. Initially, I didn't focus on creating pixel perfect designs as they would change after getting feedback. 

Wireframes

 Tools: Balsamiq

Tools: Balsamiq

Usability Testing

I used Invision to create a prototype that could communicate the service as it would be as if it was running like a real app. I tested 7 different paths of the customer journey including:

  • purchase an item using the app
  • ask a seller a question
  • write a review
  • change payment methods
  • list an item to sell
  • view purchase history
  • subscribe to a seller

By observing them complete these tasks I was able to uncover things that were confusing, unclear, or needed to be changed. 

 Ask seller a question 

Ask seller a question 

 List an item to sell

List an item to sell

Feedback + Iterations

As the tests validated or disproved many initial hypotheses, I continued to iterate on the designs. By the end of this process, the app had changed drastically. Through each iteration I honed my visual design skills and learned a lot about information architecture, hierarchy, and typography.  

iterations.png

FINAL TOUCHES

For fun, I decided to go all out and create a logo and app icon. The main design concept was to connect the name of the app “Ripe Here” with the icon. A location pin icon combined with a fruit is used to convey the close proximity of ripe produce.

branding.png

 

Reflection

This project was also great practice in building effective UI. I was able dive deep into the peculiarities of mobile applications and learn each UI element's functionality. 

 

Next project