.png)
One of the unfortunate things about software development is that it's easy to create a bad user experience. We've all found ourselves clicking a cancel button where it should have been an ok button or a settings screen that's harder to find than the lost city of Atlantis.
Whether it's a website or a mobile app, understanding user behaviour and expectations is critical to designing an easy-to-use experience. In most projects, you would be able to conduct user research and usability testing – but what about when you need to create a user interface for an audience that doesn't know they're going to be using your software.
That was the case for our team on a recent project for a broadcasting software and hardware company. Our client produces equipment for remote production and transmission of news, sports, music, and other programming. Our client's solutions bring in video feeds for remote interviews with experts or others in the field as news is breaking for their local and national news customers.
With the onset of the COVID-19 pandemic, our client saw a quick increase in the demand for their solution. Their customers needed a way to make it as simple as possible for inexperienced guests to connect to the studio with high-quality video and audio.
Our client approached us to design a cross-platform (Windows and macOS) application that would use some of the existing design patterns from their mobile app. The application would be downloaded and installed by the guest on their laptop. It needed to be easy to install, make setting changes, and connect to the studio's production system. The project also required the use of QT Design Tools as the client's in-house development team would be building the app.
During the project's design phase, we worked with our client to understand their potential users and the challenges they might face while using the application. There were three challenges in particular that we were excited to help solve.
I'm ready for my close-up.
Windows and macOS applications have different menu placements in their core OS and general application design. The challenge here is that having user interface elements near the top of the screen will lower the guest's video on the screen. When we're interacting with video, our eyes naturally go to what we're watching. When a video feed is low on the screen, the guest's eyes won't be looking into the camera. Instead, they'll be looking down – and that doesn't make for a great interview.
Our solution for the cross-platform app was to minimize the user interface elements at the top of the screen. This way, the video in the application would be as close to the webcam as possible. The result is a guest video feed where it looks as if the guest and interviewer are talking right to each other.
We'll do it live.
Another challenge in designing the application was in how we would present the settings screen to the users. The majority of the settings are for adjusting the video and audio feed sent back to the studio. We wanted to make sure that we could provide a way to access the settings without having to navigate away from the live stream.
Our solution was to forgo the traditional setting screen entirely. Instead, the user can access settings in an expandable drawer that keeps the live stream in view.
Ready camera one.
Sometimes too many options can cause confusion with end-users – especially when there's the added pressure of a live interview. Our client wanted a way to allow their users to change the video feeds' layout in the live stream without causing any issues. Their main worry was that a user could accidentally make a video feed disappear and not know how to bring it back.
We wanted to make sure the user could move video feeds without causing an issue – and this reminded us of one of our design guides – "constraints breed creativity." We designed three preset layouts of one, two, or three screens that the user could choose from. Each preset configuration allows the user to assign different video feeds to each screen – and never be more than a click away from resetting the layout and feeds.
Did you get the file?
While many of the interviews would be live using our client's software, there are also use cases where the interview would be recorded and transmitted. We wanted to make sure that it was as easy as possible to upload a file and see the upload status. We were inspired by that old infomercial call to action "set it and forget it."
We designed the upload system of the application to:
- Allow users to upload files either by either dragging & dropping or manually select the file or files to upload
- Understand the status with a set of easy-to-read glyphs indicating what files are queued for upload, which are in process, and which ones are complete.
- Display a running list of what's been recently uploaded, so the user has confidence that the file they chose to upload is uploaded.
Putting the user first in design.
Understanding the user and what they're trying to accomplish is at the core of our development process at BitBakery. When we tackle projects of any size, we put the user at the center of our approach. This ensures we've got the correct problems identified before we start designing.
Whether you call it human-centered design or design thinking, it's a straightforward way of putting the user first in every project.
