Launched in October 2018, habitat by honestbee is a beautiful, physical extension of the honestbee brand. It provide tech-enabled convenience, value and quality through food, online and offline. It is a unique combination of a full supermarket, speciality grocer, dining and interactive lifestyle destination. In this thoughtful space, one can expect a multi-sensorial food experience that nourishes, educates and inspires. It was designed for customers to get their groceries and meals efficiently but also linger and enjoy the experience.

Powered by honestbee technology, customers can use their honestbee app to enter habitat, to browse more than twenty thousands of products and to purchase grocery or meals cashless.

Retail space is expensive and limited. In order to provide a more experiential, discovery-based shopping experience for customers, in habitat shopping area we feature products that are more premium or unique. To allow customers to buy whatever they need such as toiletries, regular drinks not being displayed in the front room, we developed a kiosk that is able to showcase the full catalog of the offering in habitat. Customers will be able to browse products in the kiosk, add them to cart and checkout. The kiosk also acts as an in-store reminder to customers that they can shop for more products that are not featured at the front.

Kiosk app was built in 42 inches touch screens in Android system. We have more than 15 stand or wall-mounted kiosks in the habitat to realize seamless purchase experiences.

To begin with the kiosk screen design, we studied some best practices and design principles on online. In addition, we also visited several fast food restaurants like Mcdonald, Burger King and MOS Burger, to experience their ordering process on the kiosk. Here's our findings for big screen design:

• At one glance, it must be clear what the user is committing time to at the kiosk.

• Entice the user to use the kiosk using signage and an “attract loop” (looping video or animation) on the kiosk.

• Have a “Start Over” button to allow the user to explicitly start over from the kiosk’s “home” state.

• The UX should be a linear path to completion that is as streamlined and as frictionless as possible.

• Keep the user's interaction with the kiosk simple.

• Actions should be readily apparent and have great affordance.

• Limit typing on the kiosk.

• Ensure rapid feedback to user interaction.

• Account for privacy and for sensitive information being displayed on the screen.

• Consider lighting conditions at where the kiosk is deployed.

We wanted to provide several shopping methods within the habitat, however, the interaction patterns in one space should be under certain control or it might make customer feel overwhelmed. Based on this thoughts, we developed a few different ideas about the ordering experiences through the kiosk and wanted to find the most balanced one. To help the team visualize the overall scenarios, I drew a few storyboards to present the possible storylines which would greatly help the team to define the features we need for kiosk in the coming future.

Based on the results and feedbacks from the previous step, we can conclude the following major user stories were must-have for kiosk when habitat launched:

1. The kiosk should acts as an in-store reminder to customers that they can shop for more products that are not featured at the front.

2. The kiosk would showcase the full catalog of the offering in habitat.

3. Customers should be able to see all grocery categories and product details.

4. Customers should be able to add items to cart as well as adjust the quantities needed.

5. Customers should be able to checkout order by scanning his/her beePass (personal QR code), and it would be cashless transaction.

6. The order confirmation would be displayed on the kiosk screen, but the order details only go to the personal honestbee app.

7. The kiosk would provide a "Start Over" function all along the ordering process to quickly clean up the current status and to go back to "Home" screen.

8. We should set up an idle time for kiosk to always go back to "Home" screen in case customer leaves the kiosk in the middle of ordering which might be a block for next customer.

9. We should design a specific way to enter application configuration. In the configuration staff should be able to do country selection, account settings, set up system idle time, etc..

After all the information was collected, I started to explore possible UI options of ordering process in wireframe thus we can visualize the UI element placements and function steps easily. 

I also held a feedback session with stakeholders, designers to quickly gather their opinions and to make our way to the next step.

I put all the detailed scenarios and design specs in this phase including happy flow, error handling and exception handling. It was much easier to communicate with PM and engineers based on the actual UI designs. 

As you can see, the kiosk interaction flow was a linear path to completion. I wanted to make it as streamlined and as frictionless as possible. Also you can notice that "Start Over" button was placed in every steps before checkout. The configuration were also taken care of although it's only for the staff.

At the time when the first MVP design was drafted, we didn't have actual kiosk device allowing us to put on design and see how it works. So we came up a great idea which was to follow the device sizes and built up a kiosk by cardboard, then projected the design on the kiosk screen that we made of white papers. 

This real size prototyping would definitely give us more accurate evaluation about the whole look and feel, the size of pop-ups or buttons, the deployment of kiosk in the habitat, ect.. 

Thanks to the cardboard kiosk, we ran a inner usability test with staffs in habitat to find out UI defects we can do immediately adjustments, as well as dig more insights for future design.

While the habitat was in trial run, we created a experience test plan that on-site designer would help to test out with the real customers. Here's some pain points we discovered:

• Cognitive overload from too many grocery options 

• Screen timeout too short — creates a sense of urgency

• Order confirmation page is not clear. In mobile app placed order doesn't show immediately.

• Takes too long to discover the particular product

• User didn’t totally understand the purchasing flow

• Some customers didn't aware that kiosk was touchable

Based on the feedbacks above, we brought out the following enhancements when habitat was officially launched: 

• Added some physical signages onto the kiosk to emphasize that kiosk was touchable.

• Put some featured products on rotation as the kiosk went into "Home" screen(default display mode).

• Added simple 3-step tutorial to guide user using kiosk for grocery ordering. 

• Added search and secondary filtering function to quickly find the target item.