Inventory at the Wine Shop

Matt Weaver
11 min readJan 17, 2021

An iOS app for Quarterly Inventories

Operating since 1976, K&L Wine Merchants finds the world’s best wines and offer them at the best prices around. They have three brick and mortar stores in California and a warehouse. Their main cash flow is derived from their website which caters to top wine collectors and sommeliers.

My Role

I was to provide user interface designs to help the developers with the production of an inventory application. I wanted to make sure I had good reasons behind my design and evangelized Design Thinking practices to help with my task.

Understanding the Problem

I was asked to help with their inventory application, which they had already started using designs created by our Front End Developer. I studied the existing designs and did a small interface inventory.

I wanted to understand the current design decisions that were being made by the team and product owners so I could understand the lay of land and make a game plan on how to move forward.

I found they were using as best as they could Apples Human Interface Guidelines to direct their design decisions. While also trying to reference company branding, creating design patterns that related to the companies website and following previously developed applications.

Initial Inventory Screens

My Game Plan

Understanding where the team was currently with the application my game planned formed more around design thinking. I planned to:

  1. Understand the business of the client and all the other applications that had already been created for them.
  2. Research and question the product owners about what they wanted out of the new application so I could hone in on their goals.
  3. Learn about the users and their behaviors that would drive how the application is used.
  4. Work with my team and their product owners to create user stories that would help guide the rest of the project.
  5. Ideate
  6. Prototype
  7. Test

One thing I’ve learned, as this was my first real project to work on, was that Design Thinking encompasses many practices and facets of UX Design, but it’s imperative to be strategic and plan use of those practices that will benefit the project the most.

Understanding the Business

I wanted to understand the other products that had been created by the team, the user experiences and how those different products might interject into the new project. I found applications and set ups for their Dashboard, Stocking, Product Lookup, Local Delivery, Bin Locating, and Will Call log and sweep.

Even with over 18 years of retail experiences, I found myself confused with much of the terminology and flows that were being created. I did gain clarity from one-on-one guides from the developers but was left questioning even more how user flows were being developed.

Learning about the other applications raised concerns on the current development process, and made me more resolute in using Design Thinking.

Interviewing the Product Owners

Understanding what product had already been deployed, I turned towards researching the current inventory process, interviewing the product owners and the associates who were involve in it.

Though I had worked over 18 years in retail I quickly learned every company is different and you have to dive deep to really understand how they are unique, what their business needs are, what their users’ needs are and how to maximize results.

I also interviewed them to understand what inventory preparations were being done, how the stores were set up, how the shelves were numbered, and what data points in their system could help them get a more accurate inventory count.

I learned having an accurate count through inventory was one of the most important aspects of their business. If they take care of their on-hand quantities, customers will always be at their doorstep and then they can focus on customer service.

Another point of interest was understanding the use of SKU’s and UPC’s in the wine industry. Not all wineries place a UPC on their product. Which means users need the ability to search for product by lookup. This meant using the pre-existing application for product lookup.

I also learned that different wine vintages can have the same UPC, but a different SKU, and it became important to focus on SKU’s provided by the store rather than the UPC’s provided by the wineries.

Understanding the Users

I never discount my personal experiences, and I hope I don’t let them override the users’ experiences as being the most important. I really wanted to understand this user. I initially believed the users like wine, like retail and like sharing their favorite wines. Some of this was true.

I learned the users definitely like alcoholic beverages of different types. I also learned that the majority of the associates were full time. They earned a good wage with the company and take pride working for K&L Wine Merchant, however retail isn’t their passion nor their endgame in life.

I found out the users dreaded inventory!

The associates main quarrels with inventory was it took too long, taking them away from their families in the evenings and the process was old school. They knew other retailers had better inventory practices and wished for something to help them out.

Inventories took about 5 days, done each night for 3–4 hours after close. They had to train the new associates, everything was done with pen and paper and one unlucky associate would hand key into the system every tally.

This helped my team to understand how important it was to keep the user flows as simple as cut any information that wasn’t relevant to the users tasks.

With a better understanding of the users and the business I turned to create and do a user story mapping exercise. My hopes was to bring together my developers, product manager and the product owners to do this exercise. It was part of my strategy to get help with the process but also to help develop buy in from my teammate.

I could not get my team and product owners to find time to help with user story mapping. I wish I could say I did, but I didn’t. I learned then that the best laid plans are only great if you share and create them with others and get their support from the beginning.

Even though I performed this exercise alone and could have done it much better, it allowed me a better view of the project. It also helped pin down main tasks and goals when it was conveyed to the product owners.

User Story Mapping performed solo

Even though I would have preferred to have done a User Story Mapping exercise with my product team and the product owners, it became a realization that in an agency, time and budget doesn’t always allow for the full breadth of UX practices. However, it is still my personal practice to follow those practices as best as I can.

Expanding and Refining the Design System

Being that much UI had already been created by my Front End Developer I did have a general aesthetic already laid out for me and I felt as ease jumping into low fidelity wire-framing.

Looking back and now having done other projects, I regret not having done wire-framing for this project. It would have increased my efficiency and allowed for quicker ideation and testing.

Because this was an iOS project, it was imperative to our Product Owners that we stick as closely to Apples Human Interaction Design guidelines. At that time I was still relatively new but was grateful to have a Front End Developer (even though she was in Dallas and I was in Gilbert ) that I could meet on a regular schedule to go over and verify the UI to make sure it was current and consistent across the board.

Components Library

I created a component library to help easily iterate. Having a components page also gave me the chance to explore the styling of the UI. The company only used iPhone 6 at the time for this application so the designs were created accordingly.

I loosened up the restrictive nature to give a more inviting and less sharp environment by adding slightly rounded corners and using Poppins as the main typeface. I also saturated and emboldened the main color to help create contrast which in turn helped create a better sense of hierarchy with in the components.

Component Sheet

With the help of my Senior Designer we also changed up the imagery associated with the dashboard, which later would flow into many other aspects of the business. We worked together to create flat style icons with components that could be easily reused in different combinations to create the icons and graphics needed for different projects.

Changing graphics to flat style imagery

Feedback

It was great working with the Product Owners and their associates because they were also able to give us realtime feedback in meetings and on our Adobe XD review online links.

One thing we learned during our meetings but failed to discover initially was they disliked having to pull up other applications on the iPhone to do calculations. I did comparative research on other applications that might have alternative calculators. I found Venmo uses a calculating pin pad.

We wanted to use this same feature to help improve the experience for the users, cutting down the process of them switching apps to use a calculator and improving associate pride in a solid process.

Venmo’s calculating pin pad.

With the pin pad designs in place I was able to create a small scripted prototype of its function to verify its usefulness.

Inventory with a calculating pin pad.

For the Product Owner to test with her associates I prototyped out the main flow and functions of the “count product” portion of the inventory tool.

Originally it was my plan to user test our prototype. But it wasn’t in the cards. Not all practices will be in the ideal situation. I learned then to roll with the punches and find other ways to achieve what was need.

Since I was unable to test the users I mentored the product owner on how to approach and record a usability test. Along with the prototype I created a script to help the Product Owner test the product with his associates.

Feedback based on the Prototype

  • They found the Venmo inspired keyboard worked well. They were excited to see it in action and hoped to see it carry over into how they operated the sales register.
  • They noticed some of the pop-up phrases were a little confusing. We worked the copy out with the manager to make sure it was more consistent to the experience of working in a retail wine shop.

In creating this experience I also wanted to create a bit joy at the end of the experience for the users. I designed and we created a wine glass filling up as the final loading animation.

An affordance that gave our wine enthusiasts panic

I am not a wine connoisseur, but I learned quickly by showing the above animation, that it’s not proper to fill your glass to the tippy top. So we adjusted the animation to fill less of the wine glass.

A not so full affordance, but still quite full.

Release, Observation and More Testing

After testing and changes were made, and the product went into release for K&L Wine Merchant, my Project Manager, my backend developer and I flew out to San Francisco / Redwood City to be present during inventory. It gave me a chance to do some observation and some contextual inquiry for the next project.

We did an onboarding session, and within 10 minutes the associates were out counting. With all the changes made, the whole inventory toke less than 5 hours. A dramatic decrease in time.

We did find one snafu in the process. We didn’t take into account that their inventory held more than just product. It also held event tickets, supplies for shipping, gift cards and more. This drastically inflated the variances. Once we noted where many of the variances were coming from, my backend developer was able to quickly adjust those classes out and moved the variances down to a reasonable number.

I went into this product with the team already creating the experience without me. Given their skills, I’m sure they would have created a good product by themselves. But by adding value through empathizing and understanding, I was able to gain some buy in from the team and create something amazing for the client.

Mentoring a Product Owner on how to perform his own user testing was something I never imagined doing. It’s strange to reference an inventory tool as a user experience. But after seeing how excited the associates were to perform an inventory in under 5 hours… that was a whole new experience for them.

I learned that user testing isn’t one size fits all. Under constraints you find ways to user test that you never would have thought of before. I learned about creating components which has push me to better understand design systems.

But the major take away for me was really taking ownership of a product. Knowing the business, the product and the users helped not only me when designing, but helped the client know that I valued their business and what experience they hope to get out of it in the end.

If you like what you read and would like to reach out to me, find me on LinkedIn

--

--

Matt Weaver

Im an outdoorsy, INFJ, UX Designer who ❤ to research and share his findings. I also ❤ to crochet, draw, read, hike, and explore new places.