Happy Hour Feature

My Role

Product designer – UX research, Use cases design, User testing, Visual design, Prototyping.

Team

Georg, CPO
Seniha, Senior Product Designer
Mikhail, Flutter Developer

Company

Bakersoft GmbH

Business client

Lila Backer

Implementation product/device

Autonomous In-store Digital Kiosk

Duration

2 UX sprints

OVERVIEW

In one of the design sprints, I was chosen to do the Happy Hour project. This project, in a nutshell, boils down to giving consumers the chance to buy food or drinks that are nearing their sell-by date at a lower price and/or put these Happy Hour products together in a basket with a pack price. The idea was to implement Happy Hour in the digital kiosks present in our client’s shops and for the parameters to be controlled in our customised management/logistics software.

PROBLEM STATEMENT

The problem at hand is how to design an intuitive and visually appealing solution that effectively communicates the value proposition of these time-sensitive items to users, encouraging them to make purchases while ensuring a seamless integration within the existing kiosk interface. The solution should strike a balance between promoting the Happy Hour items without creating a sense of urgency that might deter users, while also considering potential concerns such as food safety, inventory management, and compliance with relevant regulations.

A user > A need > A goal

DISCOVERY

In this discovery phase, we outlined various points and based on the problem and already having the type of functionalities we use at this client as a background, we structured a flow of decisions, which was comprehensive but gave us an idea of what the user’s interaction might be like.

On this stage We made a customer journey map and we pictured the flow decisions. Once again, and probably you will read this sometimes, I don’t have permission or even the document to share.

We understood the flow, now what?

In order to organise the topics of my research and taking into account the problems I’ve discovered, I’ve drawn up two starting topics:

Happy Hour Structure

I was given parameters that were discussed between me, the CPO and the CFO. These were determined according to the client’s requirements and those that legally had to be presented to the end client.

The structure should include:

Time left to purchase;
Highlighting the product at Happy Hour in a different way to other products;
Showing product availability;
Having a specific section for happy hour;
Modal with possibility to create Happy Hour basket with one final price;
Showing the customer how the functionality works in steps.

Cause behind functionality

This feature emphasises the importance of not wasting food. With this, I discovered, and from some knowledge of the 17 United Nations Goals, that Goal No. 2 is Zero Hunger, for which the colour represented is Gold.

Product card vs Happy hour product card

In the wireframes of the product cards, it was possible to cover some of the requirements proposed above.

Time left;
Product availability;
Highlight the Happy Hour feature in the product;

Navigation label

In order to go to the Happy Hour section we added a Label in the main nav.

(unfortunately I didn’t have the wireframes with me)

How Happy Hour works

Product details with Happy Hour / Pop-up

Main Modal for Happy Hour basket creation

This phase I defined the possible use cases for the Happy hour basket. Take in mind that I only have this screens to show, some of the related wireframes and flowcharts were lost in the end of the project.

Final Visual Designs

Here you can take a look at most of the important visual designs related to the feature. ( Prototypes will not be shown)

Start page with happy Hour option in Navigation;
Certain product category open with happy Hour products;
Happy Hour basket open;
Product details page in happy Hour;
Shopping cart with happy hour bags.

Conception

Starting from the structure outlined for the Happy Hour and putting together all the “ingredients” we had collected, we began to assemble and design the final product.

On this conception I used Figma for wireframes and visual design, Maze for A/B testing ( Can’t share the results), Jitter for motion design and Notion for documentation/task management.

Interesting facts

While working in Figma, normally I use this plugin task check list to always understand the key topics in order to better create the visual design.

Here you can see the actual photo of the Digital Kisoks inside the Autonomous bakery store from the client. Also I can say that sometimes it’s necessary to test the software in store.

Final considerations

This project has been completed with all the desired topics. It took a total of two sprints and several dependencies, even on the part of the developers, to complete.

I can say that it was a very interesting task, but above all, it was very challenging for me. A lot of metrics had to be taken into account, from figuring out the structural points to finalising the designs built in Figma.

Apart from the technical complexity, it was equally or even more important for me to realise that I was building a feature that represented such an important cause as preventing food waste.