splitcart - a grocery-splitting app.

a mobile app designed for grocery bill splitting/managing and grocery budget tracking, targeted towards university students and roommates.

sneak peak of the mockups

role.

uiux design
visual design

timeline.

november 2021

tools.

figma
user personas
wireframing
prototyping

the vision.

often times, we grocery shop with our friends or roommates, and doing the caculations to split the cost could potentially become a hassle when there are a bunch of different factors to consider. this is the goal of splitcart, to make grocery bill splitting simple and convinient.


in addition, groceries are a major part of the average person's budget. so, splitcart can also act as a simple grocery budget tracker that saves that data of the past grocery runs once entered.

user personas.

primary user:
Joey Zhou is a 21 year old university student who's living with her 4 other roommates at school. every week, she goes on a grocery run, but she always finds that it's a hassle to split the cost with her roommates considering there's always different factors to weigh in. so, she's looking for a simple app that can help her and her roommates split the cost of their groceries however they want.


secondary user:
Ben Parker is a 25 year old who just graduated university and is living with his friend. now, he's faced with the responsibility of managing his budget and spending. groceries are a large part of Ben's monthly budget, so he is looking for a product that can track his spending on groceries over a period of time.

to build an app that would satisfy the users, we need a design a simple, easy to nagivate UI.

solution approach.

to create a product that would satisfy both the primary and secondary personas, we created the following requirements for our minimum viable product. the product should:

  1. allow users to invite their roommates/friends to a "party" of however many people is desired
  2. a feature that allows the users to add the total grocery bill for a grocery run, and they can choose however they like to split to cost (with different options such as to split evenly, in percentages, etc.). the app will then calculate the costs accordingly
  3. a feature that allows users to save their past grocery runs' data for future reference. this acts as a grocery budgeter that displays the total amount spent on groceries within the past month both as a group as well as individually

wireframe.

to start visualizing what the app should look like, i drew a hand-sketched wireframe with the main features.


a rough sketch of the SplitCart App screens
here is the hand sketched wireframe

prototype.

once i finished the wireframe, i headed to figma to create a prototype.

this prototype is still in progress :) check back soon for updates!