After over five hours of searching through websites, I finally landed on a small company who’s website is in need of a redesign: an Illinois-based retro game store named The Old School Game Vault (TheOSGVault).

TheOSGVault primarily buys retro video games from consumers looking to sell them. After a glance at their website, it is not difficult to find any specific area, but it appears very old-fashoined and is due for an update. I have spent the last few days planning a site overhaul by creating a moodboard, color palette, site map, and desktop wireframes. These are the results and the explanations behind the design decisions.

The Moodboard – Retro and Epic

Mood Board for TheOSGVault

A moodboard is exactly as its name implies – a board full of images that sets the mood and tone that the website or company is expected to give off. There are eight images on this board that combine in order to produce the retro vibe needed to attract consumers. The first image is the company’s logo (top left). This is a necessary addition to the board because it reveals the company’s identity. Despite the logo using more than three colors, it is simply shaped and not that hard to read. Can it be improved? Yes, however, the current logo screams retro, exactly the type of mood consumers will be looking for.

Below the logo is an image of sealed Game Boys and Game Boy Colors hanging on shelves. TheOSGVault does have a retail location and a picture that shows a nice collection of handheld game systems that are 30 years old gives off the vibe that this company takes their retro games seriously.

Below that is an image of 80s tech, including an Atari 2600 joystick, the aforementioned Game Boy, a Macintosh keyboard, some tapes, among other pieces of tech that I cannot recognize. TheOSGVault buys retro games, consoles, and other accessories from people who want to get rid of them, and this image shows that they pride themselves on building an authentic game collection that can also be flipped for sale.

Below that is an image of an arcade system outlined with LED lights. Combining a retro gaming device such as an arcade cabinet with fancy new lights is the tone TheOSGVault should adopt in order to attract a younger audience who may not be familiar with retro games.

The upper middle image is a simple sunset gradient. While the image itself has nothing to do with games, the colors imply that TheOSGVault is calm, cool, and an easy place to shop for and sell games.

Below that is an image of a boy staring at a tunnel stripped with green LED lights. It gives off the impression that anyone who walks in the store or goes to the website is about to enter an enchanted world filled with rich discovery and rewarding experiences.

To its right is a simple image of a joystick and buttons, mainly used for arcade cabinets. The colors used to light the controller suggest that TheOSGVault knows how to make the retro tech it collects seem cool and desirable for potential buyers.

Lastly, the top right image is a self-made image that uses color and a bit of gaming history to define TheOSGVault’s passion for retro games. I included the Konami Code into the image because it has a special place in gaming history and its use in many of the retro games that are a part of TheOSGVault’s library.

Color Palette – Simple and Traditional

Possible color palette for TheOSGVault.

The color palette was the easiest to create, yet one of the more challenging to think about. Color is almost everything to a company and their website, and if the color is incorrect then users may be turned off. For TheOSGVault, I decided to go with a three-color scheme plus some accent colors. The white color will be used for the background while the black color will be used for text. This color scheme is typical for paragraph text because this level of contrast reduces eye strain and focuses user attention on the words. It is possible for the roles to be reversed, however, as a black backrgound with white text can make the site easier to read at night.

Next up are the blues. The very first blue (#144493) is the exact color used in the sky background of TheOSGVault’s logo. I want this to be the priamry color on the website – being used for certain backgrounds including the header menu bar and the footer. It’s a nice navy blue that is not explored enough on the company’s current website. The lighter blue (#99B2DD) is used to create a slight analgous scheme for the website. This means that having a different shade of blue will be beneficial for the site an may improve user experience. The lighter blue will most likely be used for hyperlink text.

The red color is similar to the red on the outline of TheOSGVault’s logo, will be used for heading text. It’s a slightly darker shade of red in order to prevent users from looking back at it and is planned to be used for header text.

The final color is the green (#138A36). There is no green in the logo, but it is close enough to the blues on the color wheel where an analogue scheme could be accepted. The green will be used for conversion buttons, such as submitting a message or placing an order. This is not on accident, as green is an ideal choice for call to action buttons because it helps users remember them.

Site Map – Categorized and Intuitive

Site Map for TheOSGVault.

The site map gave me the ability to take all of the content on TheOSGVault’s website and condense it into a few categories that make the site much easier to navigate. Luckily for me, TheOSGVault have their own site map that I was able to use in order to see all of their categories.

TheOSGVault’s official site map

Their site map highlighted all of their main menus in orange and then included each of their categories and subcategories below them. There was no direct path to each of these categories and I felt that some of these block were repeated depending on which column they were under, so I took all of that into consideration and made a much simpler site map.

Header menu for TheOSGVault.

This is the main menu for TheOSGVault. I decided to place all of the “sell” categories under one “Sell Your Games” category. I kept the “Buy Video Games” and “Blog” categories, and added an “About” category and an “Info & Contact” category.

The “About” page is just one page but has two different sections: the About Us story and information on how to sell your games and earn money from them. Because TheOSGVault prioritizes buying your games rather than selling you their games, it made sense to add instructions on selling your games in the company’s “About” page.

The next two pages are laid out the exact same (and when you see the wireframes, you’ll see they’re formatted the exact same way too), with the only difference being that one page is for buying your games and one page is for selling your games. Once you click on either one of these pages, you’ll see a main menu with categories filtered by company to find the game you want to buy/sell. If you are looking to buy/sell a console or an accessory, then you can find it by either searching for your preferred item or by clicking any of the category icons.

The next page is the blog page. TheOSGVault’s site map listed 21 blog categories, each with their own set of blogs. In order to simplify the blog page and to make it more attractive, I took the 21 categories and combined them into three main categories: Game Reviews, Tips & Guides and General Articles. It will be much easier for people to find blog posts that appeal to them by browsing through a category format.

Lastly, I added an Info & Contact page for easy access for the company’s contact info and important documents. All of these are currently accessible via the footer, but I felt that in order to keep their positive reputation and further increase user engagement, a category needed to be made. This page will include the company’s address, phone number, email, terms & conditions, privacy policy, FAQs and social media links.

Wireframes – Sleeker and Cleaner

Wireframe for TheOSGVault’s new homepage.

The last step in planning out a redesign for TheOSGVault is creating wireframes for what the new website could potentially look like. Wireframes are simple designs that demonstrate what the website will look like without having to incorporate all of the colors and images needed for the final design. They are useful because they give a visual aid in determining whether or not a website will function properly with the planned design.

Above is the wireframe I created for the company’s new homepage. It features a cleaner menu bar that is fixed at the top of the screen, a banner image, two images below that function as links to buy or sell your games, as well as an introduction to the company and their website. I intentionally made the design flatter so it can appear more modern and accessible for a younger audience.

TheOSGVault’s current homepage.

Comparing the wireframe to TheOSGVault’s current homepage, it’s possible to tell that the wireframe does a better job in laying things out and organizing information while eliminating unnecessary text and object. The wireframe also fixes the current homepage’s squished feel by pushing the borders all the way to the edge of the site.

Wireframe for the About page.

The “About” page has the most text out of all of the pages (excluding blog posts, of course). This page is easy to understand because right away you can see a summary of what the company is about, and without scrolling, you can see the next heading (which may supposedly attract the most people). A nice picture of the owner or a positive customer service experience can make the “About” page better by giving the company a sense of friendliness and trustworthiness.

Wireframe for Selling Video Games.
Wireframe for Buying Video Games.

Each of these next tow sections are the exact same: they feature a search bar for those who want to search for the game or console they want to buy or sell, and they neatly place all five categories in one row in order to eliminate the need to scroll any further on this site.

TheOSGVault’s current “Sell Your Games” page.

The problem with TheOSGVault’s current pages for selling or buying games is that they don’t include any categories or buttons that can take you to a list of games. Instead, there is yet another block of text that many people, including myself, will just skip over. Keeping all of that information on the Home or About page will make the buy and sell pages much cleaner, more useful and much easier to use.

Wireframe for TheOSGVault’s Blog page.

Because of the high number of blog categories, I intentionally made the images larger so the user can immediately understand that there will be more options available if they just scroll down. There is a little intro text for the user to read before jumping into the blogs and a search bar on the right side if the user wants to search for a specific blog or keyword.

TheOSGVault’s current blog page.

While I like the images used for the blog posts, I feel like TheOSGVault’s current blog page is a bit too messy. It shows random blog posts while having a small submenu bar for categories if the user does not want to continue scrolling down. I believe that getting rid of the individual blog posts and hiding them behind categories from the start is the smarter move when designing a page to look less cluttered.

Wireframe for TheOSGVault’s contact page.

Lastly, this is the information and contact page for TheOSGVault. All of this information (aside from social links) are located on the footer of the homepage and seem to be an afterthought. This is why I feel a dedicated page on the header menu was necessary – in order to make a clean page for all of the contact Information and important documents for the user to scroll through if they desire. The image on the bottom left of the page will preferably be of the retail store from the outside.

Overall Thoughts

I am a huge fan of retro video games, so getting the opportunity to plan a website design for a small retro game company was really cool. I think TheOSGVault’s website can use a some work in order to make it more intuitive, and combining my simple yet clean wireframes with the modern designs and colors used in the moodboard can elevate this website’s potential to gain SEO and, therefore, more users.

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: