Car2Cart
— ROLE
UI Designer
UX Researcher
— TOOLS
Figma
Balsamiq
— TIMEFRAME
Sept – Dec 2019
— TEAM
Shimona Agarwal
Jake Hogge
Yaoyao Ma
An Ithaca-based grocery ride-share app concept developed using the Human Computer Interaction design cycle.
We used a plethora of HCI techniques to reach this final state, including creating personas, paper prototyping, heuristic evaluation, Balsamiq wireframing, and user experience research. This UX research, or user testing, included writing user experience research session scripts, consent forms and as well as participating in multiple user experience testing sessions as the facilitator and note taker. Each member of the team was expected to act as a UI/ UX designer and researcher, gaining insight into each role through hands-on experience in creating a completely original prototype.
Background
We created this concept for the capstone project of Cornell University’s INFO 3450: Human-Computer Interaction class, where each team was tasked with finding a real-world problem and then designing a solution for that problem. My team chose to tackle food accessibility for college students. Our goal is to help Cornell undergraduate students operating on budgets find affordable food options on and around campus. We want to ultimately provide equal access to affordable food in Ithaca that fits the needs of anyone who has dietary restrictions or preferences.
The Final Product
The HCI Design Cycle
This project taught all students how to engage with the Human Computer Interaction, or HCI, design cycle, which consists of four different steps: understanding potential users, designing, implementing, and evaluating that implementation. Though we were taught that in real-world scenarios one would continue to cycle between implementing and evaluating, we only were able to complete one extra cycle of implementation after evaluation due to time constraints. That being said, the return to the implementing stage allowed us to gain insight on how to continue that cycle in real-world scenarios. Below, I will describe our journey through each step of the cycle.
0. Project Definition
Problem Statement:
Undergraduate students at Cornell want to buy affordable and healthy food from local grocery stores, but they cannot do this well because of the long and unworthy public transportation time and costs in Ithaca.
Proposed Solution:
Car2Cart is a mobile app for Cornell students to ride-share with peers who have cars to go to nearby grocery stores, so that they would be able to purchase healthy food at a more affordable cost with a minimal fee to the host driver.
1. Understand Users
Goal:
We want to find out more information about the students at Cornell who have struggled or are currently struggling to consistently feed themselves while on campus for any reason, and better understand their needs and the pitfalls they may run into on a daily basis.
Recruiting Participants:
We reached out to current undergraduate students at Cornell who have struggles with food in different ways. Some participants were recommended by friends, while others came from a Facebook posting.
Sample Interview Questions:
Do you follow a meal budget?
What makes you want to cook more vs. eat out more?
Can you describe a normal (breakfast/ lunch/ dinner) meal for you on a school day?
Are you able to eat your favorite food on campus often?
Do you pay attention to making healthy choices when you’re buying food?
Is transportation a factor affecting you to get certain food?
Do you have any dietary restrictions that prevents you from eating certain foods?
Do you feel informed about the food options on campus?
Affinity Diagram:
Why They Don’t Like the Meal Plan
Cost: Students are paying for expensive swipes that they aren’t able to use up. Also, it is cheaper to either buy the food with cash or make their own food.
Waste: Many students often end up accidentally missing a meal due to work or other related activities.
Informed about Options
Students are well-informed about the eating options in buildings that they have classes in or go to often on campus. However some of them did point out they didn’t know about options in places they don’t go to often.
Health
“I was hospitalized earlier by an incident at the dining hall in which a dessert item was cross contaminated with nuts, and was mislabeled when put out for consumption.”
“I’m conscious of most food labels and most sweets and breads are risky for me.”
Transportation
Students without direct access to a car are struggling to cook because traveling to grocery stores like Wegman’s using the bus system is an arduous process.
Budgeting
Many students do not have set budgets that they adhere to.
With our user research data, we managed to construct a user persona to help conceptualize our design orientation:
This graphic, created by teammate Yaoyao, shows an overview of the persona we used as an axis for design. In our initial creation of this persona, we defined life, experience, and end goals, as well as behavioral context for actions this persona would take on any given day.
We then defined functional and contextual requirements for the platform.
Functional:
Transportation - Connect people with short-distance rides to local grocery stores.
Description: Users can schedule rides for free by putting in specific information like time and destination to be matched with other users driving to local grocery stores.
Rationale: There are many students who find it hard to go for affordable and healthy grocery shopping because of limits in transportation methods. Some individuals said it took too much time to take the bus when they do not own a car.
Contextual:
Location - A student can only walk so far with groceries.
Description: Many students live on or near campus, so their grocery options need to be within their general location, unless they are given a ride to the store by a friend.
Rationale: Offering options for groceries across Ithaca could be problematic for students such as Jane without the means to get there and back.Device/ Platform - Which will best serve our users needs?
Description: This product should be able to be displayed on a mobile platform since users will want to check the status of their trip on the go.
Rationale: All interviewees have and frequently use smartphones.
2. Design
Market Research:
Before we started on our own design, we needed to do some market research on existing solutions. Here is what influenced our design process:
There have been solutions like the free food group-chat on GroupMe that crowdsources locations of food giveaways on campus, the Eatery app made by Cornell’s own AppDev displaying pertinent Cornell Dining information, multiple Cornell-affiliated Cornell Dining sites serving a similar purpose to the Eatery app, and review websites like Yelp allowing users to post reviews of restaurants and other establishments.
There is the MyShopperApp which helps create shopping lists and save or share them, as well as finding deals when shopping or making lists. But it does not help with access to the transportation, which seems to be the issue according to our data.
There is also Instacart, an app that allows grocery delivery, however this is steep to afford for most college age students, much less food insecure ones.
In terms of transportation, there is GrubHub for food delivery and GoogleMaps for directions and information. GoogleMaps is a great tool for navigation but doesn’t help with access to it, and GrubHub is not a permanent solution for a food insecure student due to its extra costs.
Finally, we have options like Uber and Lyft in the transportation space. That being said, neither app allows for scheduling round trips with the same driver, and each is extremely expensive to use.
Many existing platforms require a paid subscription for use past a short trial period. This poses unnecessary financial stress for those who are already financially unstable. Additionally, many of these apps are designed for adults with consistent outcomes, and exhibit biases based on that. Google Sheets functions similarly to the physical book as it is more freeform and relies on external motivation and knowledge of what is necessary to budget, but in a digital form similar to an app.
The void we identified in this area of the solution space is a lack of access to direct, convenient transportation to and from grocery stores.
Initial Design Intention Statement:
Car2Cart is an Ithaca-based ride-share service in which students who drive themselves to local grocery stores can post the destination, time, and how much space they have for the ride they want to provide on our app when they want company for grocery shopping. Students who need a ride to grocery stores can enter their preferred grocery store destination and time to search for any available rides. What differentiates us from any other ride-sharing service is that we focus beyond the goal of sharing rides, but rather the purpose of solving the food inequity issue on Cornell’s campus from two crucial pain points, cost and time.
Paper Prototype and Storyboarding:
We used these rudimentary prototypes to conduct a user testing session with four recruited prospective users. That session involved a note taker, facilitator, and a “Wizard of Oz”, who was in charge of managing all paper attributes and act as the computer mechanisms by changing the state of the app based on user interaction.
Here’s what we found to improve upon:
Clearly label navigation icons.
Include more specific ride information such as the vehicle used.
Clarify the intention for some text-based form elements.
3. Implement
Balsamiq Prototype:
We were able to address all of the concerns raised about our paper prototype’s design in our mid-fidelity prototype, made in Balsamiq. This allowed us to contextualize and generally even out the app’s layout and scaling. It also allowed us to fine-tune our interactivity and directly test our product as an experience.
Home, Search and Confirm Ride
Post Ride, Current Ride Status, and Navigation
Messaging, Cancelling Ride, and Profile
Heuristic Evaluation:
Initial Figma Prototype:
4. Evaluate
Usability Testing:
After conducting usability testing sessions with 4 different users, we found:
Navigation icons are difficult to understand, especially with no labeling.
Single and Multi Pickup icons are difficult to understand.
My Rides Page is cluttered with extraneous information from past rides and could also include a map for the current ride.
5. Return to Implement
Implementation Changes:
A spacial visualization of the prototype’s architecture:
Presenting our idea:
Poster used in final presentation. Designed by me.
Team pictured from left to right: Shimona, Yaoyao, myself and Jake.
