beautyclass
product design
mobile platform

Helping beauty industry professionals improve their abilities

company

Beautyclass

role

Product Designer

Type

In-house

year

2019-2020

Overview

Plain and simple: An online learning platform for beauty professionals.

The Opportunity

The ability to iterate faster and deliver a better experience to students. Go beyond the classes themselves and become a tool.

Context

the company

Focused on the beauty sector. Offering two main products, a single subscription for multiple entry-level courses and a structured programme with mentorship.

the existing product

The main product was originally called BeautyClass Flix. It is an online video platform with various courses under a single subscription. This product was about to be rebranded as BeautyClass Pro as part of a restructuring of the offering.

the team

Company

Beautyclass

Project Manager

Gustavo Veiga

Product Designer

Guilherme Bayara 👈 this is me

Full Stack Developer

Lucas Lopes

Goals

  • Bring the app in-house
  • Improve customer satisfaction
  • Implement new features

Challenges

Low end phones

The largest part of the customer base has only low-end devices, with not much memory and without easy access to mobile data.

Platform transition

The first version of the platform was created by a third party. We didn’t have access to its data to make the migration easier.

Limited time and resources

With only a small team and a tight budget, there weren't many resources beyond pure manpower.

Black friday crash

During the 2019 Black Friday promotion, the previous platform completely crashed leaving users, new and old, without access.

Project

The original project consisted of revamping the video platform. As problems and challenges arose during the process the project changed. Instead of creating something new, the focus became continuously improving on what we had created. Less from the ground up and more iteration.

The three main components of the project already exist in the market. How can we reestructure them?

My contribution

The only designer

As the only designer in a very small team I was responsible for leading the design process, from end-to-end. Beyond the project itself, I was responsible for the design culture for the company as a whole.

What it is

Video platform

At its core, it is a video platform with multiple courses under one single subscription.

Solutions

Everything crashed! Now what?

During the Black Friday Sale the previous app crashed. Completely. We needed a solution and fast. Up to that point we were doing research and user testing for the app we were building from the ground up. There was no way we could bring that online in just a few hours. After some brainstorming, we thought of using Vimeo’s showcase feature while we figured something more permanent out.

The three main components of the project already exist in the market. How can we reestructure them?
Here comes the PWA

Lucas, the developer, said we could have a PWA functioning in no time. As long as it was stripped down to the core, it would be online very quickly. Lucas and I worked together to decide what to include and what to remove, what to strip down. In a matter of a few days, we had a functioning PWA that could be improved upon later. That also became our bridge to what would be the app we were already working on.

The three main components of the project already exist in the market. How can we reestructure them?
PWA as a testing ground

After the initial transition of the user base to the PWA we started using it as our default platform. It brought a few key advantages for us: We could test features very fast and we wouldn't need much space inside the user’s phones. Two features that were tested inside the PWA and later entered the app roadmap were certificate download and product formulas. The certificates were sent manually up until that point and the formula only appeared in the videos. Both showed great promise.

The three main components of the project already exist in the market. How can we reestructure them?

Process

How I worked

collaboration

Every part of the process was collaborative and I made sure we had tools that would help us keep in sync about the work. Product decisions were taken by the team as a whole and we bounced off each other constantly, especially when problems would arise.

FOCUS ON THE BASICS

There wasn't much space for us to do a lot, given the limitations of our user's devices. But we could always deliver a better experience to them by focusing on improving the basics, by doing them better and more reliably. By implementing a better category navigation users could find their courses more easily. Having a “Continuing watching” section improved completion rates across courses.

Learnings

iteration

Before the crash that led to the PWA we were all very focused on creating a great new app from the ground up. We later learned that it was incredibly more valuable to leverage iteration both on the PWA and the native app that would be launched. Through iteration, we found out many possible pain points that would have been implemented in the native app.

Results

Final designs

NAtive app

Informed by the PWA the native app was born. The iterative philosophy was kept.

The three main components of the project already exist in the market. How can we reestructure them?

Impact

Lower support ticket numbers

The implementation of the certificate alone reduced the number of support tickets by over 20% compared to pre-crash numbers.

Lower churn rate

After the PWA implementation and before the pandemic the churn rate was consistently declining.