App concept joining retail with the independence of e-commerce


Human Factors, Industrial Engineering Department, UIUC

Tools: Sketch, user interviews, paper prototyping, usability evaluations

Project overview

Shoppie is a checkout app concept with a new system of security, where users scan QR codes of their items using their smartphone cameras and purchase items through the app. It blends the traditional brick-and-mortar shopping experience with the customer behavior and independence of e-commerce. Shoppie eliminates the need for waiting in long lines, reducing the workload on sales associates and giving consumers more control over their shopping.

Exploratory field trip to the mall

To explore the problem space, we took a field trip to the mall. We quickly ruled out stores like Macy's, where the experience is intentionally very customer-personnel-interaction-based. At Macy's, customers want help with purchasing items like jewelry, perfume, and makeup, and we were approached by eager sales associates almost everywhere.

However, at fast-fashion stores like Forever21, we noticed a younger generation and less of an interaction-based experience. We observed the conversation between cashier and shopper, and looked for inefficiences in the checkout process.

High-traffic fashion stores

These were our key takeaways:

  • Minimal conversation. Most of the customers were not interested in chatting with the cashier (apart from a simple “hello”).
  • Understaffed at the register. After a while, a line built up at the checkout counter since there was only one staff member at the register.
  • Several bottlenecks in the checkout process. Getting rid of the hanger and security tag on each garment seemed to take up a lot of time, especially as items increased.
  • Wait times of about 8-12 minutes. We saw two women leave the line, likely because it was too long.

User research and insights

To further understand customer needs, we conducted semi-structured interviews with young people about their checkout experience in retail stores. Our goal was to identify customer pain points and response toward self check-out. We asked questions such as...

  • What is your ideal checkout experience?
  • How important (on a scale from 1-10) is speed when you check out?
  • Tell us about an irritating checkout experience at a retail store.
  • Do you usually use self check-out at other stores? Why/why not?
  • If you could improve self check-out, what you would change?

Based on our interviews, people said that their ideal checkout experience was speedy, involved talking to staff as little as possible, and getting help from sales associates when needed. The interviewees reported an average importance of 9 (on a scale from 1-10) regarding speed in the checkout process. Overall, responses to self-checkout were positive.

Ideation phase

We mapped out the actions and thought process of the shopper in the following cognitive workflow diagram. This helped us identify specific points of confusion or inefficiency in a consumer's shopping experience, and opportunities for our app to address these issues.

Cognitive workflow analysis

Following some whiteboarding, we came up with some low-fidelity wireframes to represent the core user interactions of our app.

A few wireframes

We realized that a potential constraint for our project is the security tag that many clothing items have. After discussing several different solutions, we prototyped a magnetic security tag, which is linked to the item's QR code and its database entry. Once the QR code is scanned and the purchase is fulfilled through the app, the tag will demagnetize, automatically releasing the security restriction on the clothing.

Field testing

To observe real users reactions to our app early in the development process, we recruited random, unbiased participants in the student union. We presented them with our low-fidelity paper prototype and a simple scenario:

You're in a Forever21 store and just found a nice T-shirt—purchase it with our app.

We took note of where participants hesitated and asked follow-up questions about their experience—what they liked and where they saw room for improvement.

Field testing with low-fidelity paper prototype

We received great feedback overall, as well as some constructive criticism. such as idenfiying confusing symbol representations and extra options they wanted to have, especially during account setup. Based on our testing insights, we added important screens (such as “Purchase Complete”) and tutorial frames to help guide user onboarding.

App flow

To clarify the steps of our app and the different user interactions, we drafted the following user flow diagram. This helped map out possible actions and the user's shopping experience journey, ending with a purchase.

User flow

Final design

Following our user testing insights, I created a high-fidelity prototype of our app. We kept the design simple and straightforward, in order to represent our mission of a streamlined shopping experience.


While self-checkout for groceries is widely implemented, and there are new advances such as Amazon Go, designing for clothing stores presented a whole new set of considerations. We had to consider security (both within the app and the store) and how our app could integrate with retail chains to form successful, lasting business partnerships.

My contributions to the project were primarily prototyping and UX design. I also designed our exploratory research methods and created usability metrics for our app evaluations. In future iterations, we would add the option to save items and request help from sales associates, to further streamline the shopping experience.