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