MENU
SFT MKTPLACE
YEAR
2024
ROLES
Product Designer
PROJECT SCOPE
Product Design
Design System
User Research
DESIGN TOOLS
Figma
TECH STACK
React
TypeScript


OVERVIEW
The most ambitious marketplace
At Genopets, we had a dream. A dream to enable the player to player economy in the gaming world. Wouldn't it be great when you transact an item to another player in-game, you get credited with the value of the item just like in real life? We set out on doing the world's first marketplace that allows user to transact directly with one another and was very successful in the implementation. And this is the story.
CHALLENGE 01
Too many categories
There are multiple categories of items and within each category of items, there are different levels of sub categorisation. This proves to be a big problem when it comes to thinking about how to present the different layers of information. There was a need for a way of organising the information while keeping the categories easy to understand for the user.
THE BRAINSTORM
Keeping things simple
The first issue that needs to be resolved is the number of layers that we want the users to go through. For some items that are up to four layers of information, having so many layers for the users to click through to get to the item that they are looking for is a hassle. While considering the search experience for the user, we have to consider the different types of items that we have and determine a level of depth that we want to users to go through that would make sense to the users and the categories that we already have.
SOLUTION 01
Two is just enough
The final design decision was to keep the navigation depth to two layers. The first layer is the item type, while the second layer is the individual item. The way of organising the information is flexible enough for all item types and extremely easy to understand for the user. For navigation, navigation tabs were used so that all the user could easily toggle between different categories of items. Within each broad category, all the items within that category will show. Although, there is a more complex breakdown for item categories, the decision was made to show only two levels of navigation, if not it will get complicated very quickly. However, with this decision comes other challenges.
CHALLENGE 02
Too much information, too little space
Whenever a feature is being designed, there are usually two main constraints coming at you in different directions. The user and the internal requirements. What would the user want? What constraints do we have? In this case, the issue of speed of execution and the ease of discovery was the main issues that we need to address based on user feedback. Internally, we were constrained by the rigid overall data structure that we had to adhere to and the complexity of the different data structures that each item has.
THE BRAINSTORM
Delete, remove, simplify
Due to the data structure constraints, there is a need to ensure the users get the information they need at a glance. This part of the process requires a decision to be made on the information that is most crucial for the user and those that can be excluded. Since we have previously decided that we will go two levels of navigation, the rest of the important information for the user has to be shown somewhere intuitive for the users.
SOLUTION 02
Keeping only the most important information
The final solution was the design of a tile component that shows the item image for quick visual reference, the item name with more prominent font style and sizing and utilising the corners of the tiles to show other relevant information. We identified that the most important information for the user is the item name and the quantity in marketplace.
FINAL OUTCOME
The world's first player-to-player item marketplace
Users can easily navigate between tabs to choose between categories. Once the user is in a category, he/she would be able to get all the information they need within the item tile component. As a result, the user can get to the items that they are looking for within two clicks on the mouse. Thus, bringing order to a great deal of chaos in the number of categories and items that we had.
WHAT'S NEXT
It gets better, over time
This is the first iteration of the marketplace - designed to be implemented with speed to push out the feature. An important skill as a designer in a fast paced startup environment is to understand the time and cost implications of the proposed design. Understanding how much to push for at a given time and how to structure the next iteration to slowly implement and push your feature or product to perfection over time is as valuable as excellent experience design. The element of time and lifecycle of a feature development as a factor should not be overlooked. The next iterations of the marketplace has already been thought of and designed and the features include search for quick item access, filter and sort functionalities to further refine a given search result and more information on a particular item.
SFT MKTPLACE
OVERVIEW
CHALLENGE 01
THE BRAINSTORM
SOLUTION 01
CHALLENGE 02
THE BRAINSTORM
SOLUTION 02
FINAL OUTCOME
WHAT'S NEXT