Code and Theory
I worked on redesigning the Into the Gloss blogging platform, parent company of Glossier
Project Type
Code and Theory
Intern Project
Duration
Sept 2023 - Nov 2023
Role
UI Visual Designer
Market Research
Interaction Designer
Visual Designer
Tools
Figma
The Context
Into the Gloss was born in 2010 by Emily Weiss. The site is a space for talks and stories on product, career, and what beauty means for the modern women. Since the Glossier makeup brand by Weiss took the world by storm, ITG has been put on the back burner. The site continues to upload content, but there is less awareness of the blog in comparison to other competitors in the market.
The Objective
My objective is to research, strategize, and redesign’s Into to Gloss’ current website with a focus on increasing conversion and interaction rates and aligning Into The Gloss with Glossier.
Updated Site Structure and Visual Design
The site now begins with a large hero section that highlights the most recent + popular blog post, followed by a 4x4 article detail card grid. Tags have been implemented to enhance user filtering, and the sidebar navigation that was previously on the Into the Gloss site has been removed. The font of the site has also been updated to align with the Glossier site along with other visual components.
Glossier E-Commerce Incorporation
I chose to incorporate two modules: the Product List Carousel, which appears below any article grid, and the Product Detail Card, embedded within an article whenever a Glossier product is mentioned.
Created a Glossier Girls page to Increase User Engagement
The Gloss Gals page caters to users who enjoy video content like TikTok and YouTube, as well as photo-focused content such as Instagram blogs. It brings together real users' feedback and experiences with Glossier products on a single page. Users can also submit their content to be featured on the Gloss Gals page!
Check out the full Into The Gloss walkthrough
Check out the updated article pages as well as the Interview and Makeup pages to see the updated format of the website!
Background
I quickly identified the untapped opportunities that Into the Gloss had yet to explore and conducted an in-depth analysis of how top blog sites structure their platforms, aiming to make ITG more recognizable.
Competitive and Comparative Site Analysis
Lack of an adequate site structure
The homepage of this site appears to be messy and unstructured. It does not have a "sleek feel" to it. This seems to be a simple fix that could make a big difference to the user experience.
Current Site
The grid structure of the site is confusing. I feel that the site could be restructured to be a more clear and cohesive site.
Other Makeup-Focused Blog Sites in the Market
Byrdie and Milk makeup provide organized, structured layouts that incorporate grid style imagery, allowing more content options to appear in the screen
Competitive and Comparative Site Analysis
There was no Glossier E-Commerce embedded into the site interaction
Into the Gloss has no e-commerce incorporation although it is tied to Glossier. Got some inspiration from the Milk Makeup and Goop blogging site on what the standard is like and where to place it within the page.
Milk Makeup Product Carousel
Goop Product Carousel
User Engagement
Figuring out what topics align with an ITG customer and how to keep the blog posts exciting and engaging
The content currently lacks alignment with Glossier's consumer needs and suffers from infrequent updates. Interestingly, hair products are not available for purchase on Glossier's website. Moving forward, I want to align ITG with Glossier and the products they sell.
Furthermore, the article listing page for hair features only a limited number of articles, with only one standout piece providing comprehensive coverage of the topic.
Key Insights from Research
Insight One
The overall site structure is outdated and overwhelming for the current Glossier/ITG customer. How can we create a site that is easy for the user to navigate?
Insight Two
Lack of Glossier e-commerce and digital media incorporation... how do we convert a reader to a buyer?
Insight Three
Some categories on ITG seem disconnected from the user. Is there a chance to establish a category that fosters greater user engagement?
Redesign
Highlighting the solutions informed by my insights
Confusing Site Structure
Lack of E-Commerce Incorporation
Low Quantities of User Engagement
Redesign the site to better cater to the current customer base, which is Gen-Z oriented, social media savvy, and app-centric.
Exploring methods to incorporate e-commerce into the ITG platform, given that ITG and Glossier are sister companies.
Enhance the multi-channel marketing experience by integrating various forms of media content, including video and social media imagery.
Site Map
Getting into the information architecture of Jetset
A new Gloss Gals page has replaced the Hair Page, featuring enhanced social media integration with Glossier's exciting content, encompassing all modern forms of blogging. The navigation now includes a general page showcasing all makeup brands and a dedicated page filtering exclusively Glossier products, promoting the integration of Glossier within ITG.
Old Site Map
New Site Map
Wireframing
Selected Page Templates and Wireframes
Through feature ideating, I came up with Zone Diagrams to lay out the design structure of each page. Within each zone diagram, I laid out the features that can go within each zone. After mapping out each of the page's diagrams, I created individual components and modules which would then be used to build out each of the medium fidelity wireframes.
Visual Design
Solidifying the Brand Personality
I aimed to align the fonts and colors with the Glossier site to ensure brand consistency across both platforms. This update will encourage users to engage with ITG, addressing the current design's outdated feel and differences from the Glossier site. Additionally, similar buttons and product card interactions were incorporated to further integrate the product experience.
Key Learnings and Next Steps
Continue to iterate...
◘ Keep prototyping till I can do a full flow (login, buying, adding to cart, Gloss Gal interactions, etc) and be able to demonstrate all the features apart of the site.
◘ Start to work on the visual design aspect of the mobile interface and build out more mobile interactions.
◘ Practice creating annotations to provide for developers so that I can help streamline their experience of having to build out the site.
