Utopian UI: Coded New Contribution Design

in #utopian-io5 years ago

Utopian is beginning to switch to our new design, and as the self-proclaimed "Lead Frontend Developer" 😜 it's my job to help facilitate the code/development changes.

Though this is bound to be one of my more controversial changes, I believe after getting to use this new contribution format for a while, you'll really love it!

New Contribution Appearance Format

Below is a before vs after look at the new changes. Notice the:

  • new appearance of primary tags
  • new look for reputation
  • new look for the header of the contribution
  • border/background color scheme changes





The biggest problem with before is that is way too large. It's not space-efficient at all, and takes up way too much space. Notice how the after image is much more compact/cozy and fits more information in even less space.

However, there are people that prefer minimal designs with a very low amount of clutter and lots of whitespace. The problem with this is that it sacrifices utility— a few contributions would take up the whole page, and space is not saved efficiently.

Though this might seem like a stark change or big difference, give it a while, and I'm sure you'll get used to it! Also, there may be even more changes that are done on this before it goes out to the public.

Proof of Work

Here, I'll attach the first commit and the last commit for all my work on this:


Here's an image of how this new layout would look in a *user profile feed:


Keep in mind that:

  • this will only affect the short look (preview appearance) of a contribution, e.g. when it's in a feed
  • these changes will be released to the public very soon

Thanks for reading,

Posted on Utopian.io - Rewarding Open Source Contributors


Looks good moon! I am wondering have we done any ui/ux research and testing to come up with the new design? I would love to get a user experience/product design professional to look at a lot of this stuff :)

This is just a prototype so far. Much more is coming, it'll look much better, I promise!

We have had a very experienced UI designer design the entire UI for us :)

I like the changes, however, I think there's lots of ways the design can be improved, the visible tags also are a nice touch but in my opinion their position should be at the bottom by the comments icon.

Your suggestions are very helpful! I have implemented them locally and they will be released in my next update :)

Thank you for the contribution. It has been approved.

You can contact us on Discord.

Hello, you received a boost courtesy of @steemdunk! Steem Dunk is an automated curation platform that is easy and free for use by everyone.

Upvote this comment to support the bot and increase your future rewards!

Hey @mooncryption I am @utopian-io. I have just upvoted you!


  • Seems like you contribute quite often. AMAZING!

Community-Driven Witness!

I am the first and only Steem Community-Driven Witness. Participate on Discord. Lets GROW TOGETHER!


Up-vote this comment to grow my power and help Open Source contributions like this one. Want to chat? Join me on Discord https://discord.gg/Pc8HG9x

Coin Marketplace

STEEM 0.22
TRX 0.06
JST 0.025
BTC 19496.85
ETH 1337.64
USDT 1.00
SBD 2.48