SmartShop Mobile App

tags: interactive



Learn about the project parameters, milestones, and goals

The ultimate goal of these series of projects was to practice different techniques of rapid prototyping and create unfinished productions. I appreciate the very hands-on, fast-paced structure of this project to get us thinking about digital product design, prototyping, and user testing. Some of the skills we worked on during this project were:

  • Sketching taskflows
  • Liner prototypes (AfterEffects)
  • Paper prototypes
  • Pitch presentation
  • Non-linear prototypes for user testing (HTML/CSS)

I also happen to like my idea for a product and would love to see it come to fruition some day! You can read more in my ‘pitch presentation’ section, but basically SmartShop is a tool to help you get important information on the foods you eat by helping you create brand-specific recommendations on your grocery list so you can shop with confidence. This could be anything from buying food according to your allergies to knowing about which foods contact chemicals banned in other countries. I imagined it as a judgmental platform for learning about your food since, especially in the United States compared to Western European countries, it’s up to us to make decisions on what is an is not safe to eat.


Presenting our paper prototypes during class. 

Creating a task flow an activity and see where the key decision points are

Create a prototype for application based rooted around an everyday task. Through first analyzing a simple task flow we could look at specific points of decision making and potential room where an app could help us.

I thought this was a great exercise for finding a way to approach problems. By looking at the step-by-step process of an activity it’s easier to see the problems you didn’t expect. I chose to analyze my decision-making process while shopping:

(Click to enlarge)

My alternate idea was something to do with recycling because I have several roommates and there is a lot of confusion over what is and is not recyclable.


Considering the sequence of actions, what does the user need to see and when?

I thought about some of the features that I would like on to see on the SmartShop–I couldn’t help it! For instance, I thought it would be neat if it had the ability for users to upload a list from another application (since many people already have their own list-making apps), and for you to save different list (sometimes you can only get one item in a certain store).

When you first upload a list it’s generic (middle figure), then, with the help of SmartShop you can make your list more precise by finding recommended products by brand and make a fully informed choice.

The end goal of the first task I explored was for people to have a brand-specific grocery list of foods they felt confident in purchasing.

List sequence (partial):



Equally important was the kind of things that would show on a product page that I thought would help users make decision on what to buy. This provided an opportunity for users to know the good and the bad about the product, and why products got the flags they did.


But I also considered things like filtration levels so that people who weren’t that concerned with they food could have lower alerts that people who really wanted to know as much as possible about their food. (The specifics of my idea will be discussed in the next section.)

Quickly sketch your idea with enough fidelity to present to others

After a few rough drawings, I moved to a computer because it’s so much faster for me. We had met in groups to discuss our ideas, but it was difficult to get my idea across, making mockups for the application really helped.

What I tried to convey was that it wasn’t trying to push you in a certain direction towards or away from food, but that it would give you health information on the products to let your make your own decisions. The filtration levels were meant to assist you with that: ‘low’ for the casual shopper and higher for the very food conscious.

This is an online version of my pitch I put together for my website. The original pitch was a powerpoint with some embedded video that I timed with my explanation:

Create a non-linear prototype for people to test. What’s working and what can be improved?

We created a simple errand for users to test one part of our application. I chose how people favorite and add things to their grocery list. One method was the one I showed on my original pitch where you tap an icon and the second method would be to swipe to ‘like’ and swipe more to ‘favorite.’ I created my user test with HTML, CSS, and jQuery.

The results of user test were that people perfect the traditional click-to-like/add function better than the swipe to favorite/add. This make sense since swiping list items is still becoming more frequently used, but I was was hopeful!

Screens used during user study: The left is the traditional click-to-like and the right is the swipe to like (shown in mid-swipe).


Screens participants saw:


What did you learn and what did you do?

It was really neat to go through the process of idea to user testing to product (kind of).  I really felt strongly about my idea as a way to help people make more informed choices when they’re purchasing food.

My head is still filled with ideas for all the things SmartShop could do and of course I would love to see it come to life some day.