Overview

Design an interactive user interface for a smart object

Table of Contents (+ Timeline):

1. Design (9/26/22)

   • Project Requirements & Set-up

   • Sketching - 10+10 method

     • For C-, B-, and A- goals

   • Interviewing

2. Implementation (10/14/2022)

   • Using HTML, CSS, JS, bootstrap and bootstrap studio

3. Documentation & Presentation (10/16/22 - 10/17/2022)

References:

1. Project 1 Release (build artifacts): https://github.com/keerthi-sekar/ui-design-class/releases/tag/project1

2. Source Code: https://github.com/keerthi-sekar/ui-design-class/tree/project1/Project1

Before reading the documentation, view the demo below to view the final project content!

Design

Project Planning

Assumptions

1. 1. The cart has the necessary hardware integrations to support the user interface

      • Sensor to identify contents in cart or barcode scanner

      • Internal clock

      • Receipt System (to print or digital)

Design Requirements

2. Shopping Cart Tablet will:

   1. Enable User to Shop "on the go" - When you place an item in the cart - it appears in a cart list (removed when the item is no longer in the cart)

   2. Track Users Shopping list - User can input their shopping list and then use it with their shopping experience

   3. Coupon section - link coupons automatically at checkout or digitally add coupons to your "shop as you go" functionality

Interview

Questions:

1. Around what day & time do you go to shop?

2. When you go shopping, what do you do beforehand?

3. What are some struggles you have when shopping in-person?

4. Do you find yourself buying more things than you expected?

5. What would make your shopping experience less stressful?

6. Is there anything you dislike about shopping?

Summarized Results:

Audience: Interviewed 3 family members (mom, dad, younger brother (in college))

1. Weekends mainly, but if have to go on weekdays - evenings

2. Check inventory at home and make a list or asks wife for the list

3. If it’s the same store but different location, its hard to find items - in general, finding items in the respective aisles takes a lot of times and can be frustrating

   1. Forgetting to add the digital coupons at checkout

4. Mom - sticks to list; Dad & brother - end up buying a lot more due to sales and clearances on attractive items

5. Larger signs, reminder to use digital coupons, more food samples

6. Dad & brother - feels like a chore don't like to shop; Mom - feels like purposeful exercise (so no, she enjoys it)

10+10 Sketching Method

1. A feature to enable the device on the smart shopping cart to help find the items from the shopping list

2. A feature to link coupons to cart list and/or checkout time as well

3. A feature to track users initial shopping list and items in the cart

The Finalized Initial Concepts were derived from the 3 design challenges done for the core features. Below the carousel are the 3 design challenge sketches documented.

User Feedback from Initial Concepts (C-goals):

1. Reorder the main menu to be the order the user needs to follow

2. Don't really need store catalog since you are inside the store already

3. Provide a tutorial page potentially to help first time users (image 1 in carousel)

Design Challenge 1

A feature to enable the device on the smart shopping cart to help find the items from the shopping list

Design Challenge 2

A feature to link coupons to cart list and/or checkout time as well

Design Challenge 3

A feature to track user's initial shopping list and items in the cart

Implementation