Think big:
OVERVIEW
This project aimed to create an immersive videoconferencing experience using digital video walls. The objective was to enhance user experiences in delivering lecture classes at large universities by providing intuitive and impactful remote education tools.
As the sole designer on the team, I developed the design strategy and worked on the end-to-end design of the solution, from initial definition to full implementation.
Role
Lead Product Designer
Scope
Research | Conceptualization | UI/UX definition | Design system |
CHALLENGE
Major universities faced the problem that lecturers rejected virtual classes because their experience of teaching more than 60 people via a computer or tablet was uncomfortable and did not allow for smooth interaction.
The solution sought to provide an interactive experience that simulated a physical classroom, allowing lecturers and students to interact virtually in real time, through large digital canvases up to 20 meters wide.
PROCESS
Research
In the first phase, we conducted many design thinking sessions with teachers of our potential clients. During these sessions, we were able to delve into a variety of e-learning processes from great universities.
The gathered information provided us with a better understanding of the use case, pain points and improvement areas, and helped us to define a minimum viable product, making the priority features and the optimal workflows clear.
Insights deduction
- Lecturers rejected the on-line method because they could not have a close experience with their students.
- Lecturers prefer face-to-face classes because they can easily see attendees, interact with them, and not feel isolated in an empty room.
- Students avoided virtual classes because their experience was not optimal.
Ideation
Based on the gathered information, we held internal sessions to analyze and cluster the data in order to determine the essential features that the MVP should have.
Bearing in mind the immersive spaces that we wanted to create, where the lecturers would be surrounded by the interactive interface, it was fundamental to provide an user-centered design with an information architecture based on the e-learning processes and the characteristics of the real space.
Idea validation
In order to validate the idea at an early stage, we created a physical scale model that allowed us to bring the user closer to the experience in the space, using a 360-degree camera and virtual reality glasses.
Building on this model, we created movable cards representing the content blocks, enabling users to suggest layout ideas through a card sorting exercise.
The outcome of these sessions was the consensus on the content distribution, defining the information hierarchy, and prioritising the informative panels that were more relevant to facilitate the final user workflows.
UI definition
After the analysis of the gathered information, our conclusion was to create an user interface for the digital canvases, with the following features:
- Main area focused on the videoconference with visual cues to show the connection status of the users and remark information related to the e-learning tools
- Up to six remote users per screen to allow large capacities, bearing in mind the hardware to avoid face cutting by the screen edges
- Informative panels with independent widgets to show the information of the e-learning processes
- Active application and presenter camera stream embedded on the wall or in external screens
- Multiple layouts to allow the user to select based on the session type
User experience
Iterative design process
The process of design of the user interface meant several iterations, testing the mockups on the real hardware during the development, to refine essential parameters:
- The text legibility in consideration of the distance between the user and the screens
- The colour contrast of the elements to reduce visual fatigue, avoiding big luminous areas
- The visual cues to enhance interactions and redirect focal points
Dark backgrounds to avoid visual fatigue
Tested font sizes to ensure the readability
High colour contrast to highlight the points of interest
Lateral panels with selectable positions to suit use cases
Interactive user experience
Rational and smart use of the animations is a key point to achieve an
user-centered design. Using the animation as a functional element that enhances the user experience, we facilitate the e-learning processes:
- Keeping the focus of attention
- Providing hints to facilitate the interaction between users
- Creating visual connections and transition between the states
- Avoiding cognitive overload
Customization: style libraries
An important requirement of the UI design was the easy customization of the look and feel of the interface based on the final branding of the different customers. For this purpose, we created custom libraries with parameterized values in coordination with the front-end team to assign fonts, colour palettes and vectorial elements in a semiautomatic way.
https://www.youtube.com/watch?v=f3F9xdlGkjs
RESULT
The launch of the rooms was a success, achieving the proposed objectives.
Improve the lecturer’s experience in hybrid model
Satisfaction scoring
6 → 8.5
Improve the student’s engagement in virutal classes
Average session duration
70% → 95%
Achieve good adoption of the solution
Average in room sessions
30% → 85%
Click on the button
to know more about the final product
CONCLUSION
The product launch was very successful. A great impact was generated not only by the characteristics of the physical space itself —design in which I also collaborated—, but also by the visual impact of the graphic elements of the interface.
Designing for large digital canvases is quite a challenge due to the technical implications and the sensations generated in the space. This implied, among other aspects, thinking about:
- An user experience that would facilitate virtual collaboration, allowing fluid interactions, easy content sharing and tools that would generate user engagement.
- An adaptable user interface that would be displayed on devices with resolutions between 7,000 and 15,000 pixels wide, depending on the final hardware configuration.
Therefore, continuous testing in the real space is essential to achieve an optimal user experience and iterate at an agile pace to ensure that the solution is continuously adapting to e-learning processes.
