UX Experiments

Incorporating AR into the Glossier User Experience

(Published January 2020)

The Challenge

The market for skincare and makeup is growing exponentially. Specifically the global skincare market is projected to increase ‘USD 45 billion between 2018-2023, according to Technavio. CNN Business has a wonderful article that highlights the growth that the skincare market is making . The article states that sales of skincare products in the US grew by 13% in 2018, hitting $5.6 billion, while makeup sales increased just 1%.

Social Media plays an enormous role in this growth; brands are utilising apps such as Instagram to market and now sell their products. The media company Awesomeness’s study on Gen Z found that they value diversity, inclusion and talking to companies on various channels. In fact 66.6% of Gen Z consumers experience an increase in positive feelings about a brand because of an association with a social cause, and 58% said such an association could spur a purchase.

I found Glossier on instagram and immediately was attracted to their brand. They promoted clean products, beauty positivity and inclusion (philosophies close to my heart). Glossier is a startup that was founded in 2010 and has used distinctive marketing, in depth user research (etc via into the gloss), technology and social media to their advantage.

I decided to challenge myself by utilising the brand that I adore to build within a business’s constraints.

“Glossier’s real innovation was optimizing for the internet at every step: using the tools of the social web to turn readers into followers and followers into brand evangelists, unpaid product advisers, and, maybe, something like a community, albeit one that buys things from you.”— Buzzfeed

Goals

As an extension of building my portfolio I decided to create an IOS app design for the Glossier brand. I set myself a timer of 6 hours to set goals, research, create personas and create a design for skin care lovers.

Project Goals

  • To build a user persona based on domain research.
  • To work quickly through a design process and produce deliverables using HCD.
  • To produce a design that incorporates Augmented Reality (AR).

Personal Goals

  • To work as a UI designer, UX designer and User Researcher.
  • To further develop skills in Framer, Figma and Principle.
  • To create a design that is accessible to all.
  • To create a design in accordance to the design principles of Glossier.

Disclaimer: This is a passion project. I am not affiliated with Glossier, I simply took on this challenge because I love Glossier and designing.

Domain Research

I scoured the app store for similar brands like Glossier selling their products online. I struggled to find independent brands with apps. Indirect competitors Boots, Superdrug  and BeautyBay are big brands who stock multiple cosmetics, however they do focus on skincare. I chose to look at these brands to understand how apps in this domain are packaged, presented and what they offer.

App Evaluation

I analysed the 3 apps based on points from Nielsen Norman Group’s Usability Heuristics:

  • Consistency and standards
  • Recognition rather than recall
  • Aesthetic and minimalist design
  • Flexibility and efficiency of use

If I had more time I would look into all 10 heuristics as they are critical for effective UI Design.

competitors

App Reviews

I scoured through reviews of the apps to empathise with the user and work out their pain points.  After reading reviews for all 3 apps, the main problems I recognised were:

  • Customers get frustrated when the app redirects them to the mobile site within the app.
  • “Clunky and unhelpful navigation”.
  • Unable to make purchases through the app.
  • Unfriendly for voiceover users.
  • Long load times / app crashes.
  • Buttons at three top not working and too high.
  • Unable to sort items by brand but category first.
  • Frustrating to go into my account first to see my favourites (via wishlist).
“We have 14.4 million active Boots Advantage Card members, of which around 90% are women.” — Boots

Persona

Based on the research I conducted I was able to create this persona. Boots states that it has 14.4 million active Boots Advantage Card members, of which around 90% are women.

I will focus this design on Jackie, I formulated a persona based on the target demographics of the Boots and of people similar to myself.

persona.png

The End Result

I created this prototype via Figma. I really focused on Glossier as a brand and replicating them through the design. I followed their website closely, while making a changes that would improve the current user experience. Note - This is a clickable prototype, check it out for yourself.

Video Prototype using a friends video.

AR & VR are one of the big topics in the tech scene at the moment. More and more beauty companies are incorporating AR into their products and  I wanted to design a feature that would enable Glossier to do the same. The ‘Swatch Match’ is a feature that allows users to utilise AR technology to swatch products directly onto their face via a camera. I think this feature could reduce the frustration of picking shades virtually, that users (like myself) currently face. The feature doesn’t even need to stop there, AI and Machine learning can be utilised to create personalised swatch suggestions!


Home 2.png
Homepage
Page_00009.jpg
Likes / Wishlist

Quickbuy.png
Product Page with Swatch Match
Page_00013.jpg
Swatch Match Landing
Page_00014.jpg

In Conclusion

I had a lot of fun with this project, thinking about the future tech within the beauty/ retail industry is so exciting. I also learnt so many new skills in Figma, researched new trends in UI/ UX design and  was able to create an interactive design. I hope you enjoyed the show!

Read more