Tyler Phang
Joyce Yap
Teng Ming Xuan
Afiqa Rahman
Daniel Aw
Pen and Paper
Mural
Notion
Invision
Figma
3 weeks pro bono client
This project aimed to identify usability issues and opportunities with the web-based (MVP) video call tool ahead of its official product launch. We also looked into solving the friction of the journey from web-to-mobile prototype testing.
We elevated the MVP's usability based on research insights. Our improved designs aligned all parties to the same test scenario and goals. It also allowed product teams to quickly observe the participant's facial expressions when interacting with the product.
For this opportunity, our team worked 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, from validating your product needs to getting feedback on your MVP.
"A problem that costs $1 to solve at an early stage costs $100 post-production."
Goal #1: Improve the user experience and visual design of its web-based (MVP) video tool before product launch.
Goal #2: Design a new, seamless Web-to-Mobile transition for test participants.
I was part of an Agile Scrum team of 5 designers. My role was primarily to execute research, usability testing, copywriting, design and implementation while leading the ideation process.
We created our accounts on the platform and started exploring the MVP to analyse its usability. Our experiences with the video call were disorienting. We then turned it into a screenshot game with every bug or heuristic violation spotted. Through this activity, we also got a better feel and understanding of how the video tool works. Finally, the problem areas were rounded up and we focused on the severe ones, using Jakob Nielsen’s 10 Heuristics guidelines.
We researched on Lookback and Maze to compare how they tackle user’s problems and discovered opportunities to surpass them. Features-wise, Betafi already offers many that stood out among its main competitors. However, it was not able to perform unmoderated research. No need to worry about that, as the Co-founders were planning its release in the later phase. The takeaway here was to polish the execution of the features, as informed by our heuristic insights.
We conducted a usability test with 4 users to identify any usability problems.
Scenario: You wished to carry out a usability test via Betafi on a Figma prototype you just completed.
Task #1: Show me how you would set up this project on Betafi.
Task #2: Show me how you would invite a participant to your test.
Task #3: How would you carry out the usability test with your participant?
Task #4: How would you end the session, and what do you understand from the information displayed?
Metrics:
As the goal of this project was to achieve better usability, we used the System Usability Scale (SUS) to evaluate the overall usability. Unfortunately, the MVP underperformed and scored an undesirable 45.6 out of 100.
Next, we used the Single Ease Question (SEQ) to assess the easiness of each specific task. Task 2 and 3 scored the lowest, which meant it was imperative to fix next.
The co-founders have done their own research and interviewed peers from the industry. However, we felt that it was essential to know our users’ first-hand experience in person. We went ahead and interviewed 11 users with prior experience in conducting remote UX research. We were curious about their habits and experiences with their current workflow and tools.
Along the way, we realised that there were target users not catered for initially, such as UX design leads, product managers and founders, etc. We hoped to understand each of their unique needs and pain points. However, due to their busy schedule, we could not secure interviews to cater to such target users.
Nevertheless, our conversations with the 11 users were enlightening to us.
“Without the ability to observe gestures and body language, I’m missing out on quite a few important information.”
Ultimately, the biggest trade-off we have to make was exploring only 1 user persona, versus other target user groups we identified earlier. Based on the interview, we identified Stella, the UX researcher, who wants to focus on meaningful research that drives the team forward.
We then mapped out her emotional journey to understand what she was going through at different stages and identify areas for improvement.
We will focus on addressing the issues of the video call tool during the live session and the transcription and results page during the research synthesis.
Features were plotted based on whether they met user needs and business goals. We prioritised the highest value on both ends of the spectrum in green.
With our research and goals in mind, we did a brainstorming session and sketched collectively before pitching our ideas to each other. Ultimately, my sketches were used as the starting reference point to implement into digital wireframes.
Previously, the task selection had a play and stop button that confused the users. To fix that, we redesigned its functionality to project the selected task and question to appear on all parties’ screen (moderator, observer and participant) — that aligned everyone on the same page at all times.
The UI layout considered the shortest path for the moderator and observer(s) eyes to dart between 3 key places - the prototype screen, participant’s camera view and notes-taking section. It reduced the cognitive load and allowed for quick observations while taking notes.
A unified page for moderators and observers to store and refer back for video recordings with auto transcription. Notes taken during the live session were timestamped, colour-coded, and neatly organised under the selected question or task. Lastly, users could add their own key takeaways later.
Ultimately, there was still a need to do reports to share knowledge and key takeaways efficiently. We wanted to make it easy for users, without switching to other applications for report generation. Hence, we added settings to export the findings, transcripts and video snippets, all in a click.
The primary method of access for mobile. The widespread usage of contact tracing apps meant that more users were aware of how QR codes worked, which worked to our advantage with its convenience and easy accessibility. Alternatively, the participant can opt to key in an invite code for access instead. Both methods do not require users to divulge any personal information for security reasons.
Once the participant enters the prototype, Spotify in this example, no UI from Betafi would be displayed to avoid confusion. The limelight should be on the actual prototype to be tested, and we wanted the participant to immerse themselves without distractions. Finally, we used a triple-tap to bring back the menu, as prototypes did not typically use that gesture.
Based on further test feedback from 4 users, we continually iterated the designs over the next few days - with 2 major improvements:
To prevent an overwhelming first experience, on the first live session, we introduced a 4-step onboarding process to orientate users of the location and functions of various tools.
After user feedback, we changed the results page from top-bottom to a side-by-side orientation for a more extended scrolling space of the transcript.
We built on the style guide that Betafi was working off and referenced from Apple’s human interface guidelines. An inconsistency we found was in the typeface. Therefore, we standardised by selecting Gilroy, used on their website, and applied it to both web and mobile app. It was a modern sans serif with a classic geometric touch, offering excellent legibility. Finally, everything was all prepped for design handoff.
It was gratifying to see our participants’ eyes lit up as they clicked through the prototype and remarked how it was easier to conduct user research now.
The cherry on top was that the Co-founders would implement our proposed designs and send them to development.
“Daniel and his team from GA's UX Design Immersive course were an immense help in delivering on key UX improvements and design prototypes for our early-stage product. We were impressed by the speed of delivery, the level of consideration they put into the work, and the sheer output over a short few weeks.”
- Ethan Sherbondy
CTO & Co-Founder of Betafi
Get Insights From Other Roles
Carry out user interviews with people in other UX roles to gain better insight into how UX design leads and product managers view the research process differently.
More Exploration For Mobile
Brainstorm other ways for users to transit from web to mobile with lesser friction. We observed there was still low trust in downloading mobile apps, especially for a one-time test.
Recruitment Logistics
Some companies outsourced to external agencies to do research and find eligible participants. We would like to explore an internal panel or community tester features that can help companies with budget constraints ease their recruitment and logistic pain points.
Effectiveness Of Scrum
We adopted the Scrum framework into our Agile workflow. Our teammate, Joyce, a certified Scrum Master herself, acted as our Scrum Master. We saw how she helped us to focus on creating high-value increments quickly. Team discussions were timebox without going off-topic. Work gets completed without much time wastage. Everyone was productive and aware of their objectives. That is why, after this project, I took up the course and got myself certified as a Scrum Master to bring value to the next company I work for.
Final Thoughts
With the tool’s increased usability, we were hopeful that it could entice more businesses and product teams to employ Betafi as their primary platform to conduct extensive moderated user research. Here’s wishing Arjun and Ethan a success for Betafi’s highly anticipated launch, cheers!
Designed & Developed by Daniel Aw