By far, I think the best thing I’ve ever made is my protosite for Arcadia Video Games. I see it as a culmination of everything I’ve learned as a designer so far.
I was in charge of every aspect of this design from conception to the final site, so all of the UX choices are my own. Let’s take a look at the pages I designed, and I’ll point out some of my favorite parts of the UI along the way.
Home Page
Nav/Information Architecture
This emerged by taking a look at how video game retailers organize their products. Initially, I was wondering if I should organize by Games/Systems/Accessories, and then the various platforms for each. But in talking with users, they clearly wanted it the other way around.
I realized that physical retailers don’t organize their games in one place, all systems in another, etc. Everything for each console is grouped together. It’s a familiar metaphor for users, and a format that most sites I researched follow.
Carousel & Tabs
I wanted to minimize scrolling for the user as much as possible, and I discovered using tabs and placing items on a carousel would be a good solution. Not sure this combination would work great for every retailer, since some may want to flood the home page with a ton of game boxes to attract more customers. Still, this works great for “Featured” or “Top-Selling” products.
Categories
Featured Consoles
Having a large selection of products for as many game consoles as possible is always something to strive for. But featuring a small number of the most popular retro consoles is a great way to entice new users to have a look around.
Sub-Categories
The overall layout here is similar to the categories page, but smaller and more focused on the console the user chose.
Product Listing
The sidebar has now changed from categories into sorting options for the user to narrow down their choices. A select menu at the top of the page lets users pick the order they want products displayed (Top Selling, Highest Rated, etc). There is continuity for product listing cards throughout the entire site. This helps ensure that there aren’t any slight variations of the card that might confuse users.
Product Details
Big Buttons
In any eCommerce site, the Add to Cart button is one of the most important things. So I made it really big so it’s hard for the user to avoid. I reused the icon from the My Cart button in the header to reinforce that clicking this will add the item to the user’s cart. If I ever continued development of this project, I’d like to have the badge on the My Cart button update in real time when Add to Cart is clicked.
In this case, I also gave the Add to Wish List button equal weight. While normally this might be an odd choice, it makes sense in the context of a used game retailer. Try as one might, it’s impossible to keep every old game in stock a user might want to buy. Adding the game to a wish list is a sort of consolation. It lets users build up a queue of games that they might want to buy when it comes in stock. Since an account is required to make a wish list, this accomplishes a couple things:
- keeps the user engaged in the site
- drives up the conversion rate
- gets the user prepared to make a purchase
Tabbed Information
Information like basic features, details, and reviews are placed in tabs. This helps conserve vertical screen space and, in my opinion, is a little more elegant than listing everything below the description.
Recommended Products
This section works on the basic idea that if a customer likes product x, they might like product y as well. This is also useful in the aforementioned “out of stock” scenario. It essentially says to the user: “I’m really sorry we don’t have that in, but here are some similar things you might want to check out instead”.
Shopping Cart
Status Bar
One feature that I think every eCommerce site needs to have (and sadly, many don’t) is a status or progress bar. This bar remains visible throughout the entire checkout process. Frankly, filling out forms is a drag. Every browser has an auto-fill feature for this very reason. At the very least, I can make the user feel better by showing how many steps are left and where the user is in the process.
This has the added effect of letting the user know that this isn’t just an endless series of screens, but a path with a few goals. And there’s actually a reward for them at the end (i.e. the shipping process starts).
The Cart Itself
Upon clicking Checkout, the cart remains visible for the user to alter as they wish until they confirm their order. This includes applying any coupon codes they might find while completing their order.
More Recommended Products
The idea here is that the products shown would be determined by all items in the cart and thus would show a mix of items. Like everything else on this page, it persists throughout checkout.
Customer Login
Account vs. Guest Checkout
On this page, users are offered the choice between signing in, making an account, or checking out without an account. There are some people who straight up don’t want yet another online account to think about, and I respect that. But I try to give incentives to make an account, most notably only needing to enter billing & shipping info on registration. On all subsequent checkouts, they can skip this step entirely. One of the goals any good design should be to not waste the user’s time.
Billing & Shipping Info
This part is kind of a bummer, but I give the user a checkbox to use the same billing & shipping address, which saves a little time. Giving away slow shipping for free is a good way to entice a customer into continuing if they’re having any doubts at this point. Hopefully this makes them want to come back.
Order Review
Finally, we can say what the total will be. This is the last chance for the user to make any changes to the order including:
- Billing & Shipping info
- Changing quantity or removing items
- Quitting the checkout process altogether
I went back and forth on whether users should be able to easily leave the checkout process even up to this late stage, but in my research I found that gamers hate to be pressured. If they have to stop checkout, I’d rather have them remain on the site than close the browser tab.
Order Confirmation
And we’re done! An alert tells the user the order has been placed and a receipt is emailed to them.
Things I might want to try in a second revision
This was a school project conceived out of nothing in less than twelve weeks. That meant I had to drop some features I really wanted get it turned in on time. As such, there are obviously a few things I wouldn’t mind adding if I had the chance, such as:
- More emphasis on Trade-ins
- Implement a points system for Trade-ins
- Could be used to save money on next purchase
- Could add a certain number of points for each purchase
- Could offer points for friend referrals
- Heavier focus on the Articles section, with info for enthusiasts and newcomers alike
- Experiment with different ways to feature products
- Would take user testing to nail down the best method
- Add a list view to the Product Listings
- Add a Lightbox zoom feature for product pictures/screenshots
- Create a Recommended Products page based on past purchases