ipsy offers a subscription service which includes five deluxe-sized beauty products delivered every month. Each subscriber will received a personalized Glam Bag, tailored to their beauty preferences. The online portal offers subscribers a place to view their products and learn how to use them. Every month, ipsy creates relevant content and tells a themed story related to the products sampled. Subscriber can also review their products to improve personalization.
The main space where subscribers can see the products in their bag every month is the Glam Bag page, which is also the heart and soul of the application. Based on qualitative feedback we received from focus groups, our subscribers are mostly interested in what products they are receiving in their Glam Bags and how to use them. The goal of the redesign is to improve engagement and retention by offering relevant Glam Bag and product related information.
The Glam Bag, product, and story details pages are mainly viewable as a part of the logged-in experience. Subscribers will see the Glam Bag page as their home screen, and then drill down to view product or stories. From the main navigation system, they can also go to other parts of the site. Most of our email campaigns will also directly link the subscriber to either the Glam Bag page or specific product pages.
Existing Glam Bag and product pages were created when the company was smaller and focused on showing potential subscribers the variety of products sampled. As ipsy grew, improved personalization, and had resources to curate educational content, the existing pages were not scalable and did not communicate ipsy’s value well to its subscribers. In addition, the existing page has many elements pink floating elements, causing subscribers to loose focus, making it hard to digest important information. The hero image along with the past Glam Bags menu are tall, pushing products further down the page.
In the beginning of the redesign, we started wide and compared drastically different navigational methods around the Glam Bag page. We identified some elements that are must-haves, such as the products each subscriber received, and organized the page around bringing them into focus. Then the nice-to-have features such as individual stories, and monthly theme cover image were prioritized and added to the page. The majority of our user base engages with their Glam Bag and product pages on their mobile device, so we also designed with common mobile interactions in mind.
During the initial exploration, I also noticed that time is an important aspect to consider. Being a subscription service, there are times during the month where the subscriber has not received their Glam Bags vs. the majority of the latter half of the month where all Glam Bags are delivered. The distinction is important here because in order to keep subscribers engaged, we need to have additional content on the Glam Bag page that are not related to the products. After receiving the bag, the most relevant content changes for the Glam Bag page as now the subscriber would prefer tips & how-to’s over theme related content. We also want to give the subscribers some time to try their products before they review, to ensure that their reviews are honest and meaningful.
My co-designer Jeannie and I took the requirements and sketches and narrowed them down into two main variants. The first one highlights the content that the marketing team produces every month and condenses them into a horizontal carousel on the top of the Glam Bag page. Additional bag related information lives underneath. In this one, the downside is that during the beginning of the month when we are still personalizing the products for our subscribers, we would need to fill it up with sneak peak or dummy content. They would also need to be different than the content in the carousel. The other version we explored was a feed which contains a section for products, and a section for stories. In this one, there would always be content on the page regardless of the time of the month.
After wireframing, I also turned both of these versions into high fidelity prototypes in order to evaluate the navigation and interaction of the two. To validate the ideas, we circulated both of these designs with business stakeholders and the larger product and engineering groups. The feedback received indicated that v2, the feed model, is a lot easier to understand as a concept and to build from an engineering perspective. The feed is a model that our demographic is already familiar with, seeing that the majority of our subscribers are also using Facebook and Instagram. The feed is more scalable because it is modular, therefore the changes to the page is more predictable depending on the time of the month. Before products are received, only stories are shown, with the Glam Bag section at the bottom. Towards the latter half of the month, the order flips, bringing products into focus. Subscribers can also toggle between the 2 sections very easily. With the modular system, new stories or sections to the page can be easily added.
The monthly content differs drastically depending on the theme of the month. So the framework designed for the Glam Bag page has to accommodate for all sorts of different styles of imagery. During the visual design phase, we substituted different styles of image assets to ensure that the skeleton would work.
There are different subscriber states and lifecycle states, we wanted this to reflect on the Glam Bag page in order to personalize the experience as much as possible. Below are some modules that reflects the front-end UI of their lifecycle. Since the Glam Bag page is modular, logic and interfaces can be easily added and changed. Each module can have a specific call to action associated with the state.
Due to time constraint, we did not conduct usability studies prior to releasing the feature. Since the team unanimously agreed that the redesign is easier to use, more scalable, and heading in the direction that is aligned with the ipsy brand and how we see ourselves as a company, we decided to roll it out to 100% of our subscribers after QA and closely monitor engagement and retention metrics. Good thing though—the redesign of the Glam Bag page significantly increased retention and engagement rates!
When the design team’s roadmap opened up a bit, we decided to get some qualitative feedback from our subscribers. We invited 10 subscribers for an hour long on-site interview and asked them general questions revolving around how they felt about the product and stories section, and tested the ease of navigation.
Learnings from designing this product:
Product: Nipun Sachdev, Jen Faenza
Design: Sophie Su (me), Jeannie Nyugen
Engineering: Gulsah Kandemir, Vishal Chothani, Eugenia Leong, Faraz Sherwani, James Lu, et.al
Analytics: Charles Amaya, Paul Stoffel
Marketing: Stephanie Lin, Lauren Koa, Marilena Zeprun
Creative: Phoebe Yu, Gigi Jack, Sheela Shoskin
Support: Kaila Bryan
© Sophie Ying Su, 2017