Hubtill Admin Dashboard

Responsibilities

  • UX & UI Design
  • Mocking Up
  • Prototyping
  • HTML, CSS & Javascript
  • Jinja2 templating

Hubtill dashboard was designed to show Hubtill users what services they are subscribed to in an clear and easy way, and how to access them. At the moment, the dashboard is in an early stage of design and development, and the only service available for users is Stocklist app.

Hubtill style has been designed taking into account color blind users. However, the dashboard required special attention given its specific layout. After running different tests for different types of color blind users, we could confirm that there is enough color contrast between the different blocks of content.

The services available are displayed on the sidebar, and each service has a page that links to the app. In the future, the rest of the page will be populated with relevant data extracted from the usage of the application and displayed with charts in a very visual way.

A profile page was designed to show the details of the user and their permissions. And an edit button takes users to a different page in which a form with their details allows them to make changes and updates.

Hubtill provide two modes of registration: organisation (for large stores) and individual (for small shops). The registration as organisation will have a master user that can create sub-users belonging to that organisation. The individual registration will have a single user that can not create sub-users.

Users belonging to the same organisation can see each other on the users page, but not all of them will be able to perform the same actions. Depending on the permissions that the master user gave to them, they will be allowed to create new users, edit users, or delete users.

If users without permissions try to perform any of the actions previously described, an alert system will comunicate them that they do not have such permissions. If the user has permissions to perform an action, the alert system will comunicate that the action has concluded successfully.

Dashboard Individual Service Page
Dashboard individual service page.
Dashboard User Details
Dashboard user details page.
Dashboard Edit User Details
Dashboard edit user details page.
Dashboard Users List
Dashboard list of users page. This screenshot gather three different possible states: user selected to be deleted, error alert flashed when the user does not have permissions, and success alert flashed when a user with permissions has deleted one or multiple users.
Multiple Services Page
Multiple services page.
Colour Blind Tests
Colour blindness tests.
Dashboard Mobile View
Dashboard mobile view.
Dashboard Tablet View
Dashboard tablet view with menu closed.
Dashboard Tablet View
Dashboard tablet view with menu open.
Dashboard Desktop Sketch
Dashboard desktop sketch.
Dashboard Mobile Sketch
Dashboard mobile sketch.