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.
Design Sprint Made Easy
08/2017 - 11/2017
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
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
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.
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.
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 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.
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.
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.
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.