Masivo

In 2021, I created a fictitious company with an ecommerce website concept called Masivo, a high end shoe and boot company for men that supports large sizes.

Objective

The goal of this project is to create an ecommerce checkout process that is intuitive and effective, where the user is able to easily find a product, add it to their cart, and traverse through all checkout pages to arrive at the final confirmation screen.

After the style guide was established, I created a series of wireframes detailing the layout for each of the necessary pages for the commerce product checkout process. I later created the mockups and finalized the design. The pages include:

• Home

• Category

• Product

• Cart

• Checkout: Shipping

• Checkout: Payment

• Checkout: Review

• Checkout: Confirmation

I evaluated the website based on an article on CoreDNA.com titled, “eCommerce Site Best Practices: The Anatomy of the ‘Perfect’ eCommerce Site.” Below I will show the wireframes paired with the final mockups for each page of the site and describe the design and any best practices that were followed.

Home

The homepage has three main sections which offer different ways of navigating the site. In the final mockup, the hero banner section has a primary call-to-action button that leads to the Category page. The promo section has buttons that also lead to the Category page in the prototype, but would theoretically show different results depending on the category. The last section, featured products, leads to the Product page.

Homepage best practices:

• Ever-present search bar. This is present in the header on each page of the site.

• Value proposition, front and center. This is featured in the hero image (a photo of someone wearing leather boots), with a tagline that says, “Timeless style, in your size.” This makes it clear that the site is a plus-sized shoe company, and gives the user immediate entry into the category page with the “Shop Now” button.

• Sales section. This is present in the header with the “Sale” button.

• Footer with info about the company. The footer is present on each page, with links about the company such as “Our Story,” “Careers,” “News,” and “Purpose.”

Category

The Category page displays shoe products in a three column grid. Included with each product listing is its name, the amount of different color variations available, and a price. A fourth column on the left contains all filter options for the product results. One of the main filters is size, which includes sizes 5 through 24, since the target customer is men with large shoe sizes. Other filters are color, price, style, and width.

Category page best practices:

• Products displayed in rows. The category page displays all products in a grid of three columns and four rows per page.

• Promotions banner. This is present directly underneath the header, which says, “Our new line of lace-ups,” along with a “Shop Now” button.

• “Best Sellers” or “New Releases” section. The “New Releases” section is present in the header on each page of the site.

Product

With the Product page I went with a three column layout. There are two columns of large images of the product along the left side of the screen, with the product details on the right in the third column. Underneath the product images, I included a section for related products, which I titled “You Might Also Like” in the final mockup. The details column includes shoe size options (from 5 to 24 in the final mockup), color options, a product description, a reviews section, and two buttons: the primary “Add to Bag” button, and a secondary “Add to Favorites” button. 

In the final mockup, I used the red color from the style guide for the button color, as it stands out from the rest of the site’s UI elements, which are primarily black. Using this red color for all primary buttons on each page helps guide the user through each step of the checkout process, as they will always know to click the red button to continue.

• Customer ratings and reviews. This is section is present underneath the “Add to Bag” button on the right side of the screen.

• Product copy. This copy is also present underneath the “Add to Bag” button.

• Large, vibrant imagery. The product images are at their largest size on the

• product page. There are six images in two columns and three rows.

• Bold “Add to Bag” button with color contrast. The “Add to Bag” button stands out on the page due to it being large and red in color.

• Related products. A “You Might Also Like” section is placed underneath the

• product imagery, showing other related shoe products.

Cart

The Cart page is a summary page showing every item that’s been added to your bag and the total price. In the wireframe and mockup there’s one item in the bag. Any additional items would be listed under the same column on the page. Included next to the product image are options to change shoe size or quantity, as well as a “Move to Favorites” button. On the right side of the screen I listed the subtotal, shipping, tax, and total, as well as the primary “Checkout” button to continue to the checkout pages. I also included a “You Might Also Like” section lower on the page to give the user other suggestions of products they might be interested in adding to their bag.

Checkout: Shipping

The rest of the pages of the site are part of the checkout wizard, where the user enters shipping and billing information for their purchase. There are two columns of content in this wizard. In the left column, there are three numbered sections: shipping, payment, and review. In the right column is information about what’s in your bag, including the total price, shipping information, and product details, as well as a “Contact Us” button if the user needs help with their order.

In the Shipping section are input fields for the shipping information, including first name, last name, address, city, state, zip code, email, and phone number. In the final mockup, I also included radio button options for different shipping speeds. The red button “Continue to Payment” brings them to the Payment section.

Checkout pages best practices:

• Visual progress indicator. This is accomplished by having three numbered steps in the checkout process: “Shipping,” “Payment,” and “Review.” When a step is completed, a checkmark will appear next to the step.

• Order summary. This is present on the right side of the screen in the “In Your Bag” section, showing items in bag and the estimated total price.

• Customer service. This is underneath the “In Your Bag” section on every checkout page. It says, “Need help with your order?”, and has a “Contact Us” button.

Checkout: Payment

The Payment page will show the shipping section as completed with a checkmark next to the section title, and a summary of the entered information below it. I included an “EDIT” button on the top right of the shipping section to give the user the ability to return to the shipping section to make edits.

In the Payment section are input fields for the billing address: first name, last name, address, city, state, and zip code. If the user’s billing address information is the same as the shipping address, I included a checkbox option on the top right of the section to automatically populate the information. Below the billing address are the payment method options, either credit card (with input fields for card number, expiration date, and security code), or PayPal. The red primary button “Review Order” brings the user to the Review section.

Payment page best practices:

• Different payment options. The two options are credit card and PayPal.

• Secure checkout. This is accomplished by including the text, “Secure checkout with SSL technology,” which is placed in the Payment Method section.

Checkout: Review

The Review page will show the shipping and payment sections as completed with a checkmark and a summary. This page serves as a final opportunity to review your information before placing the order. The red primary button “Place Order” will submit the order and send the user to the confirmation screen.

Checkout: Confirmation

The Confirmation page includes the confirmation message, “Your order was placed successfully,” along with a checkmark icon. Below that is a summary of all checkout information that was used to place the order.

This prototype features all designed pages linked together. You start at the homepage, make your way to a product, and complete the full checkout process.

After I created the initial wireframes, mockup and prototype, I performed a usability test. The goal of the usability test was to evaluate the shopping and checkout experience of the site in order to resolve any issues or make any needed improvements to the design.

I had five users participate in the usability test. All participants were between the ages of 25 and 55, and were all familiar with online ecommerce shopping. The participants interacted with the prototype on a laptop computer. Their task was to find a shoe product, add it to their bag, continue through the checkout process and arrive at the confirmation screen. Following the test, they were requested to answer a set of qualitative questions, such as the following:

• What was your overall impression of the website?

• What features do you find most valuable in an e-commerce website?

• How do you feel when you interacted with the website? Relaxed, frustrated, etc?

• If there was one thing you would change about the website, what would it be?

• Are there any features that you feel like the website was missing?

The participants were also asked to complete a short assessment test with five statements to rate on a 7 point scale, 1 representing “strongly disagree” and 7 representing “strongly agree.” The statements were:

• It was easy to complete the requested tasks.

• The website caused me to get lost when completing tasks.

• The website layout was confusing.

• The organization of elements on the screen was intuitive.

• Buttons and links were where I expected them to be.

I created a bar chart with the results of the assessment test. The results show that the website was well received. There were no serious issues with the site in terms of its usability.

I received great feedback from my participants following my qualitative questions. One participant said that the use of font, color, and imagery created a “modern, industrial, and minimalist” feel, which is a perfect reflection of the goal of the design. Three of the participants said that using the color red for the primary buttons on the site made it very easy to navigate through the checkout experience, as they always knew what to click next.

They also made a few suggestions regarding changes to the design. Three of the participants didn’t know you could scroll down on the homepage, so I decided to make the hero banner shorter. Regarding the checkout pages, three users suggested adding more payment options besides just the credit card option, so I added PayPal as an alternative. They also suggested including different shipping speed options, so I added three options for different shipping speeds.

This project was an in-depth process of creating a brand and building an effective and intuitive ecommerce website. The project was greatly improved by doing research on best practices for ecommerce websites, while also receiving additional feedback and data through performing a usability test with five participants. The combination of branding, UX research, and user testing resulted in a full prototype that could be potentially developed into a real, working ecommerce website.