top of page

ICON DESIGN

Train Customize 3 Iphones.png

EMPLOYER

Crossing Minds

TEAM

3 People, Visual Designer, Product Manager, Myself

CONTRIBUTION

Icon Design, High Fidelity Wireframes

DURATION

May 2019

For this project, I contributed icon designs for a customization feature for the Hai Avatar on the Hai iOS App.  The avatar represents a smart personal assistant who collects knowledge about the individual's taste preferences in the form of ratings and bookmarks in order to make recommendations for movies, books, restaurants etc.

THE CHALLENGE

The Hai recommender system values the uniqueness of individuals, and does not compromise it's recommendations with advertising or the quality and suitability of content with bias towards another content provider.

 

The avatar becomes uniquely attuned to it's user's taste preferences and we wanted to convey that element of personalization for individual using the app by allowing users to customize the appearance of the avatar.  Also, once users add friends on the Hai app, they will be able to see their friend's unique avatars.

The goal for this customization feature is to add to a sense of ownership and delight for the user.

Background

BACKGROUND

  • We did not need to reinvent the wheel here. We wanted a familiar way for users to customize the appearance of their avatar, which will also be animated.

  • The Hai App has different headers and backgrounds that shift with the time of day. We want the users to see the context in which their avatar will be displayed.

  • The icon design will need to be familiar yet well integrated with the current visual design system.

We referenced Instagram, with which many of our users are familiar, particularly their flow for fine tuning the filters.

Sketches

SKETCHES

Screen Shot 2019-05-24 at 10.59.54 AM.pn

After sketching a few ideas by hand, I created the next iterations icons on Figma. The project itself had a short time frame, so the iterations are limited.

Designs

FINAL DESIGNS

Screen Shot 2019-05-24 at 11.00.13 AM.pn

I settled on designs with a triangle and circle as overall motifs.  The identity of Hai is a feeling of lightness and friendliness while also being adaptable and intelligent.  These shapes feel the most true to this identity.  The cutouts and negative space implies an openness to learning and absorbing information. 

 

There will also be other visual elements that can be customized in the future, like the addition of other layers and complexity to the avatar form, and these abstract principles will leave room for those new features.

Screen Shot 2019-05-24 at 11.01.02 AM.pn

The labels for the customizable visual elements were pretty straightforward, except for "Dimension" which initially used the term "Amplitude".  We settled on the "Dimension"as a friendlier word which also implies depth to a form.

USER FLOW

With the addition of new customization features, the icons may change, and given more time and with usability testing on this project I may discover other visual elements that are more suitable.

 

This project was a great exercise in abstract visual design.  Since most of my work on the app is UX design and Research, it was refreshing to work on a contained project focusing on creating components that integrate well with the current visual design system.

bottom of page