Trade Screen Ideas - Submission

[samgawaran]

Goals

this is a submission for this issue:

• https://github.com/colonistio/design/issues/297
• populate ideas on how trading could be improved
• right out what could be done well for mobile/desktop

Ideas

• used desktop screens for the ideas, rehashed them from an older submission that I did and polished them here
• check the figma links for more scenarios for each idea
• every idea considers a clickable bank icon. Newbies had a hard time understanding how bank trading works in our current setup

Idea 1: Move the trade screen on the upper left

• current trade screen on the desktop will show in the upper left portion already, this expands on that idea.
• Moved the action log info on the space where the card section used to be

Figma link: https://www.figma.com/file/SysB628vRorzV7E9Pp9JuR/Colonist---(Sam)-File?node-id=301%3A5314&t=OB9qErXSfUjLjOvb-1

Idea 2: Move End Turn to Right Bar

• Moved the end turn action on the right bar. This frees up space for a bigger trade tab.

Figma link: https://www.figma.com/file/SysB628vRorzV7E9Pp9JuR/Colonist---(Sam)-File?node-id=301%3A53205&t=OB9qErXSfUjLjOvb-1

Idea 3: Move Action Log Layout

• moved the action log info on the left side. This is to optimize the action log section we currently use, if we remove it on the right section, it frees up space for chat and/or remove it completely, making it easier to translate in Mobile

Figma link: https://www.figma.com/file/SysB628vRorzV7E9Pp9JuR/Colonist---(Sam)-File?node-id=303%3A35192&t=OB9qErXSfUjLjOvb-1

Idea 4: Bank in Action Tab

• This idea works best for desktops. after the player clicks on the trade icon, the bank icon will also appear.

Figma Link: https://www.figma.com/file/SysB628vRorzV7E9Pp9JuR/Colonist---(Sam)-File?node-id=304%3A62462&t=OB9qErXSfUjLjOvb-1

Considered

• [x] This proposal fits company vision
• [x] This proposal is impactful according to Prioritizer Sheet
• [x] This submission abides by Des-lvl-1, Des-lvl-2 & Des-lvl-3

Reviewers

@demiculus @JuanRoman77 @johnsillings

[johnsillings]

Also for reference: https://github.com/colonistio/design/issues/297

High-level feedback – we have several recurring trade menu complaints from users from our Bounty Submissions and FeatureUpvote. They are:

• I don't know about trading with the bank / it needs to be clearer that I can trade with the bank
• I want to do a "wild card" or open-ended trade, but I can't
• I don't understand what ports do / how ports work
• I don't know which ports I control

Idea 4 (Bank in Action Tab) is addressing one of the user complaints ("I don't know about trading with the bank / it needs to be clearer that I can trade with the bank"). This might be the right solution but it requires an extra click, which would be great to avoid if possible.

The other ideas might be design improvements (FWIW: I actually don't mind the trade layout!) but we should address these recurring issues directly, if possible, with the revamped trading menu.