Canvas

Create dashboards

Luke Zapart
CEO

"Adis acted as a true founding designer on our team. He needs very little direction, and I have honestly never met anyone this proactive, productive, and pragmatic at the same time. He has a real knack for UX design, and seeing user problems before they occur.

He's basically the startup CEO's dream. He redesigned the v2 of our app from the ground up, knowing exactly what to redo, as if he was an expert in our domain (data analytics). We received raving reviews of the redesign from both existing and new users, and I believe it was instrumental in us getting #1 on Product Hunt."

• Made header and sidebar white, so it's overall more light and minimalist.
• Subheader removed so there is more space for dashboard, and so that the editor options are grouped with elements with the same purpose: text formatting next to selected text, buttons to create tables in sidebar next to list of charts which can be added to dashboard.
• In sidebar, included tabs and headline to make it clear those are all the charts and tables which can be added to dashboard.
• Tried another font which is less round and less playful.

• Applied Notion-like structure, as CEO of Canvas suggested, to make it faster and easier for user to find and open any dashboard in workspace.
• Set dashboard background to white, so it looks even lighter and simpler because of less color changes in layout and color scheme, and focus is more on content — much needed in a content heavy UI.
• At tables and charts in dashboard, removed grey background behind first column and row, separated header with a divider line, included Edit icon to make it clear user can click on a table to customize it, and removed vertical lines from table content, because alignment makes it possible to see where columns are, and if something doesn't fit into a column, it can be ended with three dots.
• All options about what can be added moved to “+” button, so user knows where to go to see what can be added to dashboard.
• Instead of showing user avatars in header, which can make header cluttered when there is more than 2 users, I suggest just showing a number of users, and when user hovers, then in dropdown to explain exactly what the list is about and show more info about who's viewing dashboard, so even if there is 10 people, it will not be a problem.

• In sidebar, included all workspace related tabs, and combined data sources and integrations into 'Connected apps' section.
• Applied font Proxima Nova instead of Inter, and increased font size by 1px.
• Applied font Proxima Nova instead of Inter, and increased font size by 1px.
• Applied Hero iconset to canvas header and chart header.
• At canvas header, removed icon on left side of header to show/hide sidebar. Problems are that it could be confused with icon to go back to previous page, there was no replacement icon in Hero iconset, and it's not conventional to show 2 icons before canvas title. Instead, added a fullscreen icon to right side of header, which would just show/hide sidebar, and in full-screen mode, header can disappear automatically every few seconds until user moves a cursor.

• List of connected apps may not be visible if there are a lot of categories and dashboards shown in sidebar, so I suggested just having one tab to see everything related to connected apps and suggestions to connect more apps.
• Tab to see list of members in workspace shown in sidebar instead of workspace settings, to make member invitation feature more discoverable to new users and make it faster to manage members in workspace, which may happen more frequently than other workspace settings.
• All workspace related tabs which are unnecessary to show in sidebar moved to ··· icon next to workspace name.
• Removed label Share and moved + button to right side, which will give more balance to UI visual/color composition and will draw user's attention also to share button, which will make text label unnecessary and save horizontal space.
• In list of dashboards in sidebar, included 2 lines of text clarifying what are shared dashboards compared to private dashboards, and included All tab to see all categories, so user can have infinite categories and dashboards, and show only some in sidebar.
• Removed hamburger icon next to dashboard name, because user could think it means hiding sidebar instead of seeing more options about dashboard, and included ··· to right side of header which includes more options about dashboard as well as an option to hide sidebar.