2020 / App Design

Fleeting

Ideation, wireframing, UI/UX design

I was talking to a colleague of mine on a GreenPowerMonitor project, when Tom, another colleague of mine on that very same project, overheard me say; "So, I do design now", which intrigued him enough to have me design a video conferencing app that he was building.

Defining the problem

Tom was building an app that had one singular goal - to let people have meetings that don't go over the specified time limit. A common problem among meetings is that while everybody means well, far too often half an hour turns into an hour, an hour turns into two and so on. The app would not only encourage shorter meetings, but makes you question whether a meeting is required at all, because maybe it could just be an e-mail.

What Tom wanted was an app design that would be professional yet futuristic. The goal of it was to test the market for app viability, so while it didn't have to include all the bits and pieces of a whole finalized app, it did have to have the main things people interact with in the app - recent calls, contacts view, pre-call and in-call views.

Mood board

Tom had already prepared a mood board for me to follow when making design decisions, which was super nice of him. This mood board clearly illustrates that Tom is into colourful, neon-like-fluorescent designs that scream futuristic but stay minimalistic.

Wireframing solutions

When wireframing for solutions I wanted to make the whole experience to have as little steps as possible while not reducing it into a minimalist-dream that most people wouldn't know how to use (eg. hidden actions or menus, such that are visible with swipes or long taps only).

The main page you always see in Fleeting is the Recent Calls view. I tried to make it as similar to a regular phone app's recent calls as I could, because it's familiar to the audience and thus doesn't need explaining. The search button of it will take you to the Contacts view, which includes all of your phone contacts that you can then filter by typing the name into the search bar that replaces the title bar.

The contacts are ordered by those who have the app's account first, where you can just tap and call the person, following by all the other contacts after them where you can tap and share the app with a contact so they'd sign up for an account. The accounts that are not on the app are indicated with having the share icon on the right side of the row.

On the Pre-Call view, you will see the avatars (or initials, if the avatar image has not been added) of the people in the conversation (you + contact), as well as the time picker which allows you to set the limit for the meeting. You can then choose whether you want to make an audio or video call with the contact.

On the actual call, you see either the person's avatar (or initials) or video of the person, depending on the type of call it is (audio or video) and the countdown timer in the bottom middle telling you how long the call can go on, at which point the call will end automatically. You can, of course, mute yourself and also hang up earlier, if you want to.

Design

The end result is familiar yet modern app design that drives on the notion of you-already-know-how-to-use-it. The initial design I had did feature lots of glows and shadows to support the neon-like-fluorescent feel of the mood board, but after some back and forth we decided that it made the whole thing too crowded and, as is the winning argument always, the simpler something is, the better it is. Thus the final result is clean, has barely noticeable use of shadows and gradients.


Asko worked with us to help design the UI / UX for a mobile video calling app - it was a great pleasure to receive his pixel perfect interpretations of our mock ups and mood boards - he managed to capture the look and feel of what we were after using his great graphic design skills and helped forge the user journeys in to what has been a very successful project.

He delivered as quickly as we could have hoped for and was always available to answer questions and deliver changes. Will definitely be working with him again!

— Tom Belton, Co-founder of Fleeting