Li5

Branding, UX/UI Design, Motion UI

About the Project

We were in charge of creating the visual and motion design for Li5, an app that makes creating video stories about your product fun and easy. Buying the actual products was second on their list of objectives. Their focus was on experience and entertainment, because a positive experience would eventually lead to conversions.

Branding

Concept &
Moodboard

We drew a concept board in order to explore different words and ideas related to the app. This helped us find a voice for the brand, and therefore discover the best way to communicate this voice visually to others.

Branding

The Liquid Concept

For starters, we wanted to focus on the type of content that would be hosted on the app, and the kind of experience the user would go through while navigating it. We came up with the concept of “Liquid” something that flows freely, quickly, something that adapts.

We noted a parallelism between the characteristics of something in liquid form, which is palpable, and something digital, such as videos, and a video stream. We also related this with the volatile origin of the brand name: Li5, short for “tell it Like I’m 5”, is internet slang for explain it quickly, in a very simple way, like I’m 5 years old.

After going through this conceptual breakdown, we were ready to start putting these words into images, and creating a visual voice for the app. In our design process, we focused on translating this liquid concept into shapes, typography, UI elements. We would later emphasize this concept by creating original animations.

Branding

Logo & Icon

The short length of the brand name (Li5) set the stage to create a typographic logotype which could also be used as the final app icon. By using the same symbol, we would ensure a solid communication and resonance of the brand name within the app and elsewhere.

This is how we came to the realization that the actual “swipe” gesture played a key role in this entertainment experience. And in this swipe, we found the dynamic, entertaining and fluid concept we wanted to convey. Therefore, we experimented further with the “swipe” interaction, finding visual ways to represent this movement and incorporate it within the monogram. After several color adjustments, legibility and shape improvements, we hit it off!

Branding

Brand style elements

Typography

We decided to use the font RUBIK. A strong and bold sans serif font with soft and rounded edges that created the slightly whimsical effect that we were looking for. It works great in small sizes, without losing its fun personality, which was great for translating this ludicrous look to the UI.

Color palette

The color palette we chose to use is vibrant and strong. The target audience is people looking for easy access to product video entertainment. Rather than something fancy we wanted to represent a fun and friendly feeling using red, white and a touch of yellow.

Buttons

Iconography

UX & UI Design

Wireframes

The client provided a number of rough wireframes for most parts of the app, as they already had a very clear idea with regards to how the core of Li5 was supposed to work. When necessary, we made some small changes to ensure that the user experience was going to function at its best.

UX & UI Design

Visual Design

While creating the final visual designs, we were always checking for interesting UI element patterns and trends on the latest and more popular entertainment and social networking apps in the App Store.

Animation

Motion UI

Motion UI is used to give feedback to the users, indicating either a gesture, or an action that was completed. It’s great for UX, but it's also great for enhancing the designs and communicating concepts. For Li5 we used animations that imitated the behaviour of a liquid substance in movement. You can see these animations on elements such as the video player, the logo animation, etc.

We hope you've enjoyed it. You can see more Case Studies below.

About Us

We are a Creative Digital Agency based in Buenos Aires, Argentina. We take pride in designing and building beautiful, highly functional products that people enjoy using. We also create unique visual identities and high-impact 2D/3D animations.

As an interdisciplinary agile team, our production process is flexible, collaborative, and adapts to each client’s needs. We look forward to working with you on your next project.