Branding, UX/UI, 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.


Concept & 

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.


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.


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!



Brand style elements



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.





UX & UI Design


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.



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.


What do you think about this Case Study?

Love it!



What did you like the most?

How can we make it better?

We love constructive criticism! :)

What didn't you like about it?

We don't bite. :P

Thank you for helping us get better!

You can see more Case Studies below.