hai_cover.png

Hai // Product Design

 

OVERVIEW

Hai is the recommendations app learns which movies, shows, books, restaurants and songs you like and recommends new ones you’ll love.
I’ve been leading the product design efforts for this AI based recommendation app both for mobile app and desktop.
This is the product launch video that I’d art directed.

 

Role as a lead product designer

•   Wireframes, High-fi mockups, design handoff

•   Establish and maintain design system

•   Establish and maintain brand

•   Interactive prototype and motion mockup

•   Marketing creative work

•   Testing and reporting JIRA ticket

•   Tools Used: Figma, Principle, After Effects, Confluence, JIRA, Slack

 

Design System -Moshi Moshi

The design system keeps our brand integrity and help us not only for designing the product but the design hands-off thus it brings efficiency and quality to our product development.

These principles help us to solve the complex design challenges we may face in the future.

Keep user to see what they need

People use our product for getting good recommendations without spending too much time.
We only show the information that helps our user to find good recommendations as opposed to showing many choices or information.

Bring each recommendation in the best possible way

We recommend the various type of recommendations from media contents to restaurants and possibly more in the future.
One way to show recommendations won't fit all so that we need to be flexible to find an optimal way to provide recommendations in the best possible way.

Create a healthy relationship between user and AI

AI is not a human, but we want our user to build a healthy relationship with their Hai.
We don't use the words or sentences in UI that create the feeling of dictation toward Hai.
Always consider the interaction happening our users and Hai like the human to human interaction.

 

UX Iterations

Throughout the iteration phase of Hai UX design process, we have discussed MVP features as team based on the principle defined above.
Here are some examples of those iterative design efforts to design our signature user experience “Ask Hai”

The latest design of 3 main UXs “Discovery”, “Ask Hai” and “Train” screens

Ask Hai flow to add friends and platform to the search filter

Ask Hai flow to add friends and platform to the search filter

The background color changes based on the time of the day

The background color changes based on the time of the day

The design iterations for the rating interaction design

The final (latest) design for the rating interaction design

The specification for the popup rating layout

 

Grid System

The uniform layouts create accessible experience across different platforms and screen sizes.

 
 

Primary and Secondary Color

Hai color palette emphasizes the product value of Hai.
A comprehensive color palette has been developed to provide flexibility while creating a unified, recognizable appearance across all communications.

Library

Library is the collection of buttons, iconography and graphics that every designer copy and use their product design work

 

Components

Components is the set of the UI objects that can be used in the different type of situations

 
 

Graphic Style

Our graphic assets includes avatar, illustrations and background convey our brand identity not only in the product but through marketing graphic assets.

4. Graphic Style.png
 

Brand guideline

I also worked on the brand guideline to keep our brand integrity across all of the communications we might have in the future including marketing.

 
5. Stationary (1).png