THE PROBLEM
MORE IS MORE
The current Main menu is inundated with content for users, yet, they still feel that the catalog lacks breadth. Despite featured experiences being placed strategically in the central focal point, the click rate remained fairly low. Once we did a deeper analysis of incoming customer support tickets, we found that users felt overwhelmed with all the information presented on the Home menu, resulting in a lower engagement rate with content.
GOALS
01 USER RESEARCH
I began the process by collecting data from customer reviews citing 'repetitive' or 'limited' content. It was important to also evaluate reviews expressing confusion with the current Home menu design to validate our hypothesis of the impact of overcrowding the UI. From the reviews, I was able to surmise four possible theories contributing to the negative response.
02 ANALYSIS
I performed a comparative analysis on different content-based apps like Calm, Spotify, Apple Music to assess the term and icon used to describe their catalogues. The results varied, leading us to devise a multivariate plan to test the efficacy of four options - Browse, Explore, Discover and Library.
03 WIREFRAMES
Based on my findings, I proceeded to explore various layouts of the Home menu with low fidelity wireframes. I created quick iterations to review with the content and product team and together, we arrived at the solution we wanted to test first.
04 FINAL DESIGN
The product team's decision was to remove the readily available content in the Recommended and Daily sections, and replace them with the content categories, funneling users into the catalog. The challenge was to design buttons that captured users' attention while maintaining the information in the surrounding panels. I designed spatial thumbnails with a parallax effect that closely reflected the experiences in their respective categories.
05 RAPID PROTOTYPING
Using Shapes XR, I created some quick prototypes of the parallax effect by layering graphics divided into three layers for the foreground, midground and background. I was able to determine the Z depth of each layer from the camera and test the effect directly in headset. This preview served as a visual reference for the developers to work from.
CHANGES I MADE
01.
Removed outdated Recommended content (helps to avoid appearing repetitive and making users reliant on whatever is available on the Home menu)
02.
Removed ephemeral content (Daily TRIPPs) - helps avoid user frustration about their favourite experiences removing. Forces them to dig a little deeper into the catalog to find more content
03.
Parallax design of category tiles - shows users that there is enough content to fill multiple categories. Buttons are designed with an engaging hover effect as clear signifiers that they are interactive. Also, I decreased the contrast of the UI to make the central content block pop.
04.
New icon from Safari compass to four squares (similar to major apps like Apple Music, Headspace)
05.
Changing ‘Explore’ to ‘Browse’ - indicates clearly to the user that they can find more content in the catalog. Based on our multivariate test, we were able to determine the highest performing term and icon.
163
+
%
INCREASE IN ENGAGEMENT WITH CUSTOM CALM EXPERIENCES
163
+
%
INCREASE IN ENGAGEMENT WITH CUSTOM FOCUS EXPERIENCES
1269
+
%
INCREASE IN CLICK RATE ON DAILY CALM FROM BROWSE
793
+
%
INCREASE IN ENGAGEMENT WITH CUSTOM CALM EXPERIENCES
733
-
%
INCREASE IN ENGAGEMENT WITH CUSTOM FOCUS EXPERIENCES
300
-
%
INCREASE IN CLICK RATE ON DAILY CALM FROM BROWSE
