Research and Strategy

Into the Gloss Strategy

2022

Glossier’s flagship blog Into the Gloss has remained stagnant in terms of architecture and layout since its inception. 

In 2022, we wanted to give it a makeover to regenerate enthusiasm amongst the ITG community, support Glossier and match the demands of today’s digital audience. 

Objective

  • Develop a vision for the site to attract and retain existing customers, leaning into ITG's stand-out features 
  • Deliver design concepts and site templates that align with the unique content of ITG, its brand identity, and its community
  • Create a more integrated experience across the ITG blog and the Glossier e-commerce platform to unify them under their common brand 
The new Subte Map

The Process

The redesign was based on the strategy informed by in-depth audits of the current user experience, the audience and competitive analysis.

35

Best in class Experiences

We audited other digital experiences in and out of market to identify best-in-class solutions to problems we’re solving for

50+

Content Tags

We audited and catalogued over 50 tags across the editorial website

9

Content Types

We audited the current experience listing the different verticals, themes, and types of content under each section

Three Areas of Focus

There are three key aspects central to Into the Gloss that are identified in this website redesign.

Three areas of focus

Audience Analysis

Combining demographic trends and user groups

Demographic Trends

Not surprisingly, the main two target demographics were found to be Millenials (34.74%) and Gen-Z (24.20%).

Millenial

  • Initial target audience when Glossier started as Into the Gloss in 2010
  • Stayed with the blog over the years and have seen it change
  • Want to engage with unfiltered content, such as no-make-up makeup look and wellness

Gen Z

  • Support progressive ideals such as sustainability, inclusivity, and body positivity
  • Have a lower budget but also appreciate high-quality products
  • Pursue transparent and interactive dialogue
  • Digital-first people that break classic demographic barriers
Combining demographic trends and user groups

User types

We identified three user groups based on their awareness about Glossier or beauty related subjects, and goals

Casual User

Users with low awareness about Glossier or beauty related subjects who land on the website with no defined purpose

Subject-driven User

Attracted by beauty related subjects and consume specific relevant content

High Engagement User

Actively shop for beauty and skincare products, and consume all kinds of content on the ITG website

Combining demographic trends and user groups

How do Demographics and User Groups Overlap?

Examining how demographic trends interact with user behaviors and habits.

Combining demographic trends and user groups

Landscape Analysis

This analysis involved auditing best-in-class experiences of both direct and indirect competitors, understanding what was successful for these competitors, and practices to avoid in order to find a white space for Into the Gloss as a pioneer tastemaker in the beauty industry

Combining demographic trends and user groups

The White Space

Positioning Into the Gloss as an inclusive, conversation-driven, interest-based editorial that encourages its users to personally define beauty by introducing them to beauty and lifestyle trends through the lens of their community

Identifying the white space

Three Key Pillars

Based on the the key aspects and current experience audits, we have identified three key pillars critical to the user experience from start to finish.

Three key pillars of redesign
Three key pillars of redesign
Three key pillars of redesign
Three key pillars of redesign
Three key pillars of redesign
Three key pillars of redesign
Three key pillars of redesign

1.

Discoverability

Challenge

The navigation is vague and limited with no clear way of viewing all the verticals that Into the Gloss has to offer

Opportunity

Create a new taxonomy for  the verticals so users can easily find and navigate across all of them. 

Challenge

The use of static elements and limited search function do not support consumers who don’t know what they are looking for

Opportunity

Include organic discovery elements that change with time or are based on user preference to create a dynamic exploratory experience for all the user mindsets

01 Discoverability

2.

Engagement

02 Engagement

Challenge

The variety and exclusivity of content gets washed over by same inflexible format which does not leverage its unique visual and motion components. 

Opportunity

Capitalize on the variety of content types that ITG has to offer and leverage visual elements by highlighting images and videos

Challenge

The content organization and presentation doesn’t provide instances to attract and engage the different user mindsets

Opportunity

Diversify pages to continue supporting the high engagement user while optimizing to attract the casual users, to create an engaging experience for all mindsets. 

02 Engagement

3.

User loyalty

Challenge

Low conversion to sales as ITG doesn’t provide any clear visual indicators and pathways for users to purchase products

Opportunity

Have a stronger connection between the various e-commerce platforms and the editorial to encourage users to shop

Challenge

ITG offers minimal incentives for user loyalty and retention beyond the subscription CTA

Opportunity

Reward both participation and purchase and create incentives or systems to keep users coming back

03 User Loyalty

Supporting Framework with Content

The new experience will only be as successful as the content, product system, and technology that powers it.

New Site Architecture

New Site Architecture

A newly designed detailed taxonomy and navigation

  • Introduces consistent categories that make a coherent system
  • Detailed subcategories help users find exactly what they are looking for
  • A modular system to categorize the articles
Aligning Brand Ideology with Glossier

Aligning Brand Ideologies

Using Glossier's Skin First. Makeup Second narrative

  • Emphasizes the connection to Glossier on a deeper level beyond pathing and visuals
  • Creates an empathetic narrative for ITG with a focus on users’ wellness
  • Diversifies homepage by breaking article lists into modules allowing users to explore different sections

Mapping Out the New Experience

To map out the flow of the new experience, we created three user journeys - one for each user type that was outlined in the audience segmentation.

User Journey - Casual User
User Journey - Casual User
User Journey - Subject Driven User
User Journey - Subject Driven User
User Journey - High Engagement User
User Journey - High Engagement User

Low Fidelity Wireframes

The process started by developing wireframe sketches to lay a solid foundation for the components, templates and modules, as well as strengthen the pathing of the system.

Desktop Low fidelity Wireframes

Mid Fidelity Wireframes

I created a component-based design system laying the groundwork for a simple but scalable user experience, that is engaging, immersive and complete.

Desktop Low fidelity Wireframes

Final Screens

Designed by integrating the User Experience Strategy and new UI Creative Direction to create a flexible and dynamic modular system.

Redesigned Desktop Screens

Desktop

The modular system allows for variety keeping each screen fresh and exciting while also creating a consistent system that is easy to repurpose or modify.

Redesigned Desktop Screens

Mobile

Applying the modular system such that it is responsive to screen size and work across various touchpoints without losing any functionality

Redesigned Mobile Screens

Color Palette

Retaining the predominantly black and white color palette, while refreshing it with bright pastel pinks to develop a modern, youthful, yet sophisticated look and feel

Color Palette

Typography

Pairing a simple standard sans serif HK Grotesk with the delicate decorative Panamera to emulate the themes of wellness and beauty

Brand Typography

Icons

Elegant silhouetted stroke icons to fit the modern, sophisticated visual design

Redesigned Icon System

Symbols

Using a sharp stroked angle as a constructing principle, creating bespoke icons for each section

Newly designed section symbols