ShopSmart: App Prototype

TIMELINE: November 2023

PROJECT TYPE: Class project

SKILLS: Figma, sketching, filmmaking (directing, acting, & editing)

Project brief:

Identify a problem and invent a solution to that problem.

To identify a problem, make a list of “bugs” - little things that people encounter throughout their days that are irritating/poorly designed. Choose one and come up with a solution.

Present your problem and solution in a < 90s video.

IDEA:

Grocery shopping always takes me a while, because I’m not very good at navigating the aisles, so I built a prototype for an app to help people like me. The app allows users to type in their grocery list throughout the week, and then uses this list to map the most efficient path through the grocery store for their upcoming shopping trip. I call it ShopSmart.

Step 1: BRAINSTORM

First, I spent a few days brainstorming and interviewing friends and family to compile a quick list of 50 things that ‘bug’ me (and others around me).

Here is my complete bug list:

Step 2: research & ideate

I then narrowed it down to 2 bugs that I wanted to focus on: bug #46 - when paintings don’t hang straight, and bug #7 - when hot coffee gets cold too fast.

I researched existing solutions to these bugs, critiqued these solutions and came up with some solutions of my own:

Then suddenly, I had an idea, and decided to scrap both these bug solutions and instead address bug #25 - grocery lists not being in aisle-location order.

Step 4: USER TESTING/prototyping phase II

I had 5 users test my prototype and updated it based on their feedback.

My second prototype was more functional (all the buttons worked) and much more aesthetically pleasing (users did not like the graphics in my initial prototype). I built a real homescreen for users to browse through products to add to their shopping list, like an online shopping experience.

I also focused on branding in this iteration: creating a logo and a style guide/cohesive color scheme for the app.

ShopSmart Logo (above) & Homepage (right)

Step 5: video pitch

I created a video to introduce my problem: grocery stores being difficult to navigate, and pitch my solution: ShopSmart.

First, I sketched a storyboard —>

Then I wrote, filmed, directed, and starred in a 73 second short film to introduce ShopSmart (below).

Step 3: PROTOTYPING PHASE I

When I called my family to ask about their bugs, my dad complained about how slowly he navigates grocery stores - he finds the organization unintuitive and gets frustrated by how long it takes him to grocery shop.

That gave me an idea for an app that takes your shopping list and maps the most efficient path through a grocery store (of your choosing) to collect all your list items. I decided to call the app ‘ShopSmart’.

I also drew a rough sketch of what the map would look like —>

I built a basic click-through prototype for my app in Figma: