New UI for SwapSteem

in #utopian-io6 years ago (edited)

mockup(1).png

Repository

https://github.com/nirvanaitsolutions/swapsteem-ui

Linked Task Request

https://steemit.com/utopian-io/@swapsteem/task-request-swapsteem-ui-swapsteem-invites-contribution-for-ui-design Created by https://steemit.com/@swapsteem

Details

Swapsteem is a peer to peer exchange, similar to localbitcoins.com. With increasing number of users on this platform, we have felt a strong need for a peer to peer exchange to convert Steem and SBD directly to different fiat countries, provided with secure escrow transactions in moderation of varius influencial steem escrow agents for the respective country or currency. So we want to help Steemians get their hard earned Steem directly into their bank accounts, and save them a lot of Fees that exchanges take for such facilities.

My task was to create a new home page design for Swapsteem (a logged in and logged out version of it) and if it gets accepted by the team, do the UI for the inner pages too (Post New Trade Page, Wallet Page, Profile Page, Dashboard Page, Trusted People page), which will be published soon.

Desktop version

Home page - Logged in version

Light - Logged in.png

Dark - Logged in.png

Home page - Logged out version

Light - Signed out.png

Dark - Signed out.png

Mobile version

mobile-mockup.png

Light - Signed out - Mobile - 812.png

Benefits / Improvements

After a few hours of research, realized most of the peer-to-peer exchanges has bad UI and even worse UX (User Experience) design.

After noticing this issues, as a UX designer, my goal was to create a good looking but still user friendly UI, which works great on desktop and on mobile devices. I have created a dark and a light version of the interface, so the users could determine which version they prefer to use.

Proof of authorship

progress.png

Tools

Tool used: Adobe Photoshop CC

Original files

PSD file: https://drive.google.com/file/d/1QF0C1Riq9rAZpMEO215wtsBPLXBFIiFQ/view?usp=sharing

Proof of Work Done

https://github.com/outwork

This work is licensed under Creative Commons Attribution 4.0 International License

Mockups used for preview:

Tablet mockup - https://www.graphicpear.com/liquidpro-ui-kit/
Phone mockup - https://www.pixeden.com/psd-mock-up-templates/iphone-x-psd-mockup-vector

Sort:  

Hello buddy, excellent work, very good presentation really. The only thing that I advise you is that when you provide the links to pixeden.com you must take into account this last part of the license :)

If you would like to share one of our resources, you can make a link to the specific resource page on Pixeden.com or / and use our preview images. No HOTLINKING is allowed i.e. You can not make a direct link to the download or / and the images hosted on Pixeden.com.

You can provide the link, but not directly to the download :).
This is the link you can provide :) https://www.pixeden.com/psd-mock-up-templates

Thank you for your contribution. This is neat.

  • Please add the license information to the post.

Your contribution has been evaluated according to Utopian policies and guidelines, as well as a predefined set of questions pertaining to the category.

To view those questions and the relevant answers related to your post, click here.


Need help? Write a ticket on https://support.utopian.io/.
Chat with us on Discord.
[utopian-moderator]

@outwork Thank you so much for contributing to our project. Really Nice and Cool design.

Hello @outwork, thank you for sharing this creative work! We just stopped by to say that you've been upvoted by the @creativecrypto magazine. The Creative Crypto is all about art on the blockchain and learning from creatives like you. Looking forward to crossing paths again soon. Steem on!

Hey @outwork
Thanks for contributing on Utopian.
We’re already looking forward to your next contribution!

Want to chat? Join us on Discord https://discord.gg/h52nFrV.

Vote for Utopian Witness!

Congratulations @outwork! You have completed the following achievement on Steemit and have been rewarded with new badge(s) :

Award for the total payout received

Click on the badge to view your Board of Honor.
If you no longer want to receive notifications, reply to this comment with the word STOP

Do you like SteemitBoard's project? Then Vote for its witness and get one more award!