EMPLOYER
Crossing Minds
TEAM
3 People, Visual Designer, Product Manager, Myself
CONTRIBUTION
User Research, Usability Testing, Wireframes.
DURATION
January 2019 - March 2019
MY CONTRIBUTION
I created and conducted user research and moderated usability tests to understand the user base and their expectations for the onboarding, rating and recommendations experience. Based on the feedback and insights, I made proposals for product strategy informing the user flow and integration of onboarding and item ratings with the overall app experience. I then created user flows and wireframes for the redesign of the Hai app onboarding experience as well as interaction mockups for the item rating experience.
ABOUT HAI
Hai iOS App is a recommendation platform created by Crossing Minds, an AI startup using machine learning to help users discover experiences across domains, like movies, book, and even restaurants. The recommendation engine itself is as unbiased as possible, has no ads, is platform agnostic, and always free to use. The goal is to collect the most pure taste correlations from each user. Crossing Minds' business model is to take learnings, not data, from users to create an API that other businesses can implement and improve their recommendations.
THE CHALLENGE
A first version of the on-boarding experience for Hai iOS App already existed when I joined Crossing Minds. In early 2019, the product design team, comprised of a visual product designer, the product manager, and myself, was tasked with redesigning the on-boarding and tutorial experience for users.
On-boarding is the user's first introduction to the app. It was an opportunity to introduce users to features and educate them about essential functions and features. Since many features were added and improved since the original on-boarding was created, we also wanted to address the consistency of experience from on-boarding throughout the rest of the app.
ORIGINAL DESIGN
PRODUCT STRATEGY
Integrated and Consistent UX:
-
In the existing version of the on-boarding experience, users rated with a single tap to "like" and a double tap to "dislike". Tapping on items revealed heart icons where a "dislike" is equivalent to 1 star out of 5, and a "like" is equivalent to 4 stars. This was a different rating experience than the Train feature within the app where users swiped left for 1 star and right for 4 stars, or press and slide on stars to rate.
-
We also wanted to better understand how the on-boarding experience affected the user's expectations of the app experience itself, and adjust the designs accordingly.
Analytics and Business Goals:
-
Another factor was that the ratings lacked diversity. In Amplitude, our analytics platform, 1 and 4 star ratings represented more than 2/3 of the ratings when, within the app, users have the option to select from half a star to 5 stars, 10 star rating choices total.
-
Users often spent 10 minutes during on-boarding liking and disliking hundreds of items, sometimes even half an hour to an hour. We were concerned that users will rate most of the items that they knew and would not adjust or add to their ratings later on.
-
If that were the case, the recommendation engine would not be able to make the best recommendations since it would not receive the most accurate ratings. Then, from a business standpoint, the algorithm would not be as robust when our API is applied to B2B, the revenue generating part of our business model.
ORIGINAL RATING METHODS
3 Ways to Rate:
(From left to right)
1. On-boarding: Tap once (4 stars) Tap twice (1 star)
2. Discovery: Press and slide to select specific star rating
3. Train: Swipe left (1 stars) Swipe right (4 stars) Press and slide to select specific star rating
There were too many methods we were asking user's to learn, we needed to merge these options or remove some options.
USER FEEDBACK
User Interviews and Usability Testing for the Original Design:
Insuring an Integrated UX:
-
Feedback from first-time users during usability testing was that there were some screens that felt unnecessary, and the item cards were a little small.
-
We needed to condense some parts of the flow, and would need a solution for displaying item cards that provided a good selection of items for users to choose from, that was also large enough for more of the image and title to be displayed.
-
-
Users liked the ease of rating with tap and double tap, which was the original intention, but were unaware that their "likes" and "dislikes" were translated into stars once they reviewed their ratings in their Profile, and when they were introduced to rating items with stars upon entering the app. The users who noticed the difference did not like the inconsistency.
-
We decided to design alternative rating methods and gestures to bring the on-boarding rating methods closer to the Train experience including potentially redesigning the train experience itself.
-
-
Users expected that the interests they selected, movies, books, games etc (a minimum of 3), would be the interests they are shown once they reach the app itself, the current app showed all 6 available domains despite what users selected during on-boarding.
-
We changed the discovery feed format to display only the domains that users selected once users finished on-boarding.
-
Customizing the Recommendation Experience:
-
During user interviews, we also learned that the interests with which users decide to rate and train Hai is sometimes different from the interests in which they want recommendations. For example getting plenty of book recommendations from word-of-mouth, but needing better movie recommendations from Hai.
-
After all, that is the beauty of cross-domain recommendations, the kind of input (train) can differ from the desired output (discovery).
-
-
Additionally, many users return to the app to get recommendations for only 1 or 2 domains, like movies, or books.
-
From this insight, we gave users the option to change and rearrange the interests in their discovery feeds while keeping all 6 interests available for the Train feature.
-
Address Analytics and Business Goals:
-
User interviews also revealed that most users inherently understood their ratings contributed to better recommendations, and noticed that Hai was already making recommendations as they rated during on-boarding, and therefore are willing to spend time rating.
-
We can ask more from users during on-boarding, like rating specific star ratings and even including the bookmark feature to save items as they rate and as they discover.
-
References for the Rating Experience:
We referenced Tinder, Bumble, and Letterboxd.
The Train feature originally referenced Tinder, and allowed users to rate items with a swiping feature, swipe left for 2 stars, right for 4 stars, as well as pressing down and sliding on the stars.
We created mockups to explore experiences with binary decisions, like Tinder with X and heart icons for like and dislike, and Bumble Beeline where users have a lineup of potential matches in two columns that they can scroll through and swipe.
Letterboxd, a movie discovery and review app, had other labels that allowed users to indicate that they have watched the movie and/or like the movie, and can rate or add the movie to a watchlist.
RATING METHOD MOCKUPS
Alternative ideas for the rating method gathered from myself and the product team. We incorporate bookmarking in a few versions as well, since bookmarks also provide a better understanding of the user's tastes, although it carries less weight than the user's ratings.
Although we liked the different rating directions, the best version was also one that was easier to implement. The version we chose (below) is a combination of tapping then swiping to adjust the star rating.