Breathabö Final Design

Here are some of the major functions that can be explored on the website.

 

Onboarding

I demonstrate navigating the site from the landing page.

 

Changing Perspectives + Adding to Cart

On the customize page, you can change whether you see a close-up back of the mask you're designing, or the model wearing the mask.

 

Customizing Colors

You can customize the colors of various elements of your respirator simply by clicking on the "paint" icon on the left panel. You can change the color of the whole mask, or go by specific components.

 

Picking a Model

I show how you can go pick a different model to wear the mask you want to buy. I chose models with a variety of appearances so that any customer can find one that looks like them. That way, they can see what their mask would look like with various skin tones and hair colors.

 

Editing the Measurements

On the measurements page, I show how you can change the unit of measurement, adjust the dimensions of certain areas of the mask, and change the view of your mask so that you can get a better feel for the dimensions.

 

Checkout

Part 1

First, I deleted a mask. Then, I buy as a guest. I'm not able to see the cost of shipping until I enter the shipping information.

Part 2

After entering the information, I enter the payment page, where I can pay either through credit card, Apple Pay, or PayPal.

Part 3

I then confirm the purchase. Here, you can also see the loading screen before you get the confirmation of your purchase.