Mission Of Soap is a local nonprofit that takes all their proceeds from their handmade soaps and donates it to a women's help cause in Haiti.
This is my redesign of their website.
The Original Website
Finding Opportunities for Improvement
I took a few annotations about the problems I found while navigating the site.
We are living in the era of skimmers. Tests have shown that 79% of people don’t read, they just skim. I made the conclusion that the website needed more engaging visuals. I redesigned the site with Squarespace.
My New Website
Not only is parallax scrolling trendy, but it's gorgeous and works great with images.
I started off the homepage with a picture of one of their top selling soaps. I kept it clean with a simple layout and seamless navigation. I added a shopping cart in the top right to always let the user know what their status was. I added a shop now button under the title as my main call of action. The point of the website is to sell the artisan soaps.
Right after scrolling past the picture, the user will see this. I wanted to explain what the cause was and add another call to action in order to get users browsing on the shopping page.
Then I added pictures of the actual ingredients they use for their soaps. It gives the user an authentic look at the story of how the soap is made.
Instead of including too much information about the soap-making process, I summarized it so the user had less to read. If they want to know more they can press the learn more button. One thing UX designers know is that the button should never say "click here" or "submit". It should always be an action centered around the user. The user will click "Learn More" because they want to know more about the process, not because I'm telling them to click it.
I added this picture of Haitian women to give the user a good idea of where their money will go. I am displaying the value before the price.
I made all the pictures of the founders black and white to keep it consistent. I made sure they were evenly spaced with no tension
I played around with the P in the Labarum, a Greek symbol for Christ. I incorporated hands holding the soap for 2 reasons; one being that it shows what it's like to use the product, and two, it shows the hands as a giving gesture, hinting at the fact the company is a non profit
Packaging is a huge part of brand identity. I wanted the logo to be massive so it's the first thing the user sees. I chose a san serif font because it is meant for print, not digital screens. The typewriter font mimics the fact that their products are homemade, and a timeless art. I decided to highlight the two ingredients that would distinguish the aroma of the soaps and the benefits of using their soaps. All soaps come with a black and white illustration of one of the key ingredients to help differentiate each package, but still keep it within the same template. The template creates unity.
The Product Pages
One of the biggest changes I made was to the description copy. I covered the benefits of the soap so the user would understand the value. I enlarged the image since it comes first on visual hierarchy. I got rid of the categories so the user could focus on only this page. If they want to look at the other categories, they can look at the dropdown under shop or go to the shop page.
It's important to always keep your user updated on their current status. For this case, after they press add to cart, they need some sort of verification of their action. With the original website they add a big green bar at the top, but the problem is, it can confuse users because the page reloads with a few changes to the layout. For example, on the right sidebar, the cart automatically pops up but the shopping cart in the top right is unreadable until you hover over it. This creates too many ways to complete one task and creates an inconsistency on the product page. It could even persuade users to quit shopping and go straight to their cart to check out. The point of this website is to sell as many soaps as possible.
The new design features an, "Add to Cart" button that informs the user of their status. It covers the second or two while it's adding it to the cart and then the confirmation it's in the cart by saying "Added". It's important to let your user know as soon as possible what the site is doing in response to their action. Leaving the user out of the know could lead to stress, and in some cases, cause the user to leave the site. The shopping cart updates in the top right corner to show there is something in the cart, but doesn't encourage checking out until they go to the cart. This way they are encouraged to spend more time browsing. This redesign is intended to be cleaner, simpler, and to the point.
This checkout page has alot going on. It looks like there's 3 columns, but they break apart as you scan the page. Another problem I found while visiting this page while on a tablet, that it wasn't as compatible. This could be a fatal for sales. About half of all e-commerce comes from a mobile device. According to a study by OuterBox, statistics show that 40% of users will go to the competitor after a bad mobile experience, yet an alarming 84% have experienced difficulty completing a mobile transaction. There was some overlapping which not only doesn't look clean, but it could cause some confusion.
People read left to right, so it's important to keep the flow simple and easy to read. You want to lead them along step by step, with the least amount of stress possible. As soon as the user gets to the checkout page, two blue messages pop up with tasks. One for log in information, which is the first time having an account on the website is mentioned, and the other to enter a coupon. This could be stressful, especially since its the first thing the customer reads.
The New Checkout
As a UX Designer I prefer Squarespace over other platforms like Wordpress, Wix or Weebly because of their impeccable ecommerce function. The new checkout is simple and breaks apart all the information the user has to put in. It's broken into 4 sections, Your Email, Shipping, Payment, and Review & Purchase. The email section has microcopy to let the user know why they need their email, which says "You'll receive receipts and notifications at this email address." Now the user knows by giving up their email, they won't get spammed with marketing emails, which could be a huge deturrent from entering this information. After putting in their email, it transitions to their shipping info. The order summary follows down the column and acts as a bookmark to their place.
This redesign was done to fix the problems I could find while going through a flow of browsing the homepage, looking at products, viewing the shopping cart, and checking out. I focused on eliminating stress with better spacial awareness and keeping the user informed. Not only is UX design crucial for attracting potential customers, but it's important for keeping them on the site.