A community app for an inclusive skincare brand

Timeline

9 days

Team

Diogenes Freitas - UX/UI Designer
Bruno Pulheze - UX/UI Designer
Anne Groos - UX/UI Designer

Deliverables

High-fi prototype of mobile/desktop app, presentation deck

Client website

www.goodlight.world

Summary

We created a community app for the skincare brand Good Light. One of Good Light's brand value is to bring underrepresented people in the skincare community together to share stories and talk about their shared passion for beauty. Our mission was to find a solution on how and where this could be made possible on a digital platform. Whether that be on the Good Light website as a feature or by creating an app. This would be determined in the research process.

Role

User research, feature analysis, user persona and user journey, storyboard, defining stage, information architecture, design system, low-, mid-, and high fidelity prototype, mid-fi and high-fi usability test, a/b testing, desirability testing

01 introduction

The client

Good Light, from the beauty website Very Good Light, is a personal care brand that believes in beauty beyond the binary.

Founded by David Yiln in 2019, the gender-inclusive brand creates a new space in the market for those who don't quite shop beauty by gender and focus on marketing for Gen Zers.

Good Light's logo is a moth. A symbol of beauty that is often forgotten, but is just as drawn towards the light as we are.

Good Light's formulation ethos is all about creating a more robust skin barrier with products that will hydrate, plump, nourish, and repair. Each of good light's products are gentle, clean, cruelty-free, vegan, with 100% sustainable packaging.

The brief

Good Light assigned us with the task to create a digital solution to expand the Good Light community. To connect under represented people in the skincare community with other likeminded people across different regions of the world to share their stories and their love for skincare, including LGTBQI+, non-binary, minorities groups and cultures.
Founder of Good Light: David Yiln
Good Light product: New Moon Balm

02 empathize

Getting to know the user

We started with doing initial research about Gen Zers. What are their online habits and are they part of online communities? We found some interesting articles online about digital behavior. One article on Harvard Business Review mentions:

“Younger audiences are leaving many public-facing social platforms and flocking to smaller, more intimate online destinations. I called these “digital campfires” and identified three reasons audiences were gathering there: to private message one another, to connect to a micro-community, or to participate in a shared experience.”

After getting a basic understanding of Gen Zers, we continued with our quantitative research.

61%

...of participants say they interact passively in digital communities

44 people

...said they would download an app to access the community

Quantitative research

We wrote down 3 goals of what we want to learn with this survey. We asked 16 questions and got 51 responses.

Are they part of an online community and how do they interact with it?

From the 51 answers, the respondents take mostly part in gaming and lifestyle communities. 61% Say they interact passively, preferring to read posts only (71%). Their preferred social media is Instagram, Twitter and Tiktok, with Instagram being the most used social media platform.

What do they look for in an online community?

The respondents look for sharing interests and common values along with being respectful for each other and are looking to experience a sense of belonging. Community members being rude and disrespectful or the use of fake accounts is their biggest frustration. Written posts and short videos are their preferred method of sharing.

Where would they like to access an online community?

78% said they would like to be part in a community through a mobile app rather than a browser. 44 respondents said they would download an app to access the community. This made us clear that creating a mobile app for the community would make the most use of the community.

Qualitative research

We conducted 3 remote interviews with Gen Zers and one theme that kept recurring was safety. Due to malevolent activity on community platforms, young users prefer a moderator to keep the platform safe for them to use.

How might we...

From the quantitative and qualitative research we created an empathy map en listed the pains and gains that come with creating an online community. With these insights we created 3 How Might We questions.

Pains

Lack of respect
Not feeling safe
Getting hateful comments

Gains

Share common interests
Sense of belonging
Voice your opinion
How might we create a safe space for users to be themselves?
“I'm afraid of negative and disrespectful people on social media.”
How might we help user get in contact with other users who share the same interests?
"I like group discussions that bring people together talking about something they all share common interest in."
How might we create an online environment where users feel a sense of belonging?
"I sometimes feel left out of the conversation, like I don't belong"

03 competitor analysis

What's in the market

Parallel to conducting the user research we wanted to know more about Good Light's strengths and what the competitors are doing in the market.

S.W.O.T. Analysis

Together with the stakeholder we put together a S.W.O.T. analysis to see where Good Light's strengths and opportunities are in the market. Their biggest strength is inclusivity and a strong sense of community and belonging. Expanding this community to include even more people will increase brand awareness and result in a bigger engagement with the brand and therefor more opportunities for increasing sales.

Market position

We used the market analysis mapping tool to get a better understanding of who Good Light is as a brand compared to other skincare brands on the market. Good Light has a niche focus and offers a small product mix.
Feature analysis
Market position

Competitor feature analysis

We could not find many communities curated by skincare brands. But Sephora is one brand that has a big community platform on browser and mobile app. Having many community building features like joining groups tailored to a user's interest, interactive posts and challenges. Following up by Supergreat, who offers personalized beauty tips. Two features that they all offer are reviews and beauty advice.
Good Light models
Good Light product: Cosmic Dew

04 define

Identifying user's problems

Now that we have a better understanding of Good Light as a brand and where and how Gen Zers form and interact in communities, it's time to specify where the problems are and which opportunities we can find to solve them.

User persona

For our user persona we focussed on someone who is a Gen Zer and is part of a minority group, since this is the target audience of Good Light. Maria Gonzalez (20) is a non-binary student who has skincare issues. Her goal is to get advice online to help her skincare while also expressing herself safely without body judgement and negativity.

User journey

We created a scenario where Maria tries to find information online to help her with her skin condition. She looks on Tiktok for advice, but soon finds out that the content creator is says homophobic comments. She feels a strong disconnect and wishes that there was a place where she feels more represented and understood. At this stage we can jump in and present her a place where she can be herself and share her love for beauty with others.

05 the challenge

Final brief

To round up our research and focus on a specific problem we created a problem and hypothesis statement. This will help determine what our MVP is.

Problem statement

We have observed that people struggle to find a safe space where they can express themselves, share their opinions about skincare and be with likeminded people. Our goal is to create an inclusive space where people can be their true self.

Hypothesis statement

We believe that by creating a safe community on a mobile app we will give people a space to express themselves. By being inclusive and authentic we will help people to shine their lights.

06 Information architecture

Mapping the structure
of the app

Organizing the information in a workable structure is the next step. This gave us clarity about which screens we had to design and how many steps the user needs to take to complete the user flow. We kept coming back from the ideation phase to iterate on the sitemap and user flow.

Sitemap

We mapped out the structure of the app. On top you see was we want to show on the main screen and in the bottom the pages that are accessible through the navigation.

We communicated with the stakeholder what to include in the app. Good Light regularly sends newsletter's where they interview user's of their product and share their personal story. We wanted to translate this in the app under the name 'highlight'. 'Very Good Light' is a the blog where the shop is originated on and 'moths' is how Good Light calls its community members.

User flow

We did the jobs-to-be-done method and selected two main jobs which are: send a private message to the interviewed person in a highlighted article and create and share a new post. For both jobs we created a use case.

Pre-conditions

Maria has already downloaded the app, is familiar with the Good light brand and has already created an account

Case 1: send private message

Scenario

We want to show how Maria can read someone’s highlight, comment on the article and send a direct message to the person being interviewed. The reason is the ability to connect with someone who might have a similar experience.

Case 2: create and share post

Scenario

We want to show how Maria can create a new post on the community app, giving her the opportunity to share beauty related content and interact with other.

Simplified

We simplified the flow by implementing a button on the main navigation bar for writing a post. Maria is now able to immediately write a post without having to take many steps inside the app.

07 ideation

Searching for ideas

We started with the Crazy 8-method to get some ideas on paper and organized our ideas into most important to least by using the Moscow Method. We decided that the 'must have's' are: a highlight section, skincare groups and subgroups, the ability to like and reply and a way to integrate a moderator.

Once organized we new the direction we wanted to go in with our design. That's why our low-fi's were very aligned.

Mid-fidelity

Next step was creating the mid-fidelity prototype as you can see below. Everyone took part in creating a couple of mid-fi screens, making it a very quick process so we could get it tested as soon as possible.

Mid-fi usability test

After the creating the mid-fi flows, we put them up for a usability test to see if the user could complete the tasks successfully. We gave them two tasks to complete.
Task 1: Send a private message to interviewed person in highlighted article
Task 2: Create and share a post

Good

70% of the participants found it easy to navigate the app and complete the tasks.

Bad

With the second task we got feedback that they participant had to take too many steps to create and share a post. With this feedback we went back to the user flow and simplified it.

08 styleguide

Styleguide

Good Light already has an amazing style guide. They work with colorful pastels and cosmic gradients. Their fonts are playful and the images are creative and alternative. We made it our mission to translate their existing style guide into the mobile app. We only changed the body font from Caslon 540 to Roboto for beter readability on mobile.
Style guide

Principles

We created a few Good Light design principles to make sure that every visual design decision aligns with the Good Light brand. The principles are: otherworldly, young, inclusive, unexpected, colorful and quality.
Good Light moodboard

09 solution

High fidelity prototype

Our result is the Good Light Community app. A place where everyone is welcome to share and read about skincare. Focussing on multi-communication streams, safety, information about skincare and the Good Light brand and creating a community for moths to express themselves.

High-fi user flows

User flow 1: Send a private message
User flow 2: Create and share a post

Prototype in action

Task: Send a private message
Task: Create and share a post

10 testing

High fidelity tests & iterations

For this project we did a couple of different tasks to help us with making a design decision and to keep us on the right track.

Usability test

First test was the usability test. Just like our mid-fi we gave the participants two main tasks to complete. To send a message to a person being interviewed and to create and share a post.

Good

Every participant was able to complete both tasks in 1m35.

Bad

There is a preview button before posting and this felt unusual for the participants, so we decided to remove the preview button and make it possible to edit the post after posting.

A/B testing

We had a few design blockers concerning the navigation. First we tested which type of button would make more sense to create a post. 92% chose option A, with a plus button. We were also wondering if the buttons needed guiding text under it. 62% preferred the navigation bar without names. We integrated both changes into the design.
A/B test navigation
Cohesion with existing brand

Desirability test

Lastly we tested if the app is cohesive with the existing Good Light webshop and what kind of connection the user feels about the design of the app.

Cohesion

The participants got to see our app design along with the Good Light webshop and we asked the question if these two screens belonged to the same brand. 86% said they believe they do.

Desirability

We asked to participants which three words would come to mind when using the Good Light app. The most used words are: colorful, young, inclusive and fun.
These test gave us clarity that our design fits the design aesthetic of the Good Light brand.
Three Good Light products
Good Light product: Luna pimple patch

11 Conclusion

Final thoughts

I enjoyed working with Good Light and with my classmated: Diogenes and Bruno. Thanks to Good Light for showing so much passion about the product and being so enthusiastic about working with us.

Next steps

Our mvp for the Good Light app was to create a community to connect people and to expand the brand connection and awareness. A future step woud be to research if the app leads indirectly to more sales. If not we would like to see how we can create a better ROI. Some other feature ideas are the ability to create private groups and/or short videos.

Key learnings

I really enjoyed working with a stakeholder and to talk about both the user experience side of creating a digital platform, as well as considering how a business can benefit from it. It was challenging to see what types of online communication exists and which one(s) would be suitable for the Good Light community. And also think about how we could create a circular communication out of a one-way communication stream (newsletter).