Freyja - UI/UX Design

Designing an online community for beauty enthusiasts

Client

Escentials, Luxasia

Role

Product Designer

Duration

Two months

Team

2 designers, UX Lead, 1 PM, 1 Tech Lead

💭 Introduction

It all started when the product team of Escentials flew to India to discuss a project with us. Escentials.com by Luxasia is a beauty, fragrance and cosmetics e-commerce site (they also have physical stores) that has set high standards in Singapore by staying relevant to ever-changing lifestyles and preferences of the individual.
The founders wanted to build an online community of beauty enthusiasts that would sit in the existing e-commerce site of Escentials. This community would generate greater sales of the products and also engage the audience with quality content.

🏃🏻‍♂️The Design process

Landscape analysis.png

🏃🏻‍♂️ Design Sprint — Why are we building this community?

We started off with a 2-day design sprint to discover the most important aspects of the community and how to tackle them while aligning with business goals.

Day 1

We followed the Design Sprint process by Jake Knapp. Personally, it was an amazing experience for me as it was my first Design Sprint. Thinking spontaneously really bought out my raw creative side and compelled me to ask the right questions. 

hmw1.jpeg

Day 2

of the sprint was more of figuring out other aspects of the product — like integrations with social media technology and the back-end they’d be using to pull in data from Instagram and Facebook (Olapic was what they used).

 

Key Takeaways 

Desktop - 2.png

💄The people problem

People who use Escentials wanted to engage with the beauty community online. A good community would make the E-commerce experience of cosmetics much more engaging.

💼 The business goal

Escentials's main goal was to increase their sales by at least 10% and increase the customer engagement on their website. 

The objective of this project was to design an online community of beauty enthusiasts that would sit in the existing e-commerce site of Escentials by Luxasia. This community should generate greater sales of the products in the e-comm site and also engage the audience with quality content.

🧐 Problem Statement

🔎 Research—understanding the users & the business

My process

After the sprint, I reflected on our outcomes and tried to define the problem better. I signed up on various of their competitor sites to evaluate them. I started following beauty influencers on Instagram to see what beauty enthusiasts (target users) engaged with. We had good insights from focus groups and 10+ user interviews based out of Singapore and Philipines (where most of our user base was) and formed two broad user personas:

1 copy 3.png

We did research into what makes good digital communities and mapped out the various aspects that and that Freyja must cover.

whatmakesagoodcomm.png

Landscape analysis

Landscape analysis.png

💡 Ideating - Structure and solutioning

Once I had done my research and scribbled out ideas, my teammate and I got together with our lead and came up with a broad structure for the 'Community' page within Escentials.com. We came up with a platform that would cater to most of the pain points of our users and help the business. Win-win!

Screenshot 2020-07-27 at 12.45.30 PM.png

User flows

These are a few user flows I worked on

1_WZzqLue8r_1nf3BgDtGqlw.png

Flow for Tagged Products and Posting a Comment

1_Dx1ukNAEt-DMDzaVGqGSFg.png

Flows for discovery from E-comm to Community and vice-versa

👩🏻‍🎨 Sketching & Wireframing

I believe problem-solving and sketching are interlinked in product design — I say this because I sometimes come up with alternate and better solutions in this phase than the research phase. 
60% of the Escentials's traffic was from mobile, so we decided to design mobile-first.

1_3-zsKYh0d_hogcOSPcpwiA.png
1_UDLkE2eGfQuyBRPzgosb_g.png

🧠 Design challenges

  • Interlinking Community & E-commerce: We came up with the concept of “Tagged products”, where users can tag products associated with their selfies/looks which links to the products in the e-comm site. The challenge here was to drive sales without losing user engagement. a) The post can’t be too long b) But the products need to be shown upfront to drive sales c) and there needs to be a selling point (a discount, maybe?). Final Outcome:

1_vQ__5YUS3ZFKc-BRVQnuSA.png

  • Groups, Topics or Hashtags? This was a major challenge until the end since all three compete to be one of the main aspects of a digital community. After quite a bit of research, we settled on Groups, as Topics or Hashtags become very vast in the cosmetics world. a) Groups are very scale-able. b) The learning curve for new users will be steeper for topics or hashtags. c) Hashtags can be explored through posts pulled from Instagram. 

Freyja_5.png
  • Sessions: Imagine you’re a girl within the 20-30 age range (practicing empathy), you love looking like a boss, and you have these makeup model idols that you follow and aspire to be like. What if you got a chance to ask them questions, live, 1 on 1? That was the idea behind Sessions. This section required a lot of thought as we had to build it from scratch. We tested out our initial ideas with users and iterated on the feedback.

Desktop_Sessions_Basic_01 1.png

🎤 Testing & Iterations

After the first round of wireframes, we made InVision prototypes. The clients tested this out with their focus group of beauty enthusiasts and influencers of varying ages. 

The feedback was surprising — Most of them were confused with the feed format of the home page (Fig.1). So we now had to rethink the onboarding structure of the community after login/signup. After brainstorming, we came to the conclusion that the homepage should be a simple entry point to all of the other pages. It gave the user an overview of what the Freyja community was all about. We came up with Fig.2 as the community home page. This breaks traditional onboarding norms and is more of a landing page.

Fig. 1

Fig. 2

iteration.png

👩🏻‍🎨 Visual Design - website

freyja_vd.png

🥳 Product impact

Desktop - 1.png

🎓 Key Learnings

  • This project taught vast amounts about design, people, time management and teamwork. I was never someone who’d be interested in the area of beauty or fashion, this project put me way out of my comfort zone and pushed me to very user-centered and data-informed in Design.
     

  • Designing an entire community for a completely different demographic than mine was not an easy task. A lot of discovery and mental modelling was required. Designing for 3 different platforms - Mobile, Desktop, Tablet was a great learning experience.
     

  • I leant the nuances of designing for a digital community. Doing in-dept analysis of existing platforms taught me key aspects of an online community and how that drives businesses.