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.
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.
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.
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.
Keeping in the same style design as the checkboxes, the radio buttons were designed to clearly guide user into selecting one option.
Designing patterns as lists helped to better organize the content layout and visual appearance.
An accordion menu component was introduced enabling users to expand and collapse sections of content that would otherwise occupy valuable space within the interface.
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.
The modal component design was updated as a priority, making it more efficient, accessible and user-friendly.
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 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.
The tooltip component redesign provided additional information when user hovered over a special character such as question mark in diagram below.
© SANDEEP HUNDAL 2022.