Reach Hub UI

2D design work for Virtalis, a UK-based company (England, Manchester).

When I started my role at Virtalis, I asked them to show me their products and platforms as little as possible.

The reason is simple: as a designer, you have the luxury of seeing a product with the eyes of a 1st-time user for a couple of times only. Then you start getting familiar with it, and, almost unconsciously, you learn how to circumvent and deal with all the UX issues affecting the product.

So this is how I approached the task of working on the Reach Hub UI, which included:

  • Running UI/UX audits to highlight UI inconsistencies and usability issues
  • Writing detailed reports to provide 1st-time user feedback and design recommendations
  • Restyling already existing assets, UI elements and layouts
  • Creating in-browser prototypes to provide design instructions

Before vs After

Due to higher priorities on the roadmap, we decided to go for a 2-phase UX strategy as this approach would allow us to maximise the resources for other projects and achieve a significant improvement in the short term.

So phase one would consist in:

  • Implementing all the design recommendations from my UI/UX audit to resolve several UX issues while preserving the current UI structure as much as possible
  • Restyling the UI elements to improve the look-and-feel and the perceived value of the product

Then, phase two would start with a series of UX studies such as user interviews, usability testing sessions and card sorting, and finish with a complete restructuring of the platform and its information architecture, user flows, UI layout and look-and-feel.

The following sections show the work I did for phase one, comparing the before and after of the Reach Hub UI:

    Projects Page

    PROJECTS page before

    PROJECTS page after

    Library Page

    LIBRARY page before

    LIBRARY page after

    Job Status Page

    JOB STATUS page before

    JOB STATUS page after

    Create Project Page and Steps

    CREATE PROJECT step 1 before

    CREATE PROJECT step 1 after

    CREATE PROJECT step 2 before

    CREATE PROJECT step 2 after

    CREATE PROJECT step 3 before

    CREATE PROJECT step 3 after

    CREATE PROJECT step 4 before

    CREATE PROJECT step 4 after

    Project Settings Page and Tabs

    PROJECT SETTINGS - General tab before

    PROJECT SETTINGS - General tab after

    PROJECT SETTINGS - Visualisation tab before

    PROJECT SETTINGS - Visualisation tab after

    PROJECT SETTINGS - Access tab before

    PROJECT SETTINGS - Permissions (renamed) tab after

    PROJECT SETTINGS - Publications tab before

    PROJECT SETTINGS - Publication (renamed) tab after

    The Making Of

    In-Browser Prototyping

    For this task, I recreated the Reach Hub UI structure directly in Webflow, implementing the design recommendations from my UI/UX audit and working on the new look-and-feel of the UI.

    This approach allowed me to review and validate the design directly in the browser, giving a clear idea of its final rendering and responsiveness on different devices. Moreover, once exported, the CSS code would provide a valuable and easily readable reference for the front-end developers.

    The images below show the restyled Reach Hub UI and its responsive design at different breakpoints.

    Desktop devices

    Tablet devices

    Smartphone devices

    Related Works

    Check out more works for Virtalis:

    Contact Info

    Scotland, UK
    +44 7802 321045

    Get in Touch