Initial Visual Treatment for Steemit.com (#01 Mockups)

Hello everyone,

I'm posting into suggestions this initial visual treatment for the front-end of steemit.com.

These mocks are conceived to collect feedback on how to make steemit.com a bit more user-friendly and the primary drivers are information clarity and social engagement.

Components

The main components highlighted in the following mockups are:

• main/personal feed
• wallet overview
• trending tags
• user suggestions

Proposal

Here my initial proposal, in both day and night view. In the section below I'll go through each component. Instagram has inspired the information clarity. The layout is structured on three columns and on the left side there are the user belongings, in the centre the feed, and the right sidebar is used for social engagement.

These are mockups, not final designs, so consider them as an initial proposal. Colours, fonts and anything else can be rearranged. I would be delighted if a designer will put her/his hands on them.

Here you can download my Sketch file.

Mockups

Let me break them down now and explain why I came up with this idea.

Profile Card
The profile card is shown in a compact rectangle on the top-left corner of the screen. By hovering the avatar, users will be able to see the profile's reputation.

The POST button just below the profile card stands out in colour and size.

Wallet Overview
The wallet overview allows users to view at a glance their/others wallet belongings. There will be possible to CLAIM reward directly from there. The MORE button will open the wallet page for more features (i.e. transfers, log, etc.)

Feed
The feed is shown in the central and more prominent column. Here I've just redesigned and repositioned some icons. From bottom-left, we can see the UPVOTE icon, in the first post not pressed and in the second pressed.

Below the short description of the post instead, users can have a summary of the comments and upvotes done. On the right side instead the bottom left arrow activates the resteem functionality, and in the top right, we find the downvote (flag) icon.

Right Sidebar
The right sidebar is what I previously presented as social engagement. I found very difficult at the start of my journey in Steemit.com to find the content I was interested in and new people to follow. In the right sidebar, it will be possible to see the trending tags, that ideally change over time (i.e. of the day or the week), and suggested users who can be easily followed with the plus button.

Benefits

As previously said, this is an initial visual treatment that will be changed according to your feedback and collaboration. Having a more clear and organised front-end also means to smooth the onboarding experience for newcomers and allow our steemit community to grow even more.

---

Posted on Utopian.io - Rewarding Open Source Contributors

---