[SteemGigs] UI Improvements Phase 1 & In Page Search

in utopian-io •  9 months ago 

Repository

https://github.com/steemgigs/steemgigs

Introduction

Following the work I completed for @amosbastian surrounding the redesign on FPL Plus, @surpassinggoogle got in touch with me mentioning that he would like to bring Steem Gigs back online and one of his major concerns was the current look and feel. As the Steem Gigs application is currently written in vue.js I thought it would be the perfect opportunity to help him out. Going into this, I knew that overall it wasn't going to be easy to get it perfect the UI the first time around, so had the following goals for this release:

  1. Make quicks wins surrounding the UI and identify problems areas in the code for later pieces of work
  2. Implement a new search feature that instead of appearing in a modal, it appears within its own page.

You will see that with the changes made I didn't want to completely rewrite the whole UI, @surpassinggoogle is interested in quick and steady progress on the site. There are still numerous areas within the application that need improvement and some of the code written to existing areas of the code could be improved, however unlike the projects that I work on by myself, it's a different challenge slowly iterating previously implemented code and something that I plan to work on and improve over the coming weeks.

Pull Request

The work that I carried out on SteemGigs can be found in the following pull request:

https://github.com/steemgigs/steemgigs/pull/49

Note: There are a lot of commits, this is mainly because a lot of this work was iterative with a lot of minor changes. The site is live at the following URL:

https://steemgigs.org/

However, currently there are some issues surrounding the hosting of the API and it currently being hosted on a free development environment so some pages that require the API will not load as expected (The API is returning a 503, due to free dyno usage at Heroku).

New Features/Improvements

Overall the work carried out in this pull request can be broken down into two main areas. These are:

  1. Overall Looks and Feel Improvements & Simplification
  2. In Page Search

Overall Looks and Feel Improvements & Simplification

Overall alot of the changes I made overlap with one another and a lot of the changes are small changes which were made throughout the side, however, the following helps provide more information on some of the pages improved:

1. Home Page

The first thing a user sees when they authenticate via SteemConnect is the home page. With this piece pull request I kept the overall layout of the site very similar, however, you can see that one of the main changes I made was the removal of the side options shown to the left of the page. This was because I believe this takes away from the main purpose of the page and overall confuses the user.

The left-hand side options contained:

  1. Ability to create a custom request
  2. Popular searches
  3. Create a testimonial

I relocated these features into a single option shown in the top right (create button), you can see this in the image below

BeforeAfter
STEEMGIGS_Alpha_and_Desktop.pngSTEEMGIGS_Alpha.png

The main benefit this provides is that a user can now access all of these pages globally at the click of the button, this should overall make the editors easy to access and remove some unneeded confusion from the side.

Overall, although small. The following shows an example of the changes made to the home page:

BeforeAfter
STEEMGIGS_Alpha_and_Desktop.pngSTEEMGIGS_Alpha.png

The main adjustments here can be seen in the overall gig card look and feel.

2. Category Page

Only minor pages were needed on this page once the gig card had been restyled, simply applying consistent headers and additional margin where required.

The following shows an example of the changes made to the category page:

BeforeAfter
STEEMGIGS_Alpha_and_SteemGigs_Before.pngSTEEMGIGS_Alpha.png
3. Gig Page

The post page was previously one of the areas that had the most inconsistent areas of the site, this was because the user could enter custom HTML into the post and it wasn't styled with any guide of consistency.

Within the right you can also see that I made adjustments to the profile card and how the data is displayed, previously the UI differed considerably if had data with your profile or if you didn't. There is now placeholder information when no data can be shown in any of the data shown within the profile card.

The following shows an example of the changes made to the gig page:

BeforeAfter
STEEMGIGS_Alpha 3.pngimage.png

In the next release where I visit the post editors, I will look to make adjustments surrounding how gigs are added to the blockchain, this should improve both how gigs look on the Steem Gigs website and other Steem front ends.

  1. User Profile

Previously when no results could be found in any of the tabs a user would have no indication surrounding as to why the page was blank, in order to tackle this I added placeholder information that would allow a user to easily see when no data is available.

The following shows an example of the changes made to the gig page:

BeforeAfter
STEEMGIGS_Alpha.pngSTEEMGIGS_Alpha.png

In Page Search

Previously the search feature was contained in a modal that appeared over the top of the page, overall the experience felt clunky and didn't follow a similar styling as the other pages. It provided minimal feedback to the user surrounding when searches were taking place and didn't handle when no search results could be provided. An example of how it looked previously can be seen here:

STEEMGIGS_Alpha 2.png

During this piece of work, I adjusted the search so that it would appear in-page rather than within the modal, within the end product looking like so:

STEEMGIGS_Alpha.png

There are three main parts within the search template, these can be broken down into what happens when it's searching when the data has loaded and when there is no data to show. This can be seen here:

carbon (5).png

In order to trigger a search the following method is called:

carbon (7).png

Note: From reading this through I noticed that I would never hide the content placeholders upon error, as I don't set this.isSearching = false upon error. I will resolve this in the next pull request.

In order to trigger the search, I created the following method within nav.vue

carbon (8).png

This method is called when a user submits the search input field shown within the navigation bar. Upon the initSearch() method being called it will first commit the searchTerm to the store using a mutation and then push the user to the search page. Upon mounting of the page it will then carry out the search. In order to allow a user to carry out multiple searches, I also monitor the search using a watch as seen here:

carbon (9).png

This allows the search function to be triggered multiples times even when the page is already mounted.

Currently, the data returned from the search API method has some limitations in terms of the data it provides, this is why currently all searches will use the default card image. In the future, I will adjust this to pull the data from the blockchain once the search from Steem Gigs has been returned. This will be completed server side rather than client side.

What's next?

As mentioned previously, one of the my goals was to find the problem areas of the code, in doing so, one of the main areas that need improvement is the editor pages on SteemGigs, currently they're written in a way which makes them hard to style consistently and overall issues with the method of validation causes confusion in the end user experience.

I still also believe that I need to revisit a number of areas in the UI and continue to remove materialize.css from the design as overall it doesn't allow for a quick and itterative development.

I will also be helping @surpassinggoogle with task requests in the coming weeks.

Contributing

Although this isn't my project, I know @surpassinggoogle wouldn't mind my saying this, if your interested in helping out Steem Gigs, getting stuck in both with the front end (Vue.js) or the API (Node.js) I know he'd be more than happy to have you onboard. Simply contact him on Discord to find out more :)

GitHub Account

A link to my GitHub account can be found here:

https://github.com/tobias-g1

Authors get paid when people like you upvote their post.
If you enjoyed what you read here, create your account today and start earning FREE STEEM!
Sort Order:  
  • Great post, lots of visuals before and after, show of code and methods.
  • Many little commits with great separation of concerns.
  • Thank you for this: Remove Dist... I was going to mention it.

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]

Thank you for your review, @helo! Keep up the good work!

Hi @tobias-g!

Your post was upvoted by @steem-ua, new Steem dApp, using UserAuthority for algorithmic post curation!
Your post is eligible for our upvote, thanks to our collaboration with @utopian-io!
Feel free to join our @steem-ua Discord server

Congratulations! Your post has been selected as a daily Steemit truffle! It is listed on rank 3 of all contributions awarded today. You can find the TOP DAILY TRUFFLE PICKS HERE.

I upvoted your contribution because to my mind your post is at least 8 SBD worth and should receive 153 votes. It's now up to the lovely Steemit community to make this come true.

I am TrufflePig, an Artificial Intelligence Bot that helps minnows and content curators using Machine Learning. If you are curious how I select content, you can find an explanation here!

Have a nice day and sincerely yours,
trufflepig
TrufflePig

Hey, @tobias-g!

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

Get higher incentives and support Utopian.io!
Simply set @utopian.pay as a 5% (or higher) payout beneficiary on your contribution post (via SteemPlus or Steeditor).

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

Vote for Utopian Witness!

Congratulations @tobias-g! You have completed the following achievement on the Steem blockchain and have been rewarded with new badge(s) :

You published more than 300 posts. Your next target is to reach 350 posts.
You received more than 7000 upvotes. Your next target is to reach 8000 upvotes.

Click here to view your Board
If you no longer want to receive notifications, reply to this comment with the word STOP

To support your work, I also upvoted your post!

Support SteemitBoard's project! Vote for its witness and get one more award!

Hi, @tobias-g!

You just got a 1.58% upvote from SteemPlus!
To get higher upvotes, earn more SteemPlus Points (SPP). On your Steemit wallet, check your SPP balance and click on "How to earn SPP?" to find out all the ways to earn.
If you're not using SteemPlus yet, please check our last posts in here to see the many ways in which SteemPlus can improve your Steem experience on Steemit and Busy.