Audience Interface

From problem definition to the designed interface of a Progressive Web App in a 2-hours remote workshop

UX/UI Design & Workshop Facilitation
2021

goal

Designing the companion app used by the international audience to listen to the simultaneous translation during an online conference.

Role

UX/UI Designer
Facilitator

Period

July 2021

TEAM

Giona Fossati, UX/UI Design & Workshop Facilitation
Iciar Villamayor, participant
Carlos Aparicio, participant
Susana Rodriguez, participant & "Decider"

project website

www.smarter-interpreting.eu

goal

Designing the companion app used by the international audience to listen to the simultaneous translation during an online conference.

Role

UX/UI Designer
Facilitator

project website

www.smarter-interpreting.eu

Period

July 2021

TEAM

Giona Fossati, UX/UI Design & Workshop Facilitator
Iciar Villamayor, participant
Carlos Aparicio, participant
Susana Rodriguez, participant & "Decider"

Introduction

During my role as Product Designer in Smarterp, a Computer-Assisted Interpreting platform, we needed to design the companion app that the international audience would use to listen to the live translation of the online conference. Given the time and resource constraints, I decided to run a design workshop inspired by Google Ventures' "Sprint" to come up with a solution in the least time possible. The workshop has been held with 3 colleagues, two fellow designers, and the Product Owner.

Fully Remote Workshop

Given that all Smarterp's employees work remotely, the workshop has been held through a Miro board and a Zoom call.

For the workshop, I set up the Miro board in 5 different steps:

Previous Knowledge (5 minutes): I gathered and explained to the participants what we already knew about the users and how the solution we were going to design would fit in the overall system.
Understanding the User (20 minutes): we defined the users whose the solution would be for, their characteristics, goals, problems, and needs. Additionally, we defined the "worst-case scenarios": we brainstormed what could go wrong during the usage of the solution
Problem Statements (30 minutes): we took the post-its from the previous section and transformed them into "How Might We.." (HMW) questions. We clustered them in themes/categories and dot-voted the one we thought had the higher priority to be solved.
Build the Backlog (5 minutes): in order to prioritize and leave a trace of the work done for the future, I ordered the HMW questions with the MoSCoW method: Must Do, Should Do, Could Do.
Inspire&Sketch (between 15 and 30 minutes): as the last step, I left the participant 15 minutes to gather possible solutions "Must Do" HMW questions from the web and present them to all the participants.
After presenting, I ended the meeting and left the participants some time to asynchronously sketch possible solutions. We met the day after for the final round of dot voting.

Open Miro Board

Low-Fidelity Wireframe

After the workshop, it was my responsibility to put every voted solution into a low-fidelity mockup. Once finished, I presented the solution to the Product Owner and the development team. The prototype is mobile-first both because we assumed that the conference participants will get the audio/video stream directly from their mobile phones and, as a second goal, to make development of the desktop interface simpler.

Audience Interface Lo-Fi Wireframe

High Fidelity Prototype

The app has been designed to allow the participant to join and listen to possible different conference' rooms. To make the recognition of the rooms easier, each room can be identified by color, title, or speakers in the room. The app has been tought to be a Progressive Web App (PWA) given its temporary nature in the user's smartphones.

Audience Interface High-Fidelity Mockup

Selected Works