In October 2018, honestbee launched an offline store called habitat along Pasir Panjang Road in Singapore. As part of the UX team, I had the chance to work on some UI/UX aspects of the project before the launch. Specifically, I worked on designing the beePass and the Scan & Go features which are pivotal to the functionalities of the habitat experience within the honestbee application.
It is also important for the offline experience in habitat as the beePass serves as the “passport” to allow the users to enter the shopping space and make purchases without the need to open their wallets; while the Scan & Go feature allows users to make quick purchases without needing to check out physically.
When I first started on the project, it was important to find out the target audience for habitat. Due to the difference in the grocery and food experience offered in the space, my colleague and I conducted user interviews and research at different stages of the design process to craft out habitat’s user persona.
habitat by honestbee is a next-generation grocery and dining concept that offers a wonderland of food experiences. It brings together the best of food, grocery and human-inspired technology, offering a multi-sensory experience.
One such user interview (shown in the image above) was done on-site in the living space of our interviewee so to understand her shopping habits, cooking habits and lifestyle. We also recorded our conversation so as to facilitate our research findings analysis later on. Key quotes and interesting behavioural patterns were picked out as well as we worked towards crafting our very first user persona (see image below).
habitat by honestbee - 1st User Persona
This user persona became a kickstarter for us in brainstorming on how might we provide the users with a seamless online and offline experience in habitat via the honestbee app. Our target audience (according to our persona) may be familiar with technology and are willing to try out new tech, there were also other concerns such as what if the family visiting habitat has kids and nanny? Should there be a temporary pass that allows the family to access habitat without a need for a smartphone?
Besides, I’ve also identified potential problems with our current honestbee information architecture, where the in-house payment wallet, beePay, also has the QR code and scanner for payments. Through discussions with the engineers and PMs, it was apparent that we needed to unite the two structures and ideate on a potentially universal scanner/QR for the users to have a seamless experience. We penned down a few of the user stories - including users and business stakeholders - that will shape the experience for the users when using the app, for example:
As a new honestbee user, I want to be able to access the beePass quickly when I am at the gantry so that I can get into the habitat space as seamlessly as possible.
As an existing honestbee user, I want to be able to access the scanner and QR code through one common avenue in honestbee App so that I won't get lost or can't find it when I want to use either one of them.
After some quick pen and paper sketching, we’ve charted out a low-fi wireframing of the user flow for the beePass and Scan&Go according to our user stories (see below).
An example of the user flow and explorative low-fi wireframes
There were many iterations to the low-fi wireframes as I shared and discussed the designs’ functionalities with the engineers and PMs. There were pros and cons to each design suggestion. For example, having the beePass on habitat’s landing page may allow the users to access the beePass and also gain some insights as to what habitat offers at the same time, however the elements the compete for the limited screen space; having the beePass as a separate page accessible through the bottom navigational bar allows for a clearer distinction and ample screen space for both habitat and beePass, however there will need to be additional dialogs or information to allow users to also explore both tabs on the navigational bar. We eventually settled for the latter option, taking into account of IA’s Principle of choices and the technological limitation used at the gantry, where the area available for scanning the QR code on our phone screen is pretty small. Hence, there is a need to make sure that the beePass QR code is as accessible to the gantry scanner as possible, ie. taking up a larger screen space with minimal disturbance or scrolling to other elements. The Scan&Go is also accessible from the same avenue as scanning and QR are of similar family of features that are commonly associated together. This was also supported by our user research data we’ve gathered from users using Affinity Mapping, where we found that users tend to group items associated with scanning, QR codes and payment methods together.
The carousel above demonstrates some of the very initial UI designs. The current design system works well in terms of functionality (ie. green = go and red = no), however, it lacks in portraying the brand identity of honestbee, resulting in a dissociation of the honestbee brand and the services it offers. Users gave feedback that the abundance of green in the UI indirectly gave them an impression of the Grab app. So in the designs, the colour yellow was explored as it is recognisably honestbee and more illustrative elements were adopted as well.
Side note: Before we arrived on the designs that you see in this blogpost, many explorations have been done prior to these UI designs. As there were too many, I’ll list out a few of the UI prototypes that I have done for prior designs, which we find were too complicated for the users to use and require more engineering effort than the available resources (see below).
Eventually, after a number of iterations, we designed and spec out the best flow and screens which addresses our problem statement, working around the current limitations and technological constraint (see below).
“What to observe and record:
- What questions, comments and gripes do customers have?
- Keep rough tally of number and types of errors, e.g. no QR code, QR code doesn’t work etc.
- Ergonomic issues: how are people handling their phones at the touchpoint
- Time taken (e.g. # of people going through gantries / minute, time taken to complete Scan & Go journey)
- Emotions and feelings - chat with a few customers to get their reactions, notice how people are behaving”
After the designs were developed, I initiated to conduct a user research session during habitat’s pre-launch event on 21st July, to get a gist of how well did the designs work and what other areas of improvement we have missed out. A research plan was created and the idea was to have the users fill up a survey form to gather quantitative results, and have a conversation with them after they’ve completed. I’ve managed to gather interesting feedback from the users and identified key personas that could expand and refine our kickstarter persona. Insights were compiled and laid out to construct different personas (see below).
Plotting out user personas after the user research conducted at habitat’s pre-launch
The designs were further refined according to the feedback provided by the users before the official launch of habitat in October. Some of the issues identified were that the users were unsure if they have paid for the scanned items through Scan&Go as it was not indicated in the screens. Many thought that by scanning the items, they have effectively paid for it. So clearer messaging needs to be included in the design iteration to indicate that they still have to navigate to pay for the items in the app before they can exit the habitat space.
Further work still needs to be done to further improve the designs. Now that habitat has launched, I’m looking forward to having the opportunity to really get to know our users and work on designing for better UX in habitat, be it online or offline.
In the news!
https://www.techinasia.com/what-its-like-to-shop-at-habitat-at-honestbee
https://vulcanpost.com/649500/habitat-by-honestbee-singapore/