Air App Design

Air is a live social video platform for users to share experience, knowledge, and ideas. Working directly and collaboratively with four front-end developers and the marketing team, I designed the new interface of this product. The company is a startup based in New York and I was the only in-house designer at that time.

(The concept has been repurposed but some of the design has been adapted in the new app)

The company

Design Sprint Made Easy

Platforms

Mobile App

Time

08/2017 - 11/2017

The Challenge

When I first joined the team, the mobile app was called Ayo and has just been launched about one month. The app has been designed and developed by a team in Romania and the

Also,

  • Unclear definitions of product features: The product managers were still trying to figure out a better way to absolve users and it's also my responsibility to dig out the user needs.

  • Difficulty to use: The original design was not so intuitive to use, especially for the first time users. For example, some of the icons used were quite hard to understand and thus resulted in confusion and poor user engagement.

  • Inconsistency in design: The design language was inconsistent across different screens. For example, the buttons in the following screenshots were very different in font stylings, colors, sizes, and border radius, which made it impossible to set up the brand identity.

↥  Screenshots of the original Ayo app

The Goal

Increase user engagement and smooth user experience

Being the only in-house designer, I was assigned by the CEO to handle everything from the top to bottom: from wireframes to visuals, and from information architecture to user flow. My priority initially was to refine most of the screens and also make sure that the design is relevant to the last version. Making the whole process more engaging and interactive was my main focus.

Process

01. Define the user cases

To better understand the users, I started by creating the persona to target on. I defined two typical user cases: one viewer, one contributor, or the so called livestream broadcaster. Meanwhile, the two kinds of users can switch their roles at times.

↥  Persona: the viewer & the contributor.

02. Figure out the user flow

The second major UX challenge was ensuring a simple and modern layout that allow users to scan the content. One problem of the previous article page is that it’s using a grid system different from all the other pages (e.g. the product download page). To ensure a consistent experience for all users across the site, the article page needed to follow the same grid system, which also gives more generous space to the main content.

↥  User flows.
     Top, early flow ideation.
     Bottom, digital user flow.

The Solution

01. Improved navigation - aimed at clarity and engagement.

The previous navigation failed to use a universal language that most people can understand and was not consistent in different sections, leading to confusion and decreased engagement. The new exposed navigation at the bottom and the top of the screen uses more universal icons, provides better visibility for newer sections of the app, and also allows users' thumbs to interact ergonomically - even on larger screens.

↥  The navigation, before and after.


02. Home to the freshest content - aimed at bolstered discovery

The home is the first screen that users encountered upon opening the app. However, the screen was left blank only to make requests and answer questions, which was a huge waste of the most visited real estate.

The new Discover section became the app’s default landing section. By surfacing the actual content, the new design provides users with a deeper, richer experience to immerse themselves in and encourages exploration throughout the app.

↥   The new home section provides richer content sorted by popularity and from the people the user follows.

03. New features - avoid social loafing.

To make it even more engaging for users to ask and answer questions, a key feature of inviting people to answer the existing questions was added. Thus, people who might be more informed of the specific knowledge will have a higher possibility to get the requests.

↥   The requests come from system suggestions as well as user invites.

04. A unified visual language - supports a cohesive experience

The design of the app failed to provide a cohesive experience that can be easily understood by users, or a common language that can be efficiently implemented by the engineers. Therefore, before heading into the visual design, I need to create a unified, clear, and intuitive visual language for users to understand and for engineers to follow.