Ideation

In the same way that we approach the design of the immersive e-learning spaces —the first case study commented—, in the phase of ideation we carry out multiple design thinking sessions involving the full team, taking advantage of the knowledge gained with our first product, a videoconference platform with B2C approach.

User research

User interviews

As a starting point, we conducted multiple user interviews to understand the use case of the remote users in the e-learning case, keeping in mind the point of view of lecturers and students. This first contact helps us to identify other people implied on the proper functioning of the sessions, which led us to extend the scope of research.

After the analysis of the gathered information, we defined four remote roles, presenters, students, assistants and translators.

Field studies

A very wide range of features was opened with roles such as Assistant and Translator. To understand better the use case, we undertook field studies:

• observing the work processes of the support people during videoconference sessions
• visiting the cabins of translation to understand the hardware used for translators and observing them in action

UI definition

User workflows

In the first phase of definition, we analysed the functionalities that the product had to cover, based on market and user research, and our prior knowledge acquired with previous products.

An essential aspect was to establish clear, intuitive and scalable workflows, in order to continue iterating on the initial version, facilitating the evolution of the product.

Adaptable components

Analyzing the information gathered from the user research, we identified specific features for each role and transversal features that should be available for all users. With this in mind, our approach was the definition of base components that could be adaptable depending on the user role.

UI with e-Learning approach

In contrast to the traditional videoconference use case, where all users have the same control over the session resources, in the e-learning case it was necessary to define the hierarchy between users, giving lecturers and assistants control over the content and facilitating the moderation of the session.

UI design

Improved user experience

During the user research, the sense of isolation that remote users feel during the sessions was one feedback heard on multiple occasions.

A lack of connection is generated during the classes if the user only sees the last people that spoke or only can see the content shared by the lecturer, regardless of the number of attendees.

With this in mind, we designed a flexible screen layout where the user could:

• have the focus on the content shared by the presenter
• see the current speaker all the time, including remote presenters and other students
• have an overview of all connected users
• decide the layout, choosing which of all these areas they want to have in fullscreen

Custom styles parametrization

To allow the easy customization of the interface based on the branding of the clients, we define a neutral style in the core components that would be complemented with the custom parameters established for the customer: fonts, colour palette and vectorial assets.

These parameters were defined in coordination with the development team and triggered the creation of design libraries for each customer.