Design and UX May 24, 2020

How would you improve our UI?

Esteban Saa @steban

Hello everyone, we are trying to improve the looks of our UI and will appreciate any ideas to do so:

https://i.ibb.co/LnBQwwx/image.png

https://www.simpletasking.com is a multi-project management platform. It lets users keep up and quickly switch among projects. Our focus is simplicity!

Thank you!

  1. 2

    Not a radical change but I create a refined version for practicing.
    Before

    After
    Simpletasking Redesign

    Changes:

    • Create an explicit "New Project" button
    • On the listing put the project icon at the top
    • The projectid and date at the bottom as they are tertiary info
    • On the tabs use underline to better show what tab is selected.
    • Highlight selected project with the site green color.
    • Add the selected project in huge letters to give a bi more of context.
    • The thread can be all in white, there's no need to add boxes as the conversations already separate different content.

    Didn't fully finished the thread details ( controls, attachments etc.) but I think this displays the spirit of the suggestions

  2. 2

    You may enjoy a book like https://refactoringui.com/. Lots of good tips for improving in there.

    Off-hand, some things to pay attention to:

    • Consider adding more contrast using different colors or alternating ligther/darker shades of the colors you have. Right now the UI is heavily monochromatic which means it's hard for the users eye to "land" on the right parts of the page.
    • Consider improving your typographic hierarchy. This is the process of using larger font sizes for more important things and smaller font sizes for less important things.
    • Take some time to pull in some complex test data (really long names for users, titles for posts, and dates) and work on the line-wrapping and overflow. Some of your text is squished up which can be solved using CSS like white-space: nowrap and conventions like text-overflow: ellipsis (which it looks like you're doing in some spots).

    Hope that helps :)

    1. 1

      Hello Ryan, I just wanted to say thank you for all the amazing feedback. We are doing our best to put all your advice to work. Here is how it looks now:

      https://i.ibb.co/wyQPk76/image.png
      https://i.ibb.co/L1DmMHf/image.png

      1. 1

        This is awesome! Definitely an improvement. Much easier to understand where you're at and what is important in the UI.

  3. 1

    I am way more developer than designer, but I made a few tweaks to your home page. I agree with the other users in that you need better font selection, but I will leave that for someone more skilled in typography.

    This was a quick hack just to improve the presentation and I also tweaked your copy a little. I went with a basic blue CTA button but you could change that to whatever your button or secondary color is. I would not use the same color from your logo though.

    You can see my suggestions here ..
    https://i.imgur.com/TXbVRRX.png

    1. 1

      Thank you! We been focusing on the control panel for now but the front-page is next. This is how things look now:
      https://i.ibb.co/wyQPk76/image.png
      https://i.ibb.co/L1DmMHf/image.png

  4. 1

    Hey, here are some tips that might help -

    1. I feel font sizes across the site aren't standardised. The font sizes in the top navigation bar are far larger than everything else on the screen. I would recommend creating an internal standard for which font size to use where. Your nav bar deserves far less attention than it is currently getting.

    2. I think there are enormous gains to made simply by changing the font :) Suddenly, the site will look more "designed".

    3. Do a spacing exercise - keep moving all your UI components away from each other until they look really off. Then move all the components closer until you find spacing that looks perfect. I feel all of the UI components need breathing room - paddings as well as margins.

    Hope this helps!

    1. 1

      Thank you Saumitra, I'm really struggling to get the fonts right, we did some improvements, this is how things look now:

      https://i.ibb.co/wyQPk76/image.png
      https://i.ibb.co/L1DmMHf/image.png

      1. 1

        Hey Steban, I was just looking at the suggestion made to you on the other thread by @muchkler and it looks great! Any chance you can replicate that?

        1. 1

          Yes, working on it. Trying to have only 3 size of fonts. Also this article is extremely helpful: https://leerob.io/blog/how-stripe-designs-beautiful-websites

          I think we may currently have the wrong font.

    2. 1

      That is extremely helpful, thank you so much. I will try to make those changes and post back an update.

  5. 1

    I think the ‘create a free account’ should be changed to a button. Maybe, rather than use just one image, use several like the free https://uselander.xyz template shows.

    1. 1

      We haven't done much work on the front-page yet, right now just focusing on the main panel:

      https://i.ibb.co/LnBQwwx/image.png

      Once we complete it we will take care of the front-page and improve it!

  6. 1

    I’d suggest use fewer colors! Looks like there are a lot of different greys in backgrounds, fonts, borders and icons. Also the fonts are different sizes and colors, but could also benefit from simplicity and consistency.

    1. 1

      Hi Nicholas, thank you again for your help. Here is how things look now: https://i.ibb.co/wyQPk76/image.png
      https://i.ibb.co/L1DmMHf/image.png

    2. 1

      Now that you mention it, think you are right. I see I can remove at least 3 colors. I Will post back with the update. Thank you!

  7. 1

    We switched the project icon to the right for a small improvement:

    https://i.ibb.co/mJ8Q2r7/image.png