Back

Color

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.

Typography

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.

Iconology

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.

Button

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

Checkbox

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.

List

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

Accordion

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

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.

Modal

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

Tabs

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.

Sliders

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

Notification

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.

Tooltip

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

Back

© SANDEEP HUNDAL 2023.