INTERACTION DESIGNDIGITAL UXDIGITAL UI

hive (part 2) - design of digital touchpoints.

Eating healthy is possible when it is fun and easily accessible. The Hive Mobile Application allows users to find & book the food experiences they like. On the other end, the Host Dashboard gives local chefs all the tools they need to host the perfect food experience.

01

the challenge

To design the digital experiential touchpoints of the service Hive. It's a service that offers unique experiences around food by bringing people together over home cooked meals hosted by local chefs in neighbourhoods.

The Hive service was designed in 2 parts. Part 1 involved the strategic & service design as seen in the picture below.Hive part 1 project link

YEAR: 2018DURATION: 3 monthsPROJECT TYPE: Interaction design, UX/UI design of mobile app, desktop website & dashboard.TEAM MEMBERS: Individual projectMY ROLE: Identifying digital touchpoints required to interact with the service, design of information architecture, wireframes, user flows, backend systems and visual elements of the touchpoints, prototyping on Adobe XD.

Part 2 of the project involved designing the digital touchpoints which allowed users to get aware of the Hive service, explore experiences & make bookings. The backend of the service was also to be designed in order to facilitate the local chefs to make listings on the platform, manage their listings, track data regarding the performance of their listed experience and finally to be able to make ingredient purchases on the Hive Market.

02

the approach

The mapped end-to-end experience of the service (part 1) was used to identify the touchpoints that were required by users and hosts at different stages of their respective journeys. 3 digital touchpoints were identified; a mobile application, website and a host dashboard.

Next, the main Jobs To Be Done (JTBD) and its respective flows the user & local chef (2 personas) took using the digital touchpoint were mapped out.

The main JTBD (flows) for the user are:
  1. Onboarding on Hive using the mobile app
  2. Exploring different experiences
  3. Booking an experience
  4. Tracking of upcoming experience
  5. Attending the experience
  6. Posting a rating of the experience
The main JTBD (flows) for the local chef are:
  1. Onboarding to join the hive platform as a host
  2. Listing a new experience on the platform
  3. Managing their portfolio of experiences
  4. Checking data analytics of their experience
  5. Buying fresh-local ingredients on Hive Market

The framework shown above was used to identify the required features, pages, & interaction modalities to meet the needs of the user & local chef in each step to complete their respective jobs

The pages that were identified above for the mobile app, host dashboard and the website were used to map out the site map & information architecture for the Hive website and mobile app.

This was followed by making wireframes of the different pages. While designing various things were taken into consideration such as features, actions, flows to/from other screens, information hierarchy, architecture and interactions modalities. The design process of key functionalities of the touchpoint is outlined below.

ONBOARDING

A quick 3 step process for the user to set their preferences regarding the type of experience, ambience style and food they like. This allows the service to recommend personalised listings according to the users preferences.

At the end of the onboarding process, users see a message to informs the user how this data that they have shared will be used by the service. Being transparent helps in gaining the user trust and loyalty for the service.

APP HOMEPAGE

The bottom navigation bar divides the app into 5 main section. On the homepage users can explore all the experiences listed on the platform. The "for you" tab allow the user to check experience that are suggested & tailored for them based on the preferences they have set and their app usage data.

The listings have different indicators that give quick & useful information about the experience:
  1. Automatic acceptance of the booking request are indicated by the lighting icon next to price
  2. "Demo event" label are shown for listings that are new on the Hive platform and in test phase.
  3. Listings that are hosted by top chefs are shown by the yellow icon
  4. Listing that are categorised as an "all-inclusive experience" are shown by an blue icon

APPLYING PHYSCOLOGY PRINCIPLES IN DESIGN

Phycology principles are used as triggers to optimise user flows and impact business goals. It reframes information and alerts users when there is a need for urgency; while at the same time being ethical and giving control to the users to make the final decision. These statuses change in real-time and help in enhancing customer experience.

EASILY FIND THE PERFECT EXPERIENCE

On the homepage, the search bar and smart filter tabs makes it easy to find the perfect food experience for every type of meal the user is looking for. The taxonomy shown below makes it easier to filter the perfect experience. Big database of word tags, data from image recognition, comments and ratings makes this possible.

The large database of experiences on the platform are divided into various "experience type" categories. These categories are represented as tiles that allow for easy discovery, accessibility and quick exploration.

Other filters are easily accessible from the different filter tabs on the homepage:
  1. Location filter
  2. Meal types
  3. Dates
  4. More filters +

The number inside the "explore experiences' button indicates number of experiences that are available for the chosen filters. This number changes in real-time as different filters are applied.

As filters are applied to the search results, the top section shows the user a summary of all the filters they have selected with the applied results shown below.

BOOKING AN EXPERIENCE

In the experience details page, users first sees images/videos of the experience in full screen with key details such as name, price & rating. As they scroll down, important summary of details is shown, followed by full information about the experience such as meal, ambience, style, location details, pictures of experience, food, space & ambience.

Users can also check details about the host, by accessing their profile. They can message them, see past and upcoming experiences they will hosted. Check their level, points & ratings, and have the ability to report hosts that are not good. By giving users these information and control, it helps in building trust between the user and host before they attend an experience.

The booking wizard allows users to book an experience with ease. The progress bar on top shows the number of steps that are remaining and at the same time, users can see a quick summary of the options they had selected in the previous steps; allowing for easy review and quick edits.

TRACKING UPCOMING BOOKED EXPERIENCE

In the homepage users can see banner that reminds them of their upcoming experience and its status. In the "your experiences" page users can see a timeline of all the past experience they have attended and upcoming experiences they have booked.

In the experience detail page users can engage in group discussion with the host and the other guests that will be joining the experience. This helps in breaking barriers, awkwardness, gaining trust for the host and the people who will be coming.

ATTENDING AN EXPERIENCE

While attending the experience, the user can take pictures, videos & live stream the experience with just one click of the camera button on the app homepage.

User can also see a gallery of images, videos of experiences that have recently taken place or live streams of events near them or around the world, This media is uploaded by other Hive users using the various #HIVE #HASHTAGS. While browsing these images users can take advantage of the image recognition capability of the service to search for similar experiences to those that are seen in the image.

BACK END DESIGN OF THE HOST DASHBOARD

The back-end of the Hive service was designed to show how the local chefs are able to manage their profiles and experiences they host on the Hive platform. In the Host Dashboard section they have access all the tools and resources to mange their hosted experience.

The first video below shows how a new host accesses the host dashboard and the steps they have to take to list their first experience. The second video shows how hosts can manage their listed experiences by checking the calendar for upcoming experience they would be hosting and live status related to its bookings.

The video below shows how hosts are able to track how well they are hosting by checking Data & Analytics, Hive not only shows visual data, but provides them with insights related to their performance and actionable suggestions on how they can improve their hosted experience. Lastly, the second video below shows how the chefs can access the Hive Market section to search for upcoming local markets and make online pre-orders for fresh & local ingredients.

03

the outcome

The design of the digital touchpoint ecosystem consisted of a website to raise awareness, a mobile application to explore & book experiences and a dashboard for managing experience listings.

The user flow, information hierarchy & interaction modalities of these touchpoints were designed by taking in to consideration the needs of the users and the local chef in their respective usage context so that they can use these touchpoints to carry out tasks in an effective and efficient way. A bold and vibrant visual language was chosen to reflect the fun, exciting & dynamic nature of the food experiences on the Hive platform.

Finally these online-digital touchpoints were designed to integrated seamlessly with the offline-physical experience of the Hive service.

To see the design of the Hive service experience, check out the project

Hive (part 1) - UX strategy & Service design

head back to
all my work.