Beauty Boss Academy is an online learning platform with beauty-related courses for people wanting to start their careers in beauty.
This project was launched mid-2021 starting with a Beginner Lash course. The platform was created using WordPress, WooCommerce, and Learndash – customised for ease of use and maximise conversion.
Visual Design
User Interface
User Experience
Wireframing
Outgive Inc
Mid-2021
Before designing anything, the marketing team presented to us the target audience and I collaborated with them to figure out the creative direction of the project. The target market for this project are individuals ages 18-35 aspiring to start their own businesses in the beauty industry who may not have the time flexibility or resources to attend in-person lash courses, and lives in North America.
We also analysed our competitors and found that most of them offered expensive courses without flexibility and little to none after-course support.
Based on the target market and competitor analysis, we formed the following project goals:
To understand the scale of the project’s requirements, we broke down the project goals to HMW questions.
To define the structure and hierarchy of the websites pages, I created a sitemap that consists of the basic pages and the required pages that satisfy our solutions.
I brainstormed possible solutions to our HMW questions and mapped this user flow using the solutions as a guide.
The initial user flow included considerations for the admins or the people who will be assessing the students’ progress through assignments and tests.
The users have 2 paths to conversion. Aside from the official course product page, there's also the landing page published ahead of the website for marketing purposes and to gather interested individuals that are willing to test the course materials for free.
The checkout flow is divided into 3 steps to streamline the enrolment. I was able to map this by picking apart the platform's default checkout process (WooCommerce) and removed the uneccessary fields, added the guarantees, and gave the users the ability to pick and modify their choice of product one the page just one button click away from the confirmation that they have it.
The product owners decided on the aesthetic that inspired this moodboard. Visual inspiration for Beauty Boss Academy consists of elements with pastel color scheme and a combination of serif headings and sans-serif body to achieve a classical look.
I collaborated with the graphic designers who made BBA’s handbook. We made sure that the color scheme and elements like icons, backgrounds, and general aesthetic are coherent across all materials.
For the learning platform itself, we took inspiration from sites offering online courses, and modified the platform to find solutions to our HMWs.
The team collaborated on sketching their ideas for the pages, and I made sure that essential information were positioned for visibility as we progressed. These sketches would be my base for the high-fidelity wireframes.
For the UI elements, I created a small design system for the project. Since this website and the initial launch of the course was only the first phase, it’s better to start off with a library of styled ui elements that is scalable and coherent, for future use on other sub-projects under BBA. This was an important part of the project as it’s a time investment and will speed up the creation of further pages or sub-projects.
I was able to get the initial text content for all the pages to insert to the hi-fi wireframes. This made a big difference in speeding up the process since at this point, we were starting to feel the pressure of the deadlines. I made the approved wireframe for the landing page flexible enough for iterations by dividing it into rearrangeable sections – this proved to be helpful as I had to produce a couple of mock-up options to choose from, and to easily change content as needed. The creation of the main website pages followed the same process and rough sketches, just slimmed down with all the information sections in the landing page moved to their own pages.
We went through four iterations for the landing page, starting from the low fidelity sketch to the final published page. I followed these important principles in designing the landing page:
While keeping in mind the aesthetic, information that needs to be there, conversion, and consideration for the users by making sure that the sections are not overcrowded with elements and has minimal distractions.
For the checkout process, we had to overhaul the default WooCommerce checkout pages to match our vision.
The original checkout process involved a "cart" page, which we removed and integrated into one-page checkout, since BBA at the time only offered one category of products with a couple of payment options. Because of this, I decided to remove the "cart" from the flow as it just added another unecessary layer to the process. The sidebar with guarantees and a few selection of reviews from the users that have tried the course was added to emphasize the company's credibility.
After a few months of all the brainstorming and a back-and-forth, iterations, and approvals; we've achieved the project's goals. The final outcome reflects the product’s vision in creating an inviting environment using classic and welcoming visuals that also features the online community in a third-party platform.
The landing page served its purpose by successfully conveying the company's message and introduing their first course, its inclusions, and the promotional offers.
All of the landing page's call to action buttons go directly to the checkout flow. The new checkout flow allowed users to pick and choose course inclusions and payment schemes that fit their financial needs the best so they can make an informed decision before fully comitting to the course.
The biggest challenge I've encountered in this project was the time crunch that we were all in. This is the fault of no one in the whole team, and as the only UI/UX designer in the project, I had to find ways to speed up my designing process without compromising the vision and integrity of the company, as well as keeping in mind important UI and UX principles in order for me to prevent being the bottleneck of the operation. As I waited for text contents and feedbacks to come in, I tried my best to keep one step ahead so I'd having something to show for their feedback right after their approval of the previous step.
Interested in working together?
hello@maraestalilla.com