top of page

GAME ACADEMIA

Redesigning an online e-commerce trading card game store.

TEAM

Solo project

TOOLS

Figma

Figjam

TIME

4 weeks (Jul 2022)

RESULTS

Navigation was more intuitive

Interface was much cleaner

iMac 27-inch Mockup.png

About the project

2 months into my UX course, I was tasked to redesign an e-commerce website. It was our first project determining the focus of an online consumer, and our first challenge scoping a UX project from start to end and creating a hi-fi prototype on Figma for the first time.

About Game Academia

Game Academia is an online TCG store with exceptional customer service. They provide convenient access to specialty TCG products and offer accessible shipping worldwide. With the changes in users online spending habits in the current economic climate, Game Academia's dated website could impact potential customers and needs a revamp.

Game Academia's current website

The problem

Game Academia's website looks and feels very outdated and users have lamented that the site was very confusing and cluttered. Users also had a hard time location certain products on the website due to the confusing directory. There were also visual design problems that affected the readability of the words and misalignment of the different elements of the pages.

I knew I would have to declutter the homepage and reorganise the information hierarchy, and streamline the design and UI so that it's more pleasing and intuitive for users.

My design process

Develop
Discover
Define
Deliver

Competitor Analysis

User Research

User Personas

Problem Statement

Solutioning

Wireframing & Prototyping

Usability Testing

Reflections

Discover

Competitor Analysis

I identified 3 other online TCG stores, local and international, studied their pros/cons and created a features inventory checklist.

Screenshot 2023-05-16 at 11.44.01 AM.png

The pros/cons analysis gave me an idea of what the competitors have done well and not-so-well that I might consider for my redesign. This will guide me in my decisions in prioritising the design changes Game Academia needs for their website.

User Research

I conducted user interviews with 5 users to further understand their spending habits, goals and needs and how we can further improve the Game Academia website. Here is a summary of the users' wants and needs when purchasing products on the site.

Screenshot 2023-05-16 at 12.23.47 PM.png

"I" Statements

01

I want a convenient way to pay for the products.

02

I want an easier way to locate the items I am interested in.

03

I want more accurate information about the product I am purchasing.

Users dislikes

Users had a difficult time reading the words on the site.

When prompted with a task, users found it difficult to locate certain products.

Some features that users need, e.g. “add to favourites” and sort, don't exist.

Define

With my findings, I created 2 user personas with corresponding problem statements.

Screenshot 2023-05-16 at 12.03.20 PM.png

Ryan's Problem Statement:

Ryan need an easier way to locate the items they are looking for because they already know what type of product and brand they want to purchase.
Screenshot 2023-05-16 at 12.03.30 PM.png

Jason's Problem Statement:

Jason needs a way to be informed about the products because they have insufficient knowledge to help them make informed buying decisions.

How might we...

Screenshot 2023-05-16 at 12.52.34 PM.png

Develop

To address the problem statements of my 2 user personas, I had to redesign the site so that navigation is intuitive and fuss-free, and important information is easily within reach and visible for Ryan and Jason.

Updated Sitemap
Screenshot 2023-05-16 at 12.05.32 PM.png
Updated Userflow
Screenshot 2023-05-16 at 1.27.35 PM.png
Wireframing
Screenshot 2023-05-16 at 12.05.49 PM.png

Initial wireframing sketches

With the initial sketches done, I jumped into the Hi-Fi prototype so I can have a version for users' to test.

Screenshot 2023-05-16 at 1.31.18 PM.png
Key Element Changes
Screenshot 2023-05-16 at 1.55.37 PM.png

• Consolidated the brands section so that it doesn't take up the whole website

• Main navigation bar refocused to include key items for users to find

Screenshot 2023-05-16 at 2.05.24 PM.png

• Included filters to sort and identify products easily

Items can be sorted via brand, product and price point

Screenshot 2023-05-16 at 2.06.00 PM.png

• Information on product pages are directly under the "Add to cart" button

• Users can get more information about the product before making a purchase decision

Hi-Fi Prototype

Usability Test with Hi-fi Prototype

Goal

To test if users are able to find and purchase groceries on the prototype site with ease and convenience.

Too discover users' likes and dislikes about the prototype site.

Target Group

The participants from the initial user interviews

No. of Users

3

Findings

Users could properly locate products when asked to locate them. They also preferred the new navigation as it was clearer and much straight forward than the original website. Users liked the addition of Featured and New Products, as a new user could easily identify this section from the landing page.

Screenshot 2023-05-16 at 2.06.20 PM.png
Reflections

1. Look for inspiration outside of the box.

During the project, I had to look into other existing e-commerce sites to see what were the best practices used in the industry, even if they weren't commonly used in the TCG industry.

Being open to take inspiration from outside the box can pave the way for more improvements that could beneficial to the users' experiences.

2. Time management is key.

For projects like these, balancing the time for the research and the design can be really important. I felt like sometimes I needed to spend more time asking questions, but when it comes down to it, prolonging user research can leader to confusing paths down the road with no clear direction.

It is important to know when to stop and refocus your project to the important details you are solving for.

Thank you for taking the time to read my case study.

Feel free to connect with me at asyrafrasid93@gmail.com or drop me a message via my LinkedIn.

bottom of page