A futuristic smartphone app for remote collaboration in video and audio calls
Task
Make a smartphone application for remote collaboration, including video and audio calls with traditional options such as name of the user, off/on mic, and camera options, break-out rooms feature, synchronous text messages, personal and to group.
This group project was part of the course 'Graphical Interfaces - DAT595' and took place over three weeks at a 50% study pace.
The project team and their portfolio or LinkedIn, linked if available.
Methodology
This project took place in the autumn of 2023, when studies had returned to normal, but the pandemic had left its influence in the form of a flexible study style with both in-class activities and remote sessions. We were assigned the task of designing the graphical user interface of a collaborative remote tool however we wanted. The course was not very focused on ideation and instead emphasized creating interfaces using UI components and utilizing UX patterns and frameworks. It was also just a three-week group project as a phase before developing our individual desktop UIs. With that said, the ideation phase was restricted.
However, the methodology included a brainstorming session where we generated functionalities we wanted to include in the app. During this phase, we developed the main vision for our app: a spatial tool that feels like a classroom, with dynamic elements allowing users to move around in a meeting, creating a greater sense of presence. We then explored the type of aesthetic we wanted for the application, aiming for a spatial and dynamic environment. We decided on a main dark gradient theme inspired by space, combined with pink and white accents. For light mode, we chose a white gradient with touches of red and blue, while keeping the same accents.
We continued by creating wireflows, as shown in Figure 1, based on the findings from the ideation phase and the application's vision. Additionally, we also created a flowchart to clearly visualize the application's flow, which made the creation of the high-fidelity prototype much smoother. Once again, this course focused solely on the creation of GUIs, and therefore no user testing was performed on the prototypes. In other design projects, user testing would be crucial to ensure good usability and a great user experience.
Figure 1 - The wireframes
Figure 2 - The task and flow chart
Overview
Thee app is targeted for either smaller or larger groups of people to collaborate in i.e. a school context or for brainstorming activities. Compared to other popular video meeting apps, this app visualizes video calls in a virtual environment where the participants can move around and join breakout rooms.
The intention of the environmental representation is to mimic the nuances of real meetings which not only focus on one person at a time, allowing more things to happen. One problem identified with existing applications is that people easily fall behind as meetings tend to focus too much on spotlighting the most active participants. A shared experience in our group is that a video meeting with 100 participants often feels like 10 in total. We have made it possible to let multiple participants share content simultaneously. The idea is that it will lead to more active contributions and more creative thinking
Figure 3 - Starting page in Light mode and Meeting page in Dark mode
Genral Flow
From the start page of the interface, shown in Figure 4, it is possible to enter a meeting in several ways. One way is to join an upcoming meeting from either “My meetings” or by clicking “Join”. It is also possible to create a meeting that will take place now or soon, by quickly inviting contacts or sending a link. To schedule a meeting that will take place later in time, more information can be added and sent to participants.
When in a meeting, shown in Figure 5, several people can share their screen, media, or music, and the other participants can “walk” around in the virtual space and see them at the same time, or choose to focus on one of the shared screens. It is also possible to change the view and choose between gallery, dynamic, or pinned speaker view. Several people can be pinned, which makes the possibilities many.
Figure 4 - Joining, creating or scheduling a meeting in Light color mode
Figure 5 - Being in a meeting, showing different meeting layouts
The Drive Mode, shown in Figure 6, can be accessed by swiping right in a meeting and it features a big “Tap to speak”-button to minimize the time the driver has to look at the screen when driving and being in a meeting at the same time.
The Break-out Rooms, also shown in Figure 6, can easily be created by the host, by tapping and holding the screen. The host can then choose to either assign randomly or manually and all participants can then see who is in which room. For every part of the meeting, it is possible to chat with either the whole group or a chosen participant. In the break-out rooms,.
Figure 6 - Drive Mode, Break-out Rooms and Chat
Designed & Built by Adam Blomgren © 2025.