Sales Restrictions

Hy-Vee operates more than 280 retail stores in eight Midwestern states, including Illinois, Iowa, Kansas, Minnesota, Missouri, Nebraska, South Dakota and Wisconsin. Every retail location is subject to certain prohibited sales hours on certain restricted goods. While there are other types of restrictions, (ie. age base restrictions), the scope of this project was to create a centralized solution for setting time-based sales restrictions at retail locations across multiple states based on local laws.

Constraints

Due to limited development resources and timeline, we had to utilize existing UI components from our library wherever possible. This was to be a React desktop web application.

How might we create an application to keep compliance with prohibited sales hours for restricted goods, (i.e. alcohol, tobacco) at various retail locations across multiple states. This new system needs to allow this data to be centralized and maintained by small group of corporate users.

He react based desktop, web application that easily allows, authorized users to review, edit and create time restrictions for the sales of specific items at various locations

Problem Statement


UX, Product Owner, and Tech lead collaborated together using a Problem Statement worksheet to answer questions like “What problem are we trying to solve?”, “How do we know it’s a problem?”, “Who are our users?”, “What are their goals and motivations?”, and “How will we know if we’ve solved the problem?” Once these questions were answered, we used this info to help craft our Problem Statement and align as a team on what we were trying to solve.

Application Discovery


We worked with the Product Owner and Tech Lead to walk-through and understand the current workflow in the legacy application. This helped us understand the requirements for the new application to be designed as well as any constraints.

Ideation Sessions
We had a couple different ideation sessions. Our first session was with the Product Owner. We use pen and paper and each quickly sketch a variety of ideas and then shared them with each other virtually over Zoom.

Our next session, we decide to include the entire UX team into a larger ideation session using Figma. We had 4 breakout rooms for various teams to ideate and then come back to the larger group to share their concepts. Once everyone share their concepts, we did a 6 Hats exercise to give feedback on the concepts. This session provided a lot of different perspectives and potential solutions that we could work with to help push the design forward.

Concept Designs
The majority of the ideas that came from our ideation sessions were based on a calendar UI. Unfortunately (as I mentioned earlier) one of the constraints of the project was that we needed to use UI components that already existed in our component library for the design, and we currently did not have a calendar based component. So we decided to pursue a design that used drop-down fields to select the time range for setting the restrictions. We wireframed the concept, got feedback and iterated on the design.

Prototype & Test


We built a Figma click through prototype to test with 6 corporate users. We gave each user various tasks to perform. We asked the users to think out loud as they performed each task. I facilitated the session while another UX teammate took notes. Once the session was over, we debriefed in FigJam. Because we were doing all the testing in one day, we wanted to brain dump any insights from the testing sessions directly afterward. Once all the sessions were completed, we synthesized the findings by affinity mapping various themes, and prioritizing the things we felt we could impact. We then made a list of changes, we wanted to implement.

Final Design & Handoff
 

The finals as I was created in annotations were made for the developers to reference.

Corporate users were able to quickly, easily, and accurately maintain correct restricted sales hours on the right products based on local laws. This saved them time and provided confidence in their accuracy.