I was tasked to work on this individual General Assembly school project challenge to redesign the website of
Xtreme Solution.
The project seek to improve the information architecture and e-commerce experience of the website. Final deliverables is a high fidelity prototype.
Xtreme Solution has been in business since 2011 and has strive to be worlds greatest gaming zone through bringing in the Best and Ultimate gaming products desired by Any gamers.
.svg)
I First Talked To My Users
i learned their needs, wants and more importantly frustration that they would encountered when using the website.
From Our Conversations
To understand my user needs and problems, i conducted a user interviews of users with gaming experiences. These group of users potentially has purchase history in relations to my challenge. From understanding their online to their offline shopping behaviour
My User Needs To
Be able to trust the website so that
she is able to make her purchase
comfortably without disappointment.
My User Needs To
Be able to accomplish his buy in a quick
and effective manner so that he can have
a smooth check out.
Identifying Strength & Weakness
I conducted 3 types of analysis, they are comparative, competitive and task analysis.
For illustration purpose, I have broken down to 3 types of brands profile identified for the comparative and competitive brands.
The initial prototype
The findings from the usability testing was added for areas to improve before the solution.
1. Navigation
Keyboard drop down menu was removed from main navigation and brand listing is changed to toggle menu selection as it was blocking the product listing card.
2. Text Readability
Product title text and description made bigger
3. Color
More colours was introduced to the font and the design layout
so that it has more brand differentiation.
4. Icon
Shopping cart and the location icon is located closer to be near to the pages navigation for more affordance.
From extreme testing to extreme solutions.
On the homepage, the content to display is reconfigured to display the hero banner and the category banners, to be less cluttered for user.
The navigation panel is reposition from left to top center position, so user is able to toggle between the pages with ease.
Search field is placed prominently at the top center location to allow the user to search for the product so they are able to have a fast check out.
Items from the menu is listed on the filter list instead.
The content information in the card such as, product name, short description and price is being rearranged and a shout out label is added to feature the intended type of shoutout.
The rearrangement and the shout out label would encourage user to make their buy decisions and improve the clarity during the decision making process.
On the homepage, the content to display is reconfigured to display the hero banner and the category banners, to be less cluttered for user.
Included this on the product listing pages filter options and by by alphabetical order for products name. As not many gamers know all the brands.
Things that was done to improve on the shopping experience
Dark-theme
To main consistency in the look and feel of the store from physical to digital platform, dark theme was introduce to the website.
Aesthetic
The individual product image was improved with new background
Hero image that spread across the page to engage the user.
1. Adding of user reviews in the individual products page.
2. Animated hero banner splash page.
3. Adding animated lighting effect below the navigation banner to elevate the user experience further.
.svg){kind=small}
