Design Process
Role & Experience
Throughout my career, I have developed complex applications to serve people all across the United States. I love tech products and appreciate how useful they can be when used as intended. Often, the products are expensive, and that comes with quality. Quality is essential, especially when you need a device that can last for a long time. I aim to make tech products accessible and affordable, ensuring everyone can afford them. My experience as a designer and engineer played a contributing role in creating everything from ideation to a finished product. I wanted to build a fully customized shopping experience that allows customers to have a seamless experience all the way through checkout.
Attraction and Simplicity
I have always wanted to create an online store to provide a service, as technology products will always be in demand, whether people need them out of necessity or want them. The most critical area is determining which market I want to target and how I will bring the store to the public's attention. People must perceive a need for what they want to buy. Once they have decided to make a purchase, the process has to be seamless and straightforward.Research
I began my research by visiting the websites of Apple, Google, and Microsoft to see what products they showcased that appeared above the fold on their pages. This helps me get an understanding of their customers' engagement. Generally, your store app should display your best products when viewers arrive on the home page. I also examine retailers like Best Buy, Walmart, and Amazon to gain an understanding of how they structure their pages to effectively showcase the various products they offer. Next, I drew my attention to the product description page and checkout process. I quickly searched for the location of the 'Add to Cart / Add To Bag' button on desktop and mobile devices to gauge the effort required to create my shopping cart. From there, I viewed my shopping cart to see how it would appear or how I could access it, leading to checkout. I documented features to carry over into my store, such as descriptions and specifications.Design & Rationale
After reviewing various sites, gathering data, and examining their layouts, I selected the Microsoft site as my layout. When you visit the Microsoft store site, products are displayed to the viewer in a grid format. Unlike the other sites, you have to click a category or scroll through the site. Microsoft shows its products upfront to the user. Within my website, I already had a grid component available. I didn't have to make anything from scratch. When you see a product you like, you are directly sent to the product description page to receive more information about the product. With two clicks, the user has reached the description page to add the product to their cart.
Adding Items To the Cart
Adding items should be seamless. While the user is shopping, the shopping cart is ready to keep a record of the items the user wants to purchase, but it should not interrupt the user's flow as they continue shopping. When a user adds an item to their cart, a subtle notification appears to confirm that the item has been added to their cart. A link is provided, located in the bottom right corner of the screen, to allow users to view the cart page. The component also keeps a record of the number of items in the cart and the total price as the user continues shopping. The purpose is to ensure that the user isn't distracted, but is aware of the items in their cart and the cost as the cart updates in real-time.
Shopping Cart & Checkout
The shopping cart can be accessed at the cart view level. The view allows the customer to see and update the cart. The functionalities include: removing items from the cart, clearing the entire cart, and changing the quantity. The cart will adjust the price in real time so that the customer can be aware of the changes. The cart also provides details on the item price and line total, calculating the total based on the quantity. To help with error validations, the quantity will prevent the customer from entering a zero quantity or exceeding the amount available in stock.Once the customer is ready to check out, they can provide their information through the [Reserve] system, using Stripe as the PCI-compliant payment processor for transactions. I will receive notifications and prepare to ship the item(s). The customers will receive a notification that their payment has been successfully processed. An email notification will also be sent to the email address the customer provided.
Stripe Integration
To process all transactions, Stripe's API has been integrated into the website for payments. The API is a great feature that allows customers to stay within the site, with all page notifications handled by me based on responses from Stripe. The features will further enable tracking the payment and sending the receipt to the customer. The Stripe API gives me complete control over the frontend while Stripe handles all the transactions on the backend, allowing users to continue shopping on the site.
Challenges & Solutions
A key challenge that I experienced was tracking the status of a product. It is a tedious process because the little things that need to be tracked significantly impact the customer's shopping experience. Is the item in stock? How many are in stock? If a customer has an item in stock and the last one is suddenly bought, how would the customer be notified? When a product is out of stock and a customer has it in their shopping cart, the cart will not remove the item, but disable it. The purpose of not removing the item is to ensure that the customer doesn't think there was an error in the cart or with themselves. The product will be disabled, and the total will be recalculated to reflect the update. The customer can choose to remove it.Results & Impact
Utilizing Stripe as the central payment processor has the most significant impact on the store's operations. Stripe is PCI-compliant to help ensure that sensitive information, such as credit card numbers, is securely processed. Stripe has a pre-built form to place within the site. That added more security because that means I don't have to create a form myself. I am not a big fan of using JavaScript to send and receive sensitive information. I had to make sure that I did my part on the front-end to make sure that the data is challenging to track.
Final Reflections
It has been yet another project where I set a goal and completed it. I always wanted to have and set up a store. Having a strong background in research, design, and engineering brought everything to the forefront. The next step is to start placing more items on the page and preparing them for sale, gaining customers' trust in the process.