Let's build a system from an existing brand, and then put it to the test.

You will design a new tool for a small coffee chain warehouse. Your solution will help a warehouse worker reconcile a putative inventory quantity with actual in-person inventory in a physical location. You'll get assigned an existing coffee brand to work with, but many specific functional details will be mandated here.

Victoria Neeser

Fearless Inventory

Project Information

Your Client

Your client is the Operations Director for a growing chain of 30 coffeeshops. Here's her request to you:

We need help! I've got a fancy ordering system that lets my local store managers order stuff from my central warehouse - nonperishable stuff like plates, cups, aprons, brand merch, and even tea. The system keeps track of their orders, and subtracts it from the inventory count at my central warehouse. That system tells me what I should have remaining in stock at the warehouse, but that doesn't always match up with reality.

I'm not going to ask my retail team to mess with this - I just want a system where the warehouse team can count up what we have, and then that generate some kind of report to me.

Project Information

Deliverables

We'll go step-by-step through specific design deliverables that get us closer to an interactive system to solve our client's problem. We'll discuss each deliverable before we start, but this will include:

Brand Research and Design System audit, Building a lightweight design system, User Stories, Wireframes, Prototypes, Guerrilla User Testing, Some other requirements:

We'll be designing and testing for mobile devices. Figure out the proportions of your phone. We need to represent this actual inventory reference. We'll need to fullfil THIS set of User Stories that we define together. We'll be working collaboratively for a lot of this project. Get used to the idea!

Don't get too attached to any one deliverable.

Session 1:

Introduction & Ideation

Homework: Start researching your brand. Check their website, stalk their social media, download their app. Start a new figma file and collect as many examples of UI elements as you can. Make a color palette based on what you can see the brand already using. Don't design anything yet, this is just research. This should include: What colors do they use? What type (families and hierarchy)? What do buttons look like (and do they have alternate states)? what about online forms? elements? navigation? Does anything have motion? etc. etc.

Session 4:

Review brand application.

Homework: make a design system doc, based on what you learned. Use elements from your prototype. NOW feel free to update and enhance, but remember you're trying to fit the brand you see.

AND: add flows and designs to support the Ops Manager stories. If you're building your design elements, you can do this in a 'styled' prototype or stick to wireframes if that helps you solve for UX problems.

Session 3:

Prototypes, Testing, & Design System thoughts

Homework: Guerrilla user testing with counting method. Test with 5 people. Document it. Write observations on what could/should change based on user testing.

When?

On Friday

Where?

Neighbor Shot party

(Made sure to go early before it was crowded)

Who?

Two were neighbor’s boyfriends

Three random college aged people

What did you learn?

I learned that some people wanted to count and then use the app and then others used the app as they went. Some wanted to tap import number than use the + and -. I also realized that scale could be adjusted like the + and - buttons.

Asees

Wanted a picture of the item

The item section itself needs to be bigger

Jamal

The + and – buttons need to be a lot larger

He kept clicking the wrong one because they were too close together

Hanna

Suggested adding a scan barcode feature using the camera

Alex

He wants the timer to automatically start

Henry

Asked if supplies could be split up into smaller subgroups because he feels like the list feels too long

Session 2:

Design Audit Review

Homework: Make wireframes from stories. KEEP THEM WIREFRAME-Y, do not style this yet. The result should be indistinguishable from any coffee chain.

Session 3:

SWAP Brands w/ Classmate!

Test Reports. Starting some visual styling.

Homework: Take a first pass at styling your prototype with your new brand, and FORCE yourself to use elements from your inherited brand research doc. Don’t add or enhance, just try to use the inherited brand strictly. Our goal is to discuss on Thursday: what worked? what didn't? What's broken or missing?

Session 5:

Final Deliverables