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. |
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.
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.
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.
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.
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.
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 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.