Brad Lebold
Product designer

Modular layouts

AUDITDATA

redesigning the auditdata platform

Overview
Auditdata is a data-driven cloud-based management system for audiology clinics. The goal of the project was to redesign the suite of products into one scalable SaaS platform.
role
Lead UX/UI Designer
Responsibilities
User Experience Design, User Research, Information Architecture, Wireframing, Prototyping, Interactive Specifications, Team Lead
Platform
Desktop, Tablets, Mobile
The Layout
We created a modular layout that could adapt to all the pages required in the system. This greatly increased speed and quality of the development.
Modular Layouts
1. Product navigation
2. Tab component
3. Environment details
4. User actions
5. Header component (optional)
6. Breadcrumb  and Audit log component (optional)
7. Content area
8. Content navigation (optional)

The content areas consist of 3 layouts:
- Dashboard
- Table
- Form

Outcome:
The modularity of these 3 layouts combined with the modularity of it’s sub-components empowers  the capabilities to rebuild 90% of the layouts required.
Multi Tab
Multiple tabs allowed the user to start different flows at the same time so they could be responsive to the dynamic nature of a clinic.
Tints
Creating the system using tints for light and dark theme allowed us easily change colour schemes to communicate organization, brand or environments.

Outcome:
The tint system helped us control all the areas where users controlled the colours, ensuring readability and full flexibility with colours.
Content Navigation
The content navigation panel is an optional component for any page layout as either a tree navigation or filter to the content area.

Outcome:
This optional component gave us the modularity we needed to create  the different page layouts.
The Dashboard
A customizable and responsive layout with modular widgets for creating overviews of content.
Responsive
The dashboard is designed in a 4 column grid that will adapt responsively to the content area.

Outcome:
The dashboard layout adapted across all screen sizes.
Customizable layout
Users are able to add and remove widgets, or drag and drop into any order or size. The layout adapts and always maintains a clean layout.

Outcome:
Each user required different information that was relevant to their role. The flexibility of the dashboard allowed users to customize layouts to their personal preference and needs.
Modular Widgets
Each widget was built to scale 1-4 columns, adjust in height, customizable content and pagination for content overflow.

Outcome:
Each user required different information that was relevant to their role. The flexibility of the widgets allowed users to customize content to their personal preference and needs.
The Form Layout
A flexible layout for inputting both large and small amounts of data that is adaptive to screen size.
Responsive
With the primary view being on large screens and collecting a large amount of data we designed collapsible flex containers to group the content that could both expand and collapse from one to two columns based off screen size.

Outcome:
This flexible layout empowered us to quickly pull together page layouts and display a little or a lot of content in a clear and repeatable way.
The Ultra Table
A responsive table  empowered with data customization, conditional filters and multi column sorting.
Data customization
Data customization gives the ability to choose what data, in what order and the ability to pin important columns to ensure visibility in smaller screens.

Outcome:
This customization gives the ability to repurpose the data based on personas, use case or individual preference. The flexibility gives the opportunity to offer more data points to access.
Conditional Filters
When dealing with mass data we needed the fastest way to drill down to specific content.

Outcome:
Conditional filters that could stack gave the precision needed to reduce the data to most relevant information.
Multi column sorting
Multi column sorting gives more granular control to organize  large amounts of data.

Outcome:
Multi column sorting gives a powerful way to gain insights and better understanding of your data.
Responsive
The tables needed to display across all screen sizes with flexibility.

Outcome:
By dropping off the unpinned columns as minimum widths are reached, we’re able to optimize the display of data based off the size of the content area, while still maintaining control of the required information.

The Side Panel

The side panel is for user specific content that is globally accessible as they navigate flows through out the product.

Outcome:
This kept users aware and on track of upcoming events and tasks while completing other flows in the system.
Workflow Engine
The workflow engine enabled us to apply a customers unique business logic across the application. It guides users through flows triggered by their actions ensuring required tasks are complete.

Outcome:
Reduced training time, less mistakes, ensuring procedures are followed and insights into any incomplete tasks.
Global Audit Log
We needed a complete audit log of all actions that happened in the system and by who.

Outcome:
Utilizing the power of the table filtering we are able to quickly find the needle in the hay stack and give complete visibility of every interaction that goes on in the system.