Aulo for the web

Moodboard for Aulo’s branding

Overview

Aulo is a web platform that enables people to book short video chat sessions with influencers. Subjects matter range from beauty tips to D.I.Y assistance over video chat. The goal is to use the Internet to connect people who need help with people who can provide help.

Aulo was successfully incubated at Up by M6, a French startup accelerator.

Mission

Kuma Studio was hired to design both the web app (UX and UI) and Aulo’s visual identity (branding). The team was made of Ulysse Sabbag and Walid Khoury.

Architecture (UX)

These are the blueprints, the work documents by which all missions start. By giving quick form to ideas, the dialogue’s foundation is much more robust.

One thing to note: this is a platform where there are, on the one hand, influencers providing a service (offering their time and expertise). And on the other hand, we have people like you and me simply requesting time to talk with these influencers over video chat.

UX: Mobile onboarding for influencers

Some elements to notice:

• The call-to-action is designed to be highly visible (following the idea that people are to be guided through a particular flow).
• There is a simple step indicator that signals progress, thus reducing cognitive load that comes with all onboarding flows. People want to know where they are, where they are going and approximately how much time it’s going to take.
• Familiar elements are to be grouped together in a single page. The first view (Expert Sign Up 1) asks the person for their account information, with nothing specific to the service.

UX: book a video chat session + user onboarding

This view shows the information the person requesting a video chat session needs to give in order to create a request that will later be reviewed by the expert or influencer.

First, we give people the ability to review whether the influencer is the right person for them. In order to do that, we present 4 elements:

• A description of the influencer’s job
• Reviews left by other users of the platform
• The influencer’s price per session
• And the influencer’s social media stats

Then, the person requiring a session can fill the information making up the request:

• Why do you want to talk to this particular influencer?
• How much time do you require? At first, we put three options with the option to add a different, custom timeframe
• Then, when should this session take place? available timeframes are shown in black while the ones with instant book are in orange. The selected timeframe is contoured with orange.
• Finally we ask of the users to fill their account information in order to send the booking request. This creates more incentive to finish the request as well as making it easier to finally enter the video chat session.
• This view is a bit long isn’t it? Scroll down to see the final UI.

UX: Desktop dashboard

This view is the dashboard with all your upcoming video chat sessions (Aulos) as an influencer. It was an interesting information design challenge as hierarchy was yet again of crucial importance. Here are the elements:

• The upcoming Aulo (starting in 2 minutes) will be highly visible so that focus can be directed towards the right target.
• When there is a request for a booking, a red notification badge will indicate that this item is to be dealt with quickly.
• Finally, accepted but not yet paid Aulos have lesser importance.

UX: just for fun, first information architecture ever made for Aulo with major user flows

Layout (UI)

Now to the sweet stuff.

UI: book an Aulo + onboarding

This is the user interface counterpart of the second UX presented above. Testing has shown that instead of putting all the information over one page, we could do something better and more intuitive by separating elements into multiple steps.

Here is the updated book flow:

• Now with visual design!
• The information about the influencer remains on the top of the screen (this is for mobile; on desktop the information remains on the left-side pane of the screen) and information has been reduced to focus on one type for each view.
• Account creation has been moved to the start of the flow, simply because the way payments were to be handled changed. Users had to provide payment information and this couldn’t be done properly without associating transactions to user IDs.
• We styled the duration and timeframe selector menus so that they were a bit less dull and a bit more fun.
• Finally, we added an “add to calendar” option at the end of flow and we thanked the user on performing a rather long process.

UI: Desktop dashboard

The UI version of the desktop dashboard features rows with different purposes (instead of one massive list). Another notable difference is more striking contrast between past Aulos, Aulos that are to be dealt with quickly (requests) and Aulos that are to be dealt with urgently (in-session).

Further designs

On the left: the landing page. On the right: the Thank you view after the booking flow is done.

Thank you for reading. If you have any question, please contact me: ulysse@kumastudio.com