📍 Fika | Vietnam 🇻🇳

Fika Business: a B2B app as a bridge between online and real life connection

Product Design | B2B | Design System

Dec 2020 - March 2021

Project Overview

Outcome

After a successful launch of the dating app with over 300 000 downloads, the Fika founders made a bold decision to elevate the Vietnamese dating landscape by transitioning it into real-life connections. Living true to the name Fika which means a coffee break or a moment to slow down and enjoy good things in life, this was a concrete introduction to the Swedish Fika culture. This strategy aimed to expand Fika’s vision to fostering genuine connections and make an important impact throughout the nation. Hence why Fika Business was born.

Timeline:

  • From conception to the first user test: 2 months

  • From iteration, development to launch: 2 months

My role:

  • Owning the design, ideation, prototyping and testing phase of the B2B desktop app

  • Designing a B2B Design System

The team:

  • Oscar Xing Luo: CTO & Product Owner

  • Bang Nguyen & Thai Nguyen: Full-Stack Developers

  • Kendall Vo: Partnership Manager

The deliverables were efficiently handed over after 2 months, meeting all outlined specifications:

  • A high-fidelity interactive prototype of the B2B desktop app

  • A B2B Design System

Process

Since the Fika brand has solidified its presence through a successful launch, the time has come to introduce the new project swiftly. In the dynamic coffee market in Ho Chi Minh city, the Partnership Manager gathered a lot of eager interests from multiple coffee shop owners. Since the Double Diamond method worked well in the previous development of the B2C dating app, I decided to use the same strategy in this B2B project. I had to adapt the process to the urgency requirement from the CEO, thus the following twist:

  1. I organised a series of workshops with the team and the founders in order to discuss strategies, possible roadmaps and features. The goal is to achieve a clear prioritisation as fast as possible.

  2. Before these workshops, I prepared different storyboards based on information from different sources: user data, user testing feedback, ideas from potential partners (coffee shop and restaurant owners).

As a result, we finally agreed on the short-term strategy and a list of fundamental features after 3 intensive workshops. I then proceeded to design the desktop app and also create a design system dedicated to it.

UX Strategy Workshops

Prior to the UX Workshops, I came up with several questions and storyboards to illustrate my assumptions of the user journey. My goal was to prepare extensive materials and hypothesis in order to make the workshop more effective. The questions and scenarios are classified into 3 phases of the User Journey:

  1. Phase 1: Acquisition & Booking

  2. Phase 2: Preparing & Going to the date

  3. Phase 3: Retention after the date

Together with the stakeholders and the rest of the start-up, we discussed the different dating scenarios.

In the following 2 workshops, I worked with the CTO and the engineers on the user flow between the B2C Dating App and the new B2B app. In particular, we discussed the different touch points between the Business app and the Dating app. We decided to create a new tab in the navigation called Fika Hub. Fika users can use this space to:

  • Look up a location for a coffee or a dinner date

  • Check out promotions

  • Show Fika QR code to merchants

  • Rate a date

  • Create a list of upcoming dates

Execution

Creating a desktop app and a design system simultaneously is overwhelming for a fresh Product Designer. Here’s how I approached 2 major design challenges: by drawing inspirations from online creative sources that were helpful at the time. Throughout this research, I learned a lot about desktop app design:

The B2B desktop app:

  1. The majority of the desktop apps is complex and data-heavy in their nature, hence why there are different compartments in the user interface.

  2. Due to the heavy amount data, the colour palette and visual look tend to be minimalist and business-inspired, thus a lot of blue and neutral nuances.

  3. A desktop app usually requires an onboarding process.

The B2B design system:

  1. I inspired a lot from the extensive Ant Design System. Copying is a form of learning, hence why I followed their guidelines in order to create B2B UI library. This is definitely helpful for designing data-heavy components such as input fields, date picker, form, data display, etc.

  2. Adapting these components to the desktop app is not without its challenges. During my designs, I could immediately see if the components fits in the user interface, and more important, their impact in the user experience intended to merchants.

The new Fika Business app has 4 fundamental functionalities:

  • A dashboard that showcase an overview of the commercial discount programs for Fika users

  • A payment list to show transactions of the deals

  • A member space to manage members of the restaurant or coffee shop team

  • A space for basic account and miscellaneous settings

The new Fika Business app has 4 fundamental functionalities:

  • A dashboard that showcase an overview of the commercial discount programs for Fika users

  • A payment list to show transactions of the deals

  • A member space to manage members of the restaurant or coffee shop team

  • A space for basic account and miscellaneous settings

What happened after design?

During the handoff to developers, I communicated my reservations regarding rolling out a beta version of the B2B app without first conducting tests with prospective café owners. Since the focus has been about rolling out the new app as soon as possible, the decision was made to go ahead with development. However, the desktop app wasn’t launched in time due to insufficient manpower resources.

After this B2B project, I switched my focus back to the dating app. There were a lot of features in the pipeline to be designed and develop swiftly. Therefore, I continued designing new features while leading the junior digital designers extending Fika’s brand identities.

Learning & Takeaways

Working on a first B2B product ever taught me many valuable lessons. Upon reflection, I realised that speed is not always beneficial regarding new-to-market products. A lot of restaurant or café owners use specific restaurant management softwares, or even in small cafés with a limited menu, the owners simply use accounting tools to keep track of transactions. I acknowledged the difficulties that surged after finishing a full-fleshed prototype. In addition, the B2B design system could not be implemented due to insufficient human resources.

In hindsights, here’s how I would do differently:

  • Instead of jumping into scenarios, I would prioritise researching with developers for efficient solutions that would be user-friendly to restaurant managers and café owners.

  • Considering different solutions that would be time-efficient for the developers, such as developing an API, or a simple internal app to manage partnerships.

  • Collaborating with a small group of prospects to test different solutions.

  • Considering design system at a later stage.

This project was an intensive test for me to design and lead simultaneously. Together with the junior Digital Designers, we came up with an extensive visual universe of Fika that speak to the Vietnamese Gen-Z audience. To know more about my brand identities design process, please read my Behance case study.

Other Projects