Grocers Ride

Connect students through grocery shopping trips

Interaction Design, User Research

Problem: Provide easier access to grocery for students who are limited in their mobility.

To solve the above problem, this project focuses on providing a solution for students without a car to travel between grocery stores and university campus. Easy, convenient and free transportation to supermarkets helps busy and less privileged students who cook for themselves to save time and money, reducing their financial burden and academic stress by helping them improve their time management.

View Clickable Prototype

Solution Overview

For my design solution, I decided to focus on creating a mobile application that pairs students without a car (riders) and students who drive to grocery stores on a regular basis (drivers). Riders will get lifts to a grocery store of their choice for free. Drivers get companionship and feel more connected to other students and their community.

Homepage interactions Search for user interactions

Design Process

design process

User Research

Defining the problem

I began by examining my area of focus which was grocery shopping. After identifying several major pain points for students who want to buy grocery, I narrowed down my focus to transportation to and from grocery stores. Transportation is especially inconvenient for students attending universities situated in rural areas where grocery stores are located very far off-campus. To understand what is already being done, I did a competitive analysis of existing solutions in this specific area. This helped me understand what is lacking and what I wanted to emphasize in my design solution.

Competitive analysis of existing solutions

Competitive analysis of existing solutions


Personas are crucial in understanding the user base and narrowing down the focus to the target audience. I defined personas for students who are regular shoppers, students who are spontaneous shoppers, and students who frequently drive to grocery stores in their cars. I also had an anti-persona of a high-ranking executive. These personas aided me in concentrating on the needs of my major user group - tech-savvy students who seek cost-free rides and/or companionship for grocery shopping trips.

Three pro-personas and one anti-persona


Design Approaches

I considered several approaches including participatory design, reflective design and value sensitive design. Since my design solution would ideally forge a sense of community among students and foster values such as compassion and understanding towards students of different socioeconomic background, I chose value sensitive design to be my main approach to this problem.

Brainstorming & Sketching

Brainstorming with pen and paper allowed me the space to be as imaginative as possible when it came to potential solutions to the problem. I then chose eight unique solutions to sketch out on paper.

Eight unique solutions

Sketching eight unique solutions

These solutions formed the basis for my next phase of sketching. After branching out and brainstorming even more solutions, I further discovered a range of possible solutions such as starting a grocery club, joining a co-op house, and a wearable device for hitchhiking. For each of the eight refined solutions, I sketched out five workflows which conveyed how each solution approached the problem.

storyboards for eight solutions

Workflows for eight different solutions


The process of reflection allowed me to take a step back and analyze the solutions I came up with to see which one best solved my defined problem. Conducting interviews with my target users helped me understand their preferences, and ultimately, the most preferred solution was a mobile application that paired up students without a car and students driving to grocery stores on a regular basis. These interviews also helped to bring up some major points that I had overlooked, such as implementing security measures so that riders would feel safe, and providing incentives in the form of coupons to keep drivers on the app where they are giving out free rides.

Rapid Prototyping

Design Synthesis and Defense

In order to choose which features to implement, I used the QOC (Questions, Options, Criteria) method to help me understand the pros and cons of different options and the trade-offs amongst them. I identified the critical feature of my project and defined 3 different feature approaches with design rationales. The critical feature was connecting riders and drivers based on matching destinations, date and time. The criteria for connecting users was location and destinations. Proximity of two people's locations is important to minimize travel constraints. Identifying the critical feature helped me create different approaches and identify which one would work best.

Design rationale

Design Rationale & Synthesis

Paper Prototypes

To validate my research ideas and the initial design, I conducted a round of rapid prototyping and tested with users. The first iteration was rapid prototyping on paper. Using a paper prototype enabled me to run tests at low cost with my target audience.

Screens sketched out on paper for user testing

Screens sketched out on paper for user testing

After testing the prototype with users, I gathered immensely constructive feedback in testing the prototype and iterated on my design based on this. Some major takeaways included:

  • Users preferred to have a way to quickly switch between being a rider and a driver
  • Riders wanted to see more information about drivers' cars regarding car make, color and capacity
  • Adding back buttons where users might want to go back to a previous screen

Final Design

From the feedback I gathered during my two rounds of iterative paper prototyping, I used Sketch and inVision to develop a clickable high-fidelity prototype. I created the interactions for an Android application which helps connect riders and drivers for grocery shopping trips. This prototype went through many iterations where I constantly improved and simplified the interactions to keep the interface simple and intuitive.

Login and homepage

The home page shows the most popular grocery stores for quick navigation. It also shows the latest posts added by app users. The user may toggle among All, Drivers and Riders depending on whether she’s looking for a driver or a rider.

Login and homepage screens

View post and request a ride

From the list of posts, the user can click on a post by another user and see all the details such as date, time, car capacity, and additional information. She may decide to send a ride request to a driver, which will open up a chatline for them to continue chatting and make plans for the trip.

View post and request a ride screens

Search for a driver or rider

The user can use the search function to look up other users going to the same grocery store, and filter the search results by dates.

Search for a driver or rider screens

Create a post and monitor ride requests

After searching, if the user cannot find anyone going on the same date or the same grocery store, she may want to make a public post. After the user saves the post, the application will give recommendations to her to contact drivers who most match her preferences.

Create a post screens

Users can also look back on their confirmed ride requests, opened chat lines as well as pending requests. They can view the chats, negotiate, make changes and view driver’s profiles from here. Note that information regarding driver’s car is not shown to the rider until his ride request has been approved by the driver. Likewise, the phone line is only activated when the ride request has been approved.

Monitor ride requests screens

View or change account information

Users can see or alter their account settings. For drivers who have received coupons from giving out free rides, they can view their coupons here and redeem them at grocery stores.

View or change account information screens

Play with Prototype

Social Impact

The impact that Grocers Ride aims to make is a stronger sense of community and increased social interactions among students who might live far away from each other, and thus, provide an opportunity for students to make more friends.

Additionally, this app may also foster interactions among students of different economic standings and potentially increase compassion and sympathy towards those who belong to socio-economic groups different from one’s own.