Background \
theOmelet Inc. is a video production company specializing in interactive online media. It helps businesses to create video content that drives awareness and engagement with the audiences from a different cultural background. The company has developed several culturally-rich brands of videos each conveying different layers of information within its global guidelines, and have since achieved much recognition through internet broadcasting and online social networks.
Vision \
theOmelet.com website aims to offer a truly interactive video platform that aligned with the company's strategic vision. The objective is to provide relevant and essential information that adds value to the video content, and able to effectively communicate with the audiences through multi-media storytelling. Such interactive experience differentiates theOmelet platform from other online broadcasting programs.
Year
2011, 2012
Lead, UX & Strategy, Art Direction
Adam Zhang
Branding, Visual Design
Jocelyn Cheung, Kat Endo, Adam Zhang
BRAND VISUAL IDENTITY
Concept development for the brand identity starts from breaking down the brand vision into essential attributes. The result is a series of conceptual sketches which offers different combinations of the design parameters. For re-branding, audience participation is key. Meetings were assembled with team members, as well as selected users, to test which works the best and why. Soon a concept emerged with a clear message - 'Seeing The World Through theOmelet Eye' - which precisely captures the company's vision and its fundamental business offerings.
The challenge is how to effectively articulate this vital message through the company's multiple media properties and various brands of videos, each with its distinctive information. To approach the goal, the team created a complete Visual Identity System (VIS) with adaptability. The idea is to embrace the notion of divergence (also the company's nature) through developing a mutable logo and a color palette that can be applied to multiple media outlets and usage contexts.
LOGO SPECS \
COLOUR PALETTE \
TYPOGRAPHY \
VISUAL ELEMENTS \
STATIONERY \
PRESENTATION TEMPLATE \
LOGO ANIMATION FOR PRODUCTION \
UX & INTERACTION
The objective is to make theOmelet.com the center for all videos for its audiences. However, the users found the existing website to be cluttered and weren't able to smoothly navigate or identify the specific content they were looking for. Instead, they turn to other channels such as Youtube to serve the needs. Therefore, the most urgent quest to re-establish the website is to resolve the Information Architecture and develop a content-focused page structure that eliminates the confusions. It takes three essential steps.
Simplification \ The entire website is slimmed down and developed upon the video programs, and the key pages are designed using a unified layout which only keeps necessary content, links, and visual elements. Meaningful Interaction \ Turning passive user interaction into active ones. Visual Language \ To differentiate each video program, a unique color is used on visual elements such as iconography, text colors etc. Therefore the audiences will instantly recognize which program page they are browsing.
VIDEO PLAYER INTERACTION \
VISUAL DESIGN
The Pre-launch takes place before the new website to be deployed to the public. The purpose is twofold. First, the temporary website offers all the original videos re-organized with the new content hierarchy for audiences to develop a clear understanding. Second, it provides a sneak peek at the new brand identity for the team to test the new visual language and collect feedbacks and data from a larger group of audiences.
HOME PAGE \
LOGO APPLICATION \
The transparent logo on site navigation sees through each of the videos program's banner image and changes color, demonstrating the idea of 'Seeing The World Through theOmelet Eye'.
PROGRAM PAGE EXAMPLE, 3% OF LIFE \
THE INTERACTIVE MAP FOR 3% OF LIFE \
3% of Life is one of the video brands which features location-based local lifestyle videos. An interactive map is developed for browsing and navigating through each video content and served as essential supplementary to the program.
ICONGRAPHY FOR THE 3% OF LIFE MAP \
Inspired by Chinese letters, a unique icon set is designed for user interactions within the map. Each character represents a particular category from the video program - Eat '吃', Fashion '潮', Fun '玩' and Shop '店' - and instantly recognizable for audiences from different cultural backgrounds.
VIDEO DETAIL PAGE \
