It was apparent from research that users felt the application design appeared dull. As a result, a more vibrant color palette was created to express more emotion in the design.



In order to address an area of concern on the current site, a visually appealing typography standard was created, organizing the content by hierarchy.


Grids & Breakpoints

With the current site lacking responsiveness, it was important to create a responsive application to experience on any screen whether a laptop, desktop, or tablet. The illustrations below show breakpoints and grid structure for appointed standard screen sizes.

grids breakpoints


The use of standard and practical icons was introduced to visually communicate a representation of an object, action, or idea. The icons were made informative so that the user understood the options of actions to take.

eConsult icons


To enhance user flow and provide clarity on actions for the user to take, more prominent new button standards were developed.



The checkbox pattern redesigned provided a clear understanding of selections that could be made.


Radio Button

Keeping in the same style design as the checkboxes, the radio buttons were designed to clearly guide user into selecting one option.

Radio buttons


Designing patterns as lists helped to better organize the content layout and visual appearance.

Lists Default
Lists Checkbox


An accordion menu component was introduced enabling users to expand and collapse sections of content that would otherwise occupy valuable space within the interface.

eConsult accordin

Dropdowns & Typeheads

One feature of the existing application users complained about was the drop-down input field boxes. Users found selections to be too long and difficult to navigate down. The preference was a quicker way to access the selectable content within the drop down.

The type-ahead dropdown menu was introduced, allowing the application to dynamically filter the list to show only options that matched the typed characters. This solution gave the user a smaller set of options to choose from and avoided the need for scrolling a long drop-down menu.

eConsult drop down typehead


The modal component design was updated as a priority, making it more efficient, accessible and user-friendly.

eConsult styleguide modal 1
eConsult styleguide modal 2


Introducing a pagination component helped split up the list pattern into organized pages, enabling the user to view and find content more efficiently instead of having to fish through large chunks of data while using the scrollbar.


Pagination is used for splitting up content or data into several pages, with a control for navigating to the next or previous page.



Tabs were introduced to separate content into different views in order for users to be able to easily and quickly access additional related content without having to navigate to a new page.


Loading Spinner

Loading spinner was redesigned to provide the users instant feedback during the systems process of completing a task.



A slider component allowed content to be adjustable to the user's selection with an option to increase or decrease a value.



The current application lacked consistency with notifications and alerts, often confusing user and lacking best UX practices. Several patterns were designed for specific alerts and notifications to make it clear to the user what action was needed.

eConsult notifications
modal success
modal attention
modal error
modal alert


The tooltip component redesign provided additional information when user hovered over a special character such as question mark in diagram below.

eConsult tooltip default
eConsult tooltip view image