menu toggle
menu toggle close

I Re-designed a digital product dashboard UI

To Help users find and feel confident in configuring app settings.

I did this for Chatlio in 2019


Overview

Chatlio is a Slack-based chat widget that allows operators in Slack to talk to visitors on their site via a simple embeddable chat widget. (Like the one on this site!)

With an upcoming release of a new product and a recent update to the customer-facing site, they were wanting to improve the usability and look and feel of the existing app dashboard to maintain consistency and ensure future scalability.

Problem definition

I was engaged to perform UX analysis of the existing app configuration interface and propose an updated UI design, with the aim to improve overall usability and scalability.

Success would be defined by:

wrap problem Existing interface - Tabs overflowed existing interface Existing interface - page layout

Problem definition cont...

The product was nearing 3 years old, and the app configuration settings dashboard looked dated. As features had been added over time, the existing tabbed UI had begun to wrap, and complex configuration settings were included on long forms with no clear grouping, navigation or easy saving actions.


Constraints


Audience

New and existing Chatlio users, including the Chatlio Team.


Team / Role

Design process

1. Perform heuristic analysis of the existing interface

2. Process user feedback/reviews from recent testing

3. Present findings from the analysis

4. Create lo-fidelity wireframes with proposed improvements (2x options)

5. Create mid-fidelity prototype with preferred layout

6. Test prototype (inVision) with existing dashboard users (customer success team)

7. Implement feedback and produce Hi-fidelity design for handoff

8. Work with engineering to implement and test

Top navigation Wireframe navigation option 1 - Top navigation
Left hand navigation Wireframe navigation option 2 - Tabs
UI option 1 Mid-fidelity UI option 1
UI option 1 Mid-fidelity UI option 2 (Prototype)
Updated UI Scrolled

Final design - Improvements & Changes

Improvements were made to typography hierarchy and colour to show active states and differentiate between setting names and help text.

Updated tabbed navigation to accommodate horizontal overflow scroll behaviour.

Updated and added contextual help text for complex settings.

Introduced pannel style layout for clear grouping of related settings to improve page scan-ability.

Introduce secondary context navigation (Right-hand side) to improve navigation between settings on long pages.

Introduced in context saving, so users would remember to save changes and get feedback immediately.

UI option 1 Final design

Retrospective

An alternate top navigation was proposed to eliminate potential for overflowing tabs and to match the navigation on the documentation and public facing site.
Ultimately We opted to stick with the primary left navigation due to the potential for the new pattern to confuse existing users and the tight time frame didnt allow for additional testing.

It would have been nice to be able to include the search function, however this was cut from final implementation due to time restraints and additional development work required.

Overall the project went smoothly within the time frame and with the available resources. Feedback from users has been positive.