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.
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.
"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.
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.
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...
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
Updated Userflow
Wireframing
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.
Key Element Changes
• 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
• Included filters to sort and identify products easily
Items can be sorted via brand, product and price point
• 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.
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.