User Interface Improvements & Price History

Components

This suggestion would involve changes to the overall look and feel of the site as well as the ability to view price history of a currency.

Proposal

Within this proposal I propose the following changes:

1. UI Improvements
2. Ability to view Price History with buy and sell buttons

I will explain further about each of these adjustments here:

UI Improvements

I propose that the UI is adjusted to provide a more modern look and feel which in turn will also provide a more contextual experience to a user, this suggestion hopes to provide a user with a user interface that will guide them through their currency exchange journey.

The following explains the UI changes I should be made:

1. Landing Page
Firstly I propose that a user is only presented with the options to enter the number of sbd and steem and the ability to convert, no other input fields or button should be shown here.

Within the mock you can see that a user would only be presented with a input field to enter their amount of SBD/STEEM and the ability to choose which they wish to convert and then a go button.

2. Results
When a user has entered the total number of steem or sbd they wish to convert a user would then be taken to a results area where they would be able to see the current price of steem/sbd in the African currencies, this is similar to the current implementation although this has been laid out slightly differently. Each of the results provided would be clickable. When a user clicks any of the results they would be taken to a price history page where a user can find out more about the price changes over time.

Note: I would not see these needing to be built as separate pages and instead this could be achieved by hiding elements based on various page interactions.

Ability to view Price History with buy and sell buttons

As mentioned above when a user clicks on any of the results from their currency conversion they'll be provided with a list of results. Each of the results can be clicked to show a price history page. Within the price history page there should be the following options:

1. A graph which shows price changes over the past 24 hours, 7 days and 30 days.
2. Buy & Sell buttons which link to a site which will allow them to buy or sell them sbd.

Ideally, this graph will provide live price although if not it doesn't it should automatically update every 30 seconds if this isn't provided a live data feed the user should be informed of when it was last updated.

Mockups / Examples

The following shows a mock of the how the landing page would look:

The following shows a mock of how the page would look following a search taking place:

The following shows how the page could look for the price history of a particular currency:

Benefits

Usability

I believe that the mocks provided help improve the usability of the site through the reduction of choice for the user, for example in the current site there are many input fields for the user where they can enter information to be converted, I believe this method is confusing as the number of currencies that are supported increases it will come more confusing. The benefit I believe that the changes in UI produce can be found in its ability to guide the user through a set of actions first all entering the amount of steem, then being provided a list of results and then being able to click on the result. I believe that it will remove the confusion that could be seen with the current method which in turn should help to increase user retention and overall the app success.

Convenience

By adding the ability to view historical prices and direct links to buy and sell you're able to provide more value to a user and essentially take them through a journey. For example, a user will come into the site to convert their currency but then by looking a the price data they can make decisions surrounding if they should buy and sell and then be directed to a marketplace where they can buy or sell their currency.

---

Posted on Utopian.io - Rewarding Open Source Contributors

---