Betafi

Redesigning the web and mobile app experience of the one-stop integrated research platform.

Project Overview

My Role

Design Lead | UX Researcher | UI/UX Designer

My Tools

Figma | Mural | Notion | InVision

Timeline

3 Weeks Sprint

Platform

Website | Mobile App

Team

Myself | Joyce Yap | Daniel Aw | Teng Ming Xuan | Afiqa Rahman

Introduction

Background of Betafi

Our team had the opportunity to work with Betafi, particularly with the co-founders, CEO Arjun Arora and CTO Ethan Sherbondy, on a mission to empower product teams to "build the right thing from day one".

To accomplish this, they created an integrated one-stop platform to conduct moderated UX research sessions remotely, ranging from user interviews, concept testing and usability testing.

Design Process

01. Discover Phase

Heuristics Evaluation

To measure the usability of the existing website, we used the Jakob Nielsen's 10 usability heuristics and they are subsequently prioritised using Severity and Ease of Fix rating.

Usability Testing on Existing Platform

Scenario:

You just completed designing an interactive prototype and wish to carry out an usability test on Betafi.

Tasks:

1. Show me how you would set up this project on Betafi

2. Show me how you would invite a participant to your test

3. How would you carry out the usability test with your participant

4. Now that you are done with the session, how would you end it (and what do you understand from the information provided)

Results:

For post-task analysis, we used the Single Ease Question (SEQ) to assess the ease of performing each task. Task 2 and 3 scored the lowest, which indicates most problems faced.

For post-test analysis, we used the System Usability Scale (SUS) to evaluate the overall usability. The MVP underperformed at an undesirable score of 45.6.

Competitive Analysis

We first identified the pluses for competitors such as Lookback and Maze to select characteristics we would like to adapt for Betafi, before we list out a feature inventory across these platforms to assess desirable features to be included as well.

User Interviews

We conducted interviews with 11 users, whom have prior experience with remote research, and the following are the summarised results.

Results:

1. Many prefer to carry out remote usability tests on desktop

2. Many are apprehensive about using transcoding tools due to its limited accuracy

3. One major concern is the limited ability to observe participants' behaviour

4. Most use multiple tools to carry out each user research session

02. Define Phase

User Personas

We performed affinity mapping for the interviews findings into meaningful insights. Through our insights, we created the following persona, Stella, who is an UX researcher that wants to focus on conducting meaningful research to drive the team forward.

Customer Journey Map (CJM)

Putting ourself into Stella's shoes, we then crafted out her full end-to-end journey when it come to conducting a remote user research.

User Flow (Desktop)

Before:

Existing project and session creation to live session user flow. The red dots indicate points where users faced the most difficulty and where we would focus to make improvements.

After:

New improved user flow with movement of entry fields and separation between different test types setup. The green dots indicate proposed improvements.

User Flow (Mobile)

Before:

As phase one for Betafi, we were tasked to design a desktop-to-mobile experience where participants will start the process on desktop before moving onto the mobile device's app to test out a mobile prototype.

We brainstormed and proposed to leverage scanning of QR codes or invitation codes to transition from desktop to mobile, enabling users to participate even if they do not own a camera-enabled phone.

03. Develop Phase

Sketches

We kickstarted the ideation process by brainstorming and hand-sketching to quickly translate our ideas into tangible solutions.

Wireframes

Website:

Mobile App:

Design Style Guide

With the wireframes completed, I led the team in design and delivery of the design style guide, to ensure efficiency and consistency across the platforms.

Usability Testing

After translating our wireframes into lo-fi prototype, we proceed to conduct 2 rounds of usability testings with 4 unique users each round.

Design Improvements

Through our usability tests' pluses and deltas, we then applied design and HCI principles into our design iterations. The following are the key changes in our design after 3 rounds of iteration.

01. Getting Started Page

Relocated the CTA buttons by utilising the white space, declutter information and to minimise confusion.
Replaced buttons below Getting Started to clickable cards with numbered steps and introduced constraints for disabled cards so that it is a simple linear process for first-time users.

02. Project Creation Page

Introduced contextualised form depending on the type of research users are conducting.
Form will change according to the type of research selected.

03. Conduct a Live Session

Introduced a 4-step onboarding process to orientate users on location and functions of various tools on users' first live session.

Mobile App Design

The mobile app allows participant to test a mobile prototype on their mobile device, while the moderator is still conducting the video session on the desktop website. In the Phase 1 of development, our role was to ensure seamless transition from desktop to mobile experience when participants switch to testing on mobile away from desktop website. The following are our proposed designs for the new mobile app.

System Ratings

After 2 iterations, we received favourable results for both our average SEQ and SUS ratings, clearly validating our design improvements as users were finding Betafi much easier to use.

Key Takeaways

1. Work with Technical Constraints

Through the project, we realised that identifying and understanding technical constraints are critical so as to prevent unnecessary wastage of time and effort into designing something that the client technical team could not achieve. We worked closely with the CTO of Betafi, and we had to take into consideration of the technical constraints that they have before we decide and finalise on our design improvements.

2. Teamwork is Crucial

At first, it seemed like it was easier to work in a big team of 5. However, a bigger team has got its challenges such as dealing with each's different personalities, working styles and schedules. Through trust and open communication, I had to constantly ensure team is aligned and steer us towards meeting our project's objectives.