The Pore Plug Website
Project background
This website was created for Madeline Hayes, a traveling Licensed Medical Aesthetician that is local to Scottsdale, Arizona. She started her business The Pore Plug in 2024 to help her clients achieve the skin of their dreams. The purpose of this website is to give her a platform to extend her monochromatic brand identity, provide comprehensive information about her and the services she offers, have an online store where clients can purchase their favorite skincare products and to manage her calendar by providing an appointment booking service that connects directly to her patient record keeping software.
Problem statement
The owner of The Pore Plug currently does not have an organized way to sell products, book appointments and send invoices for services.
Project goal
Create a custom website that reflects the brands unique identity while providing a way for her to easily manage her calendar, book appointments, sell products, display customer testimonials, send invoices and grow her clientele.
Key objectives:
Brand identity & aesthetics:
Reflect the unique identity of The Pore Plug, combining monochromatic design elements with the energetic essence of the brand by using high-quality branded images and stylish fonts to create a luxurious and professional look.
2. Service & product information:
Provide detailed information about their services offered, including treatments and products. Create a dedicated service page with descriptions and pricing.
3. Appointment booking system:
Enable users to book appointments online with ease by integrating a user-friendly booking system that allows customers to choose services, preferred dates, and times.
4. Customer testimonials & reviews:
Build trust and credibility through customer testimonials by featuring them prominently on the homepage.
5. Online store & inventory management:
Create an online store where clients can easily purchase their favorite skincare products and provide an inventory management system where the owner can keep track of their product on hand.
Creating personas
Following the identification of the key objectives of the website design, I created two personas to represent the targeted clientele of the Medical Aesthetician. Each persona plays a crucial role in the need of specific features that will streamline the appointment booking process, provide a positive user experience and allow them to easily restock their skincare products directly from their provider online.
Some of the key features that are important to our personas are:
-Ability to easily book appointments online
-Locate information on services, products & provider
-Read reviews about their provider
-Purchase products directly from their provider online
Wireframing & prototyping process
Once the key objectives were established and the personas created, I began the wireframing process. For this website, I envisioned a unique design that helps portray the brands funky style. I wanted the section separations to be winding and create ambient movement in the background of the darker sections. I drew a handful of sketches, selected my favorites and turned to Figma to begin imputing them digitally.
When creating the wireframes, I knew there were certain elements I wanted to include such as: a large banner at the top that would house the brands logo, quick-action buttons, a link to the providers Instagram and the users shopping cart. I wanted the main screen to feature a video playing behind an image of the provider, which will catch the users attention and keep them on the page. Directly below the header image, I wanted to display an “about me” section which would provide users looking to book services with a description on why they should choose this provider to best aid them in the process of achieving their goals. As the user progresses down the page, they will be greeted with their providers top products, which will link to the shopping page.
Other than the main screen, I created a dedicated shopping page that features all of the products the providers retails. This page gives the provider a full e-commerce experience where they can easily manage inventory, collect payments from clients, mark items for sale, and ship products.
Along with the website, there is also a dedicated booking page where users can book their desired service directly through the website, see pricing and read descriptions of all the services.
Lastly, there is an in depth “about me” page where the user can read more about the providers education, certifications and achievements that will solidify why the user should choose this provider.
After a few iterations, I landed with a stream of wireframes which led me to the user flowing testing stage.
Usability testing phase
Once I had a satisfying user flow demonstrated throughout my wireframe, I conducted a usability study to test a list of questions I wanted answered:
Locate where you can book an appointment.
2. Locate where you can purchase a product.
3. Locate where you can read more about the provider.
Iteration
After the usability study was completed, I decided to iterate on a few elements to improve the user experience. One example is I placed multiple call-to-actions buttons that directly link to the booking page, shopping page and about me page. I added in more fun elements like curved page separations, ambient movement in the background of the darker sections and changed some of the titles fonts to help them stand out more. I also wanted to display recent testimonials from clients on the home screen to further make the provider credible.
Final product
Upon opening the website, you are greeted with The Pore Plugs logo, branded image and monochromatic video in the background. Located on the left side of the header are direct links to the shopping page, booking page and about page. On the right side, you will find the providers Instagram link and the users shopping cart.
Homepage features
The home screen of this website features important information and many call-to-action buttons that will take the user directly to the page they are looking for. As the user begins their journey down the page, the first part of key information they will see if the brands tag line: “The plug for all your skincare needs” and a brief summary of the brands mission statement. Directly below this summary, there is a button users can click on that will direct them to the “booking” page.
As the user continues to progress through the website, their is a section that gives a brief description about their provider Maddie. I decided to use a black background with ambient movement to help tie in the monochromatic branding. An image of their provider can be seen on the left side of the providers summary and a learn more button that will take the user to the “about” page.
Located below this page is a featured product section titled “Maddie’s top picks”. This section will display the providers top three retail products. When a user clicks on one of the products, they will be directed to that exact product on the shopping page where they can add the item to their cart, see a description of the product and the pricing.
To further add credibility to the provider, there is a recent testimonial section where users can click through client reviews about products and services. This section also features the black background with ambient movement to give it more dimension.
Lastly, near the end of the page, there is a “proud partners” section where the user can view the logo of the brands the provider is partnered with. This adds further credibility due to the brands being featured. At the footer, the user will be able to sign up for emails to stay up to date with their provider, access the other pages of the website and locate their providers Instagram link.
Online store
One of the dedicated pages of this website is a fully integrated e-commerce store. On the users side, they will be able to purchase their favorite skincare products directly from their provider. Each product features an image, title, description and price. In the featured product section on the home screen, users have the option to “quick view” the product, change the quantity and add the item to their cart. When users access the shopping page, they can scroll through all of the products to locate the ones they are interested in.
On the providers side, they are able to manage their inventory, run sales on select or all items, collect payments and prepare shipment or product pick-ups for clients. There is a section where the provider will be able to see a breakdown of their revenue, low-stock notifications and their top sold product. This allows the provider to easily manage a key part of their business without relying on the aid of someone else.
Services & booking
One of the most important dedicated pages for this provider is their booking page. Being that this provider is a traveling Medical Aesthetician, they need a place where users can easily access information on what services they offer, service descriptions and pricing. On the dedicated booking and services page, users will be able to locate all of the information they need, as well as book appointments with their provider. As of right now, the provider is on a contact directly basis to make an appointment. Below the services, there is a form the user can fill out to contact their provider about booking an appointment. Once the provider selects which third-party application they would like to utilize to book appointments and manage paperwork, I will be able to directly link that application to each service.
About the provider
The final dedicated page I created for the website is an “about” page. On the home screen, users can see a shortened summary about their provider and why the user should choose them to help them on their skincare journey. Below that description is a “learn more” button that when clicked on, will direct the user to the dedicated about page where they can read a more in-depth summary about the provider, their education, certifications, accomplishments and specialties.
