A Quick Design Update of the Dashboard

Fahim Karim -

I recently read RefactoringUI and decided to put some of the design principles into practice on the KudosBot dashboard. As we get closer to exiting beta, both the dashboard and landing pages are in need of some design polish, so I decided to take a first pass and share the results.

Login Page

The login page is pretty simple and only needs a button to sign in with Slack at the moment. Instead of trying to use the full page, I isolated the important content to a card centered in the page and added some more context.

Login page before(left) and after(right)

Dashboard

The dashboard felt a bit scattered and I used one of the components for layouts that was included with the book. Here are the changes I made at a high level:

  • Updated edges of the page so nav bar and content are centered with the same left/right margins.
  • Changed the background color to off white so the main content would stand out more.
  • Redesigned the side nav using recommendations from the book to make the text stand out more (relative to the icons) and include brand color in the selected state.
Dashboard before (left) and after (right)

Values

The values page needed some more polish and it felt like the cards/buttons were stretched unnecessarily to take up the full width of the page

Values before (left) and after (right)

Upgrade

There's a lot of information to present on the upgrade page. In addition to the different rates for monthly/yearly billing, while KudosBot is in Beta, we're offering a 50% lifetime discount on all plans.

The layout felt very cramped, so I decided to try changing that as well. Given that the price calculation is pretty simple, I got rid of the table to show the breakdown and instead display the total values inline. I also moved the list of pro features into two columns, but I may end up moving them out into a separate column entirely as Steve did in this video.

Upgrade page before (left) and after (right)

Overall, I'm much happier with the new design, it definitely feels more polished and easier to use. Next up will be re-building the home/landing pages for teams that haven't installed KudosBot to provide them with helpful info on how to get started.