Trade Fort — A case study

Trade Fort is an app for casual and avid virtual goods traders based on the game Team Fortress 2. It offers a virtual marketplace for all kinds of commerce activities for people who want to buy and sell using the different in-game currencies and real money.

As a long time fan of Team Fortress 2 and someone who trades often, not only in this game but many games on Steam, I wanted to take up making this concept app as an exercise to attempt to make trading a better experience. The main problem I hoped to tackle was the detachment of “playing the game” experience and the “trading” experience and find a way for both of them to be a simultaneous experience with the playing the game serving as the primary experience.

Conceptualization

Image for post
Image for post
Image for post
Image for post

Discovering User Needs

For the purpose of identifying users and their needs, I interviewed 4 people I know who have been regularly playing the game for three to five years and have been trading or last traded in the past 2 months. While ideally I would have liked to interview 15–20 people, this was a side project alongside my daily routine which is why I could not accommodate many more interviews.

Image for post
Image for post
Most common set of points cropping up
Image for post
Image for post
Importance to features by demography
Image for post
Image for post
One candidate’s answers to the interview, as an example

Researching what the users are already familiar with

In-game trade servers first :

Image for post
Image for post
Offers and proposal zooming past by in the chat with other messages
Image for post
Image for post
How a “receipt” looks when trading in the game
Image for post
Image for post
Promoted listings and conversions rate as the first thing a user sees
Image for post
Image for post
Classified listings can be sliced and diced by personalised filters
Image for post
Image for post
Extensive community driven pricing charts

Personas

Image for post
Image for post
Image for post
Image for post

Storyboard to map out ergonomics

Image for post
Image for post
The typical user journey is on top, the proposed ease of life is on the bottom

User Flow

As a frequent user of these trading sites and being a part of this subsection for many years, the challenge was not to reinvent the experience. The challenge was to reduce the friction between users and the experience of trading or browsing these deals within the trading community that can be used side by side while playing the game on a mobile (or secondary) device.

Image for post
Image for post
People have been using these websites for a long time and for multiple games

Information Architecture

After analysing the user journey and identifying the macro compartments, the information architecture was so devised as to feature-wise compartmentalise the needs of various users. This directly resulted in the tab system being chosen as seen in the wireframes later.

Image for post
Image for post

Wireframes and Sitemap

Based on the initial ideas, I got to sketching some multiple low fidelity wireframes quickly in order to flesh out the flow and layouts. After selecting the designs and iterating on them, I reached the solution.

Image for post
Image for post
Image for post
Image for post
Iteration 1 and Iteration 2
Image for post
Image for post
Alternate classified listing design
Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
The blocky nature of the game and sparse, atomic elements was a huge anchor of familiarity despite not being the most sleek solution
Image for post
Image for post
Image for post
Image for post
Final design of promoted listings and classified listings

Sitemap diagram

Image for post
Image for post

Mockups

The game has a very industrial feel to it’s UI which dictated most of the artistic vision for the mockups including typography and colours. When the objective was to be a seamless part of the same experience, it was only natural to borrow artistically from the game.

Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
To be part of the experience, it was important to feel and look like experience on surface and not require the user to detach from the ongoing primary experience

Why an app instead of a responsive mobile website?

Researching the same set of candidates yielded the fact that the two important factors coming into play in terms of frequency of revisits were either intrinsic nature of user to keep perusing or the negotiating aspect that created the need of using this platform as a messaging tool. The frequency of revisits was not a function of how many trade deals a user does but how engaged are the traders in a deal that results in a back n’ forth communication. Messages pertaining to negotiations and notifications for the same were very valuable to the users which are best implemented in an app instead of a website, given the frequency of notifications and subsequent revisits for the duration of a single trade deal.

Conclusion

It was an important lesson to learn that the best practice to fit into an experience that already exists is to leverage the familiarity of the original experience. Expectations arise from what users are familiar with which can be a great asset for design inspiration.

Image for post
Image for post

Written by

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store