Beta UI Development Update | Content Discovery Reimagined, Themes, HiveOnboarding

in LeoFinancelast month

LeoFinance Beta UI Development Update  Content Discovery Reimagined, Themes, HiveOnboarding .png

The LEO team has been busy the past few weeks. Not only have we been preparing everything for the wLEO launch - including 3 new websites/landing pages - but we’ve also been testing various things over on Ethereum and connecting with different communities as well. The wLEO launch is going to a spectacular show of our ability to connect with communities outside of Hive and onboard new users.

The preparations for wLEO are just one of the things we’ve been building. For the past ~2 months, we’ve been designing and building our own interface from the ground up. 12 days ago, we launched it into public Beta and are continually rolling out changes on a daily basis.

The updates, upgrades and new features that we’re bringing to our glorious new interface are incredibly fun to design and dream up and even more fun to play with after they’ve been implemented. Many features are being added by community recommendations and feedback along with a core set of features that are being added according to a longer-term roadmap.

This past week, we’ve added a whole host of changes, updates and upgrades. In this post, I’ll review many of the updates that have been made thus far and then talk about some of the upcoming implementations which will be rolled out in the next 7 days.

  • Homepage: Reimagining Content Discovery
  • Dark Mode Toggle
  • Light, Dim or Lights Out?
  • Sticky Footer
  • Vote Details
  • LeoApps Menu
  • Wallet Page
  • HiveOnboard Integration
  • New Sign In Window
  • Get Help!
  • In the Pipeline

Homepage: Reimagining Content Discovery

image.png

  • Curated Content
  • Topics Slider
  • Popular
  • Latest

On our new homepage, we've taken a different approach than what's been done on Hive before. The first section exclusively displays manually curated content. The current implementation of this displays the top 5 pieces of content ranked by an algorithm which calculates the vote weight % of a curator and the time when they curated that piece of content.

In a future update, we're adding an extended list of curated content which will be accessible with a button that says "See More Curated Content". This section will lead to a redesigned page that shows filterable content going back further than just the current payout window. Giving more attention to evergreen content that was created and curated for quality in the past.

Above the curated content section, you'll our redesigned "Topics Slider". The Topics Slider shows some of the most popular tags on the LeoFinance platform. Users can click on a tag that they're interested in to go to the Trending page for that specific content category.

image.png

Below the curated section, you'll see two familiar feed styles: Popular and Latest.

The Popular feed is the infamous "Trending" page for LeoFinance content. This feed is ranked by the amount of LEO a post is earning - the more LEO a post earns, the higher it ranks. You'll also notice a promoted post at the top of the feed: users can promote posts by burning LEO (sending it to @null with the link to their post in the memo field).

To the right of that is the Latest (a.k.a. Created) feed. This shows the 5 most recent posts that were published to LeoFinance. Below this section, you'll see a "See More New Posts" which will take you to the full Created page.

Dark Mode Toggle

image.png

This one is custom made for @rollandthomas. When I asked for his input on the dark mode, he said that he couldn't find the switch to turn it on. So I looked around on some of my favorite UI designs and we came up with this light/dark toggle next to the LeoFinance logo.

This toggle will instantly switch your display between the Light and Lights Out themes.

Light, Dim or Lights Out?

We've added 3 themes to the LeoFinance Beta UI! You can toggle between the 3 in your settings page or toggle between lightest and darkest using the button next to our logo.

Light:

image.png

Dim:

image.png

Lights Out:

image.png

We have a lot of plans for this new ability to add themes to our UI. In the future, you can expect a lot of interesting implementations and customizations that ship standard to all users. We're also going to release certain theme packs that are unlocked based on LEO Power, community status, achievements, etc.

Themes might seem like a vanity feature on the surface, but close your eyes and imagine a day when the theme customization you have selected shows off not only an interface tailored to your liking, but also one that reflects your status in the LeoFinance community as a stakeholder, author and curator.

Sticky Footer

image.png

This is a small detail, but is one of the many features that makes my life as a curator a whole lot easier. When you're reading a post, the metadata (vote button, comment, reblog, payout, etc.) will all be shown in a sticky footer.

Vote Details:

image.png

If you hover over the # of upvotes a post has received, you'll see the top 10 users (ranked by LEO) who've upvoted this post already. When you click on this number, it will show a detailed display of prior votes. Showing you every user who voted on the post including the value of their vote (in LEO), the vote weight % they used and the time after publication that they casted their vote.

You can also hover over the pie chart to see who's vote contributed the largest chunk of LEO to the total payout value.

LeoApps Menu

image.png

Quick access navigation to the LeoApps suite: LeoDex, Hivestats and LeoPedia. Soon, the wLEO interface will be added to the list!

Wallet Page

image.png

Since our last UI update post, we've made a lot of changes to the wallet page. One of the main things you'll notice is the addition of a LEO Wallet tab on the left side. This wallet is the default display and will show:

  • Liquid LEO token balance
  • LEO Power (LP) balance
  • Ongoing Power Down (if one is in progress)
  • Estimated Account Value (LEO + LP * current LEO price)

Along with these displays are the buttons to interact with LEO. From this wallet you can:

  • Send LEO
  • View the Trade Page On LeoDex
  • Power Up (Stake) LEO
  • Delegate to Another User
  • Undelegate
  • Power Down
  • Cancel Powerdown

On the right side of the wallet, you'll see real-time price displays for HIVE, HBD and LEO - which we've discussed in a prior update.

image.png

Below the wallet itself you can see your LEO Transaction history. This will show any curation, author & mining reward payouts along with inbound/outbound transfers of LEO.

We also made some improvements to the Hive-Engine wallet, which I won't detail in this post. You can now see historical transactions, rewards, etc. for all Hive-Engine tokens along with a few other key features.

HiveOnboard Integration

This is an integration that we rolled out with high priority as the wLEO launch date approached. Even though we pushed back the launch of wLEO because of ETH network congestion, we still have the onboarding feature implemented for when new users come to the site and try to sign up.

When a new user comes to the site, they'll see two options:

  • Sign In
  • Sign Up

The Sign Up button opens a popup window that is integrated with the HiveOnboard service. From there, the user simply enters the username of the Hive account they want to create, then they verify that they aren't a robot and then save their keys.

image.png

After that, the UI automatically re-prompts them to login with the Username they just created. I did a video demo of this signup process, which you can view over on Twitter.

This is still an early implementation of the onboard process - we have some updates to this process being rolled out in the next 1-2 days. Again, we built this feature as fast as possible so that it would be ready for the wLEO launch but now we have some more time to polish it and add the additional displays/integrations that we designed.

We also have some other big news in terms of onboarding/Hive account signups. We'll talk about that in a post next week.

New Sign In Window

image.png

We also revamped the Sign In process by adding the options for Hivesigner and Hive Keychain. If the user has Hive Keychain, it will prompt them to enter their username and hit enter or choose Hivesigner if that's their preference.

If the user doesn't have Hive Keychain installed, they'll see the above dialogue which says to login using Hivesigner or install Hive Keychain from their respective browser webstore.

Next week, you'll see why this Sign In update is so important ;)

Get Help!

image.png

You may have noticed the 3 icons in the bottom right. On desktop, there are 3 buttons here which link out to the LeoFinance Twitter Page, the LeoFinance Telegram and our Discord Server.

Get Help! (On Mobile)

image.png

On mobile, the Discord server button is shown in the bottom right corner. Similar to a help button, this will help new and existing users quickly navigate to our Discord server to ask specific questions, receive tech support, request new features, etc.


This post is running quite a lot longer than I expected. As you can see, we've added a lot of new features to the site with many more on the way. Expect another development update post in a few days 🦁

In the Pipeline

We're actively adding new features to the Beta UI each day. Anyone who has been testing/using the Beta interface has seen that each day you visit it, there is something new. Whether it's a small but useful feature like the Dark/Light mode toggle by the logo, bug fixes or something major like the new homepage.

What's even more exciting is the release that we have in the works right now. We're updating the mobile version of the site and adding a mind-blowing new integration that has not yet been done on any Hive-based content interface.

Pushing back the wLEO launch due to the ETH network fee issues is a blessing in disguise for a few different reasons. We've turned a negative into a positive, especially with this upcoming feature.

Hint: it will onboard a lot of new users from DeFi/Ethereum into Hive accounts. All through the new LEO UI.

 
steemleo black token divider.png
 

Join Our Hive Community & Earn LEO Rewards!

Earn LEO + HIVE rewards by creating crypto/finance-related content in our PeakD community or directly from our hive-based interface at leofinance.io or LeoFinance Beta

Track Hive DataNew Interface!About Us
HivestatsLeoFinance BetaLearn More
Trade Hive TokensLearn & ContributeHive Witness
LeoDexLeoPediaVote

Follow @leofinance for official updates

Posted Using LeoFinance Beta

Sort:  

Can we allow 15 tags in new interface as allowed by earlier interface.

Posted Using LeoFinance Beta

Dark move is pretty useful and it is my theme that I use once I spotted the button for it. Beside this, a lot of nice touches and changes, just proving that LEO FINANCE is on the right path and bring more than any other HIVE Interfaces.

Posted Using LeoFinance Beta

Lots of awesome features! What I really like the most about this is that it's your own built-from-the-ground-up interface, not just some tweaks on top of existing code. Such a major part of creating a unique identity is to have a differentiated visual that tells the world they are looking at something other than "looks just a version of _______."

In future versions, I'd love to see a "drafts" feature because writing a complex financial paper/article/post often is done in several sessions. Well... speaking for myself, it tends to be done in several sessions!

=^..^=

Posted Using LeoFinance Beta

The built from the ground up approach not only looks different but can provide many different features which, from my understanding, are going to come out in the second version.

Condensor is rather limited in what it allows the UI to do. This removes most options. In another couple months, Leofinance will not resemble any of the other interfaces on Hive.

Posted Using LeoFinance Beta

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

You got more than 100 replies. Your next target is to reach 200 replies.
You received more than 1500 upvotes. Your next target is to reach 1750 upvotes.

You can view your badges on your board and compare yourself to others in the Ranking
If you no longer want to receive notifications, reply to this comment with the word STOP

Dim mode is a new favourite for me. Keep up the good work.

Posted Using LeoFinance Beta

Simply amazing!!!

Posted Using LeoFinance Beta

This is all still in V.1 of the UI?

When you mention the new feature at the end of the post, is this going to be part of V.2 (is it coming out soon) or is all this planned on the V.1 UI?

Posted Using LeoFinance Beta

Simply amazing.

Posted Using LeoFinance Beta

LEO is making the right moves that might bring Hive to the masses.

Posted Using LeoFinance Beta

It is hard to overstate the value I place on seeing this new UI taking form @leofinance! As I have written elsewhere, my initial experiences with the original UI "shut me down cold," when it came to past decisions about whether or not to invest my time any further into LeoFinance. Just wasn't worth it ... Already, not even being fully and officially released yet, it is a vast improvement! 🦁👍

Not only looking forward to the next updates, but being a long-term oriented investor, I am really excited to see what the LeoFinance team is going to accomplish between now and the end of the year! Since making a big decision re: my investment in LEO on July 24th, then seeing the 2020 Roadmap the next day, I have been very impressed by the "delivery" on the "promise."

Setting the bar high. Love it. Keep it coming. From strength to strength! 🙂 🙌


P.S. Yes! Yes, I did find that shortcut to the Emojis!! 😎

Posted Using LeoFinance Beta

Amazing work!

Posted Using LeoFinance Beta

I would love a 100% black theme. But the lights out is pretty good already.

Posted Using LeoFinance Beta

Awesome update, like the topic slider and lights out mode :)

Posted Using LeoFinance Beta

Heading font size on Trending tab seems a bit too small compared to Latest tab.

Posted Using LeoFinance Beta

That Hive Onboard integration is great.

The whole thing that attracted me to LeoFinance in the first place was an early podcast where you talked about this community's ability to onboard new users.

Great to see this coming to fruition.

Posted Using LeoFinance

Exelente trabajo lo que esplayaste , esta todo bien explicito, gracias por compartir.

im looking forward the live version i m assume its gonna be better then peakd

Maybe I should buy more tokens.

Kudos @leofinance and LEO team!

I'm very impressed with what you have accomplished. I have been watching Leo Finance for a while, though so far I've done it quietly because the realm of finance and crypto is a whole new world to me, so I wouldn't dare to say anything on the matter yet hehe. This is my first post.

I can definitely say something about the new features that would allow users to navigate more efficiently on the platform. I believe these changes are going to set a high standard of what can be done on Hive.

Reimagining Content Discovery

The ability to display manually curated content, as well as to easily search and filter "evergreen content" would allow users to find and read content based on more realistic assessments

Voting Details

I think that including the time in the vote details will contribute to improving the voting behavior. And the visual effect of the pie chart would give authors a tool to assess their audience; study the vote behavior and compare it against what they are creating. This gives us the opportunity to reevaluate our content or topics.

Fortuitously, I posted an article on content rewards on Hive. Mainly, I reflected on the dichotomy of Entitlement vs feeling entitled
I basically argued that there's a difference between being entitled to create any kind of content and feeling entitled to receive rewards as per the worthiness of a post.

I wish I could have referred to this post as an example of a solution to evaluate not only our audience but ourselves in terms of understating how we are being voted, and ultimately draw conclusions that would allow us to make the necessary changes, if that's the case.

I think it would be a great idea for others to emulate this model.

Thank you for all your hard work. It's achievements like this plus all Dapps, research work for evergreen content, and spaces for growth provided by Leo, that can take our Hive community to the next level and beyond.

PD: I've always like dark

Posted Using LeoFinance

I am glad that many cool updates are coming so frequently. Keep it up.

Amazing greatness around the Leofinance new UI. This is a product of hardwork and excellence. Cheers.

Posted Using LeoFinance

Awesome work I must say!
Used the beta interface to post and I'm impressed with the UI! It's really a huge improvement :)


One small suggestion: For the lights out version, can we have a complete full jet black UI?
Maybe something like this (or even darker if its possible lol):
image.png

Posted Using LeoFinance Beta

 last month Reveal Comment
 last month Reveal Comment
 last month Reveal Comment