Mohamad Irfan

JavaScript enthusiast, full-stack developer.

Published: 2024-08-22

bestbuyloot.com - digital online store

The Story

My client requires a website to sell in-game items from League of Legends. The site should replicate the style of the in-game store, including matching color palettes, fonts, and layout, to create a familiar and reassuring experience for users.

Here is some samples of the in-game store page:

The situation is that the backend already set up with medusa.js to handle all backend online store logic. And the goals is to create a website for it.

But along the way, we encountered several performance issues with medusa.js.
Fortunately, after extensive discussions and collaboration, my client and I agreed on several strategic changes that effectively addressed all the problems we faced.

These improvements not only enhanced the performance  but also streamlined our workflow, resulting in a more robust  and efficient system.

At the time, the requirements have not been fully established yet because we need to incorporate additional requirements and adjustments as the process progresses. These evolving details will be outlined in each paragraph within the context of the document.

Design Process

For the design aspect, there's no need to address any uncertainties, allowing me to directly create samples of the page design. My primary goals is to make the feel of the website similar as the League of Legends in-game store.

Here is the design that will be transitioned into the development phase:

Homepage Design

Homepage design included:

• The top bar section features the logotype, navigation menu, product pop-up button, and cart button. This will be used amongs all pages.
• The hero section includes a full-size background image, tagline, and a call-to-action button.
• The footer section displays customer reviews of the services.

Featured Product Page Design

It basically highlights the featured product.

Product Page Design

The layout will be the same for the champions, skins, and loot product pages.

RP Popup Design

RP is the special in-game currency that is used to buy special items in the game. So we need to highlight it by placed the RP button in the top bar.

Cart Design

The cart handles all the heavy lifting and is conveniently placed in the top bar for easy user access, which contributes to a higher conversion rate.

This design is sufficient for our current needs, though it's important to remember that it's not the final version.