Trading - Wireframing: Part I

Let's take an in-depth look at the upcoming trading mechanics in Junction Gate, starting with the wireframes for the trading interface. This post will be the first of several posts about trading and is part of an expanded effort to share more about the development of Junction Gate with the community.

If you don't want to learn about game mechanics before playing, this is your spoiler alert because this post will go into a lot of detail about trading.

Because the game is still under development and this is the design phase, anything you see here is subject to change.

Introduction To Wireframing

It's important to plan before starting work on any new feature in the game. It's always far cheaper to make changes at the design stage than once the coding has already begun. There are multiple ways to start designing, but one general approach is to start by creating wireframes of the user interface.

Wireframes are rough mockups that emphasize the layout, interaction, and content of an user interface and aren't meant to be a pixel-perfect polished specification. They allow the designer to experiment with different UI approaches until an optimal solution is found that meets all of the design requirements for that particular screen.

Once the user interface is sorted and there is a general idea of what will be included and how the interactions will work, it makes it much easier to design the data structures and code the interface. Whenever possible, the designer should try to re-use UI design patterns that are already in the game so that the player doesn't need to learn an entirely new interface.

The tool that I use for wireframing is called Balsamiq Mockups. It's a prototyping tool that allows you to quickly create mockups using a drag-and-drop interface and it has a pre-built library of user interface elements that you can quickly add to the canvas. If you've ever created a PowerPoint presentation, it works in a similar manner.

Types Of Trading

Trading doesn't exist in the alpha version of Junction Gate. It's being added to the beta as an alternate method of earning credits because many players didn't want to play the stock market. The stock market interface was complex, had unfamiliar terminology, and didn't have a tutorial. While an improved stock market will still eventually be re-integrated into the game, there needed to be other options for players to make money and trading is the first of those options.

There are several different types of trading that will occur in Junction Gate:

  • Local Trading: In local trading, independent ships arrive at Junction Gate for a limited time and then depart. The player can do one-time trades with ship captains or set up a recurring order.
  • Remote Trading: In remote trading, player ships will be able to travel to a location and conduct one-time trades with neutral or allied NPC factions.
  • Trade Routes: With trade routes, players will be able to setup regular trades with allied NPC factions as a result of diplomatic ties.

Because of the scope of the trading feature, the next release, 0.1.0, will only have local trading. Remote trading and trade routes have dependencies on factions, ships, and planets, which are not yet in the game. Those aspects of trading will be implemented in future releases.

Design Goals For Trading

Some of the groundwork for trading has already been laid with the additions of the component crafting system and the station inventory. Resources, like ore and food, and components are some of the items that will be tradable in the game and there will be future possibilities as well.

Trading itself will lay the foundation for the future economy in Junction Gate. In the alpha, the stock market rose and fell on a semi-random basis. In the beta, corporations will produce and purchase goods that will need to be shipped to every planet and colony. The stocks of each corporation will be based on their access to resources and their ability to generate a profit from the products that they produce. Trading and shipping will be vital to the ebb and flow of supply and demand. Factions and corporations will trade with each other and the player.

Even though not all trading features will be implemented in the next release, it's still important to plan for how they will integrate into the game. Because of that, we'll look at trading wholistically and preview some related features that won't be a part of local trading. (The remainder of the trading wireframes will be included in a future Part II article on wireframing.) Here are some of the initial design goals for trading:

  • Every component and resource has a base value tied to production costs.
  • Values will flucuate based on supply and demand.
  • Individual marketplaces will have local pricing.
  • Multiple entities will be able to conduct trades with each other: the player, independent traders, colony governments, and corporations.
  • Trade will allow the player and factions to specialize in various types of resource production.
  • The player should be able to play the game primarily as a trader, buying low at one location and selling high at another. This would be similar to a career option and would not be required gameplay.
  • Goods will travel via ship. Fuel costs and profit should be factored into costs.
  • Each ship will have different cargo capacities based on their customization.
  • Independent traders will have different cargo focuses: resources, electronics, etc.
  • Some independent traders will have regular routes, others will be one time only.
  • Each location/ship can set the items that are being bought and sold as well as the prices.
  • A bartering system will allow some flexibility in prices. Bartering ranges will be based on experience, buying power, and prior relationship.
  • Each location will require multiple facilities to enable trading including landing pads.
  • Only 1 ship per landing pad and each ship will only have a limited docking time in port. If pads are unavailable, a queue of ships will form.

Having laid out the initial goals for trading, let's move on to the wireframes.

Trade Center

The trade center will be the "landing page" for trading. Beyond providing a gateway for the other trading screens, the trade center will allow the player to set their prices for both buying and selling. This will allow other factions and ships to determine if they want to ship a particular good to Junction Gate or purchase a good from the player.

This is the content area of the screen and does not include the resource panel or the side menu. It reuses design patterns already in the game like the breadcrumb and the top menu for consistency.

One of the most important features throughout the entire trading interface will be sortable tables. Here, both the buying and selling sides of the screen will have sortable tables.

The dropdowns labeled "Resources" will sort tradable goods according to category. The Resources category will contain all of the staple resources pictured here, but other catgories would include the different classifications of components or other tradable goods. The default setting here would be "All Tradable Goods".

Both the buying and selling interfaces will function in a similar manner. Typing in a price, setting a quantity, choosing the type of order, and clicking on the lock button will place your bid to either buy or sell on the open market. Once a ship arrives to deliver or purchase your goods and the transaction has been approved, the bid will be unlocked and reset.

There are two types of transactions: orders and trades. Orders are exchanges for credits only whereas trades could include other types of goods. When a buy order is placed, credits are set aside for the eventual transaction, which will happen automatically on ship arrival. Similarly, sell orders remove the goods from your inventory. With trades, nothing will be set aside, but the trading interface will popup when the ship arrives and will allow the player a chance to barter.

Universal Resource Price Index

The Universal Resource Price Index screen lists all tradable goods in the game, their average price, and the bids from buyers and sellers for each good.

The left column is a sortable goods table, again with the dropdown category selection. Clicking on the resource will trigger the main content area on the right, the resource detail section. The tabs will display the buyer bids table, the seller bids table, and additional data about the good. The "Trade" button in both the buyer and seller bids tables will trigger the trading modal below.

This trading modal is similar to the way the table in the Trade Center functions. Again, we want to re-use as many interface elements as possible so the user doesn't have to worry about learning new things.

Some key differences to point out, however, include the delivery ship, delivery fee, and delivery time. The delivery ship selection would allow the player to select from their own docked ships, independent traders, or the other entity's ships. No delivery fee would be paid by the player if they use their own ship.

Proposing a trade does not mean it is automatically accepted. The other entity will have a chance to counter or accept. A later wireframe will show what a counter proposal would look like.

Note For the first release of trading, 0.1.0, the Universal Resource Price Index will only be partially implemented as there will not be other locations or factions present in the game. The average price of each good will be "faked" until the other dependencies are in-game and it can actually be calculated. This means the trade button will be non-functional.

Commercial Port

The Commercial Port screen displays the commercial ship activity in and around Junction Gate. The facilities required will be talked about in a future post, but it's important to note that there will be limited docking availibility on the station, so only a select number of ships will be at Junction Gate at any given time. If there is not enough room, ships will be placed in the "In Transit" table and marked as "Queued" until a spot opens up.

Note All port and transit times are marked in game time, not real time.

The Info button in both tables will bring up an information modal on the ship. There's no current design for this modal, so it may or may not make it into the 0.1.0 release. However, clicking on the Trade button will load the ship trading screen below, which is an expanded version of the trading modal.

The ship trading screen has more information than can easily fit in one screen, so tabs separating the buyer and seller have been implemented. At the top of the main content region is information on the ship, followed by the goods category select box and then the sortable table below. Click on the Buy button will add that good to the right column that shows the trade details. The seller tab will have a corresponding Sell button that will do the same thing.

Most trades will be one-time, but some traders may return multiple times and for those types of traders, you'll have the opportunity to set up a longer deal that will affect the pricing of your trade.

Once you propose a trade, the captain of the ship will have an opportunity to accept the trade, reject it, or counter it. The text in this wireframe is just a placeholder and will be varied once implemented into the game.

Looking Ahead

Now that an initial design for the first phase of trading is completed, I'll be going through and making some adjustments and changes to make sure that every area is as well-thought-out as possible. There are still error states and edge cases that need to be accounted for and I'll also start looking into supply and demand, trading, and other economic algorithms over the next few days. Then, once that is largely squared away, I'll begin the process of coding the trading features for version 0.1.0.

The rest of the wireframes for trading will be shared in a future update a few releases from now. Once that post is available, I'll update this one with the link.

If you have comments, questions, or feedback, post them in the comment section. If you like this post, don't be afraid to share it with your friends!

comments powered by Disqus