E-Commerce Website Design

I created the concept, developed branding, and designed the homepage for an e-commerce website for a fictional small business called motivational mugs. My original work includes the business idea, logo, photo editing, and page design. This was an individual school project. Final deliverables included a responsive homepage optimized for both desktop and mobile view.

Project Type

Web Design (Desktop and Mobile)

Student Project

Date

Oct 2024 (2 weeks)

Role

Lead Designer and Branding

Link to Figma Design File

My Design Process

Here are screenshots from various stages of my design process for creating this site.

Sketches

I started the project by sketching some general concepts for what an e-commerce site might look like and how those designs would transfer between desktop and mobile.

Product Requirements Document

Next, I created a Product Requirements Document to outline the purpose, design challenge, goals, and required features of the site.

Introduction

Motivational Mugs needs a website to better market and sell their products to customers. Currently customers can only purchase mugs from the physical store location. The goal of this site is to reduce barriers to customers purchasing the mugs and increase sales.

Problem Definition

Motivational Mugs needs a way to market and sell mugs to customers online. Currently their customer base consists of locals and tourists who visit the store in person. The company wants to make it easier for non-local customers to view and purchase their products online. The scope of this project is to create an e-commerce site for Motivational Mugs. Out of scope is any marketing that would get customers on the site. This project is focused on designing for users who are intentionally visiting the site due to external marketing or word of mouth. Not focused on selling or marketing to international customers.

Design Challenge: How might we create an e-commerce site for Motivational Mugs that connects our products with customers to effectively market and sell mugs to increase sales.

Goals and Success Metrics

The goal of this project is to create an e-commerce site for Motivational Mugs. The site will allow people to browse options for mugs online, learn more about the Motivational Mugs company, and easily make purchases online. This will eliminate the need for customers to visit the physical shop location. For Motivational Mugs, this site will expand their business opportunities by allowing them to market their mugs to customers online. The goal is to make it easier for customers to shop for motivational mugs which should result in increased sales.

Users and Use Cases

The users would be anyone who may be interested in purchasing a mug.

User Insights: People enjoy drinking warm drinks. People like meaningful and aesthetic mugs. Mugs make good gifts. Many people prefer the convenience of online shopping as opposed to visiting in-store locations.

Personas: Generous George is a thirty something year old man who recently moved his family further away from his parents because of work. He is thoughtful, intentional, and values family. He has extra income and likes to bless his family and friends with gifts. He wants to find ways to still connect with his parents and make them feel cared about even though they live far away.

User Stories:

As a customer, I want to purchase a thoughtful gift so that my family member or friend will feel encouraged and loved.
Customer wants a nice mug to drink their morning coffee so they can feel energized and encouraged.

Scenario: Generous George is looking to buy a gift for his coffee loving mom’s birthday. At first, he was confused about what to get her. He heard about Motivational Mugs through Instagram and is visiting the website to learn more. While visiting the site he is able to browse the options and learn more about the company and their quality products. He looks through the designs and decides to make a purchase. Motivational mugs will ship the mug directly to his mom with gift wrap and a note. He is relieved because he was able to efficiently buy his mom a thoughtful gift without leaving his house. His mom is happy because she has a beautiful and encouraging mug to enjoy her coffee in the morning and she feels loved because her son bought her a gift.

Pitch

What will this do for end users:

End users will be able to view motivational mugs online.
They will be able to purchase motivational mugs online and have them shipped to their home.
They will also be able to purchase a motivational mug and have it shipped as a gift for friends or family.

How this benefits our organization:

More people will become aware of the company Motivational Mugs and their products.
More people will see the products without having to come into the shop.
Increased marketing will result in increased sales.

Value Proposition

For people who are interested in purchasing quality handcrafted and encouraging mugs our e-commerce site for Motivational Mugs allows customers to view products and make purchases online. They can also send mugs to friends or family with the gift option.
Key themes are:

Convenience: Customers will be able to purchase mugs without leaving their house. Expand the reach of the company.
Quality: The mugs are a high-quality hand-crafted product. Customers who want to purchase a high-quality product will be interested in purchasing these mugs.
Gift service: Customers can have their product wrapped like a gift to ship to a loved one’s address including a note for their occasion.

Competitors and differentiators:

Amazon – E-commerce site that sells everything imaginable. Motivational mugs is a small business that creates quality handcrafted products, better for customers who want to purchase a thoughtful gift. Offer gift services similar to Amazon.
Other local mug shops – Sell mugs in the area. Motivational mugs allows customers to purchase similarly high-quality, hand-crafted products online and ship straight to door, no shopping trip required.

Feature Requirements

Requirement #1: Works across devices

The site will need to be accessible and fully functional on both desktop and mobile devices. The design will need to be either a responsive or adaptable design.

Requirement #2: Home

The Home page will need to effectively catch user attention and provide links to other areas of the site. First step in the process of promoting user purchase.

Requirement #3: About

Needs to convey the brand values and quality of the product. Make users want to purchase from this high-quality brand. Also, should include a contact form where users can get in touch with the company before placing an order. Good storytelling is important here for an introduction that users can connect with, establish rapport with customers.

Requirement #4: Products

Organized list of all products that customers can purchase. Featured items at top. Searchable page, to allow customers to find the perfect mug.

Requirement #5: Cart

Place for customers to store the products they would like to purchase while they continue to browse the site. Layout and hierarchy are important here. Cognitive load should be manageable. Content should be organized and allow the user to quickly understand their purchase at a glance.

Release Criteria

Before release the site needs to work across mobile and desktop devices. It needs to have a home page, products page, about page, shopping cart page, contact, customer profile page and search bar. Success will look like an interactable site that works seamlessly across devices.

Wireframes

After writing the Product Requirements Document I was able to incorporate the design requirements into my initial sketch ideas by wireframing the site. I received feedback on my initial wireframes and was able to reiterate to simplify the hero section of both solutions. The second iteration of the mobile site is also has better architecture to more effectively utilize the space and streamline the view for less scrolling.

High Fidelity Mock-Up

Finally I took the improved wireframe and added a logo, colors, imagery, and effects which create the final version of the site. I also ensured that the design is responsive and resizes well for a variety of screen sizes.