Platform
  • Angular
  • Dialog Flow
  • AWS
Year

2019

Target Audience
  • Internal Administrators
Deliverables
  • Ideation & Design Thinking
  • UI / UX Design
  • User Testing

Enhancing DESSA with Electron and Iterative Design.

With the launch of the Electron Design System, we were given the directive to enhance DESSA’s visuals.

As any designer knows though, there is always room to improve the experience. So through user feedback and testing, we were able to convince the business to allow us to also apply functional improvements.

The result was a much cleaner, modern and more intuitive experience.

User feedback

Post launch, we heard a number of things from users both good and bad. After several interviews and user testing, three consistent patterns emerged that all users seemed to face. The team determined these three key items would make the most difference in users lives.

Information is buried

78% of users reported that there were too many tabs with too much hidden information. Users reported that "Condensing things into one view would much better."

Data can be overwhelming

While users reported that the information is great, 67% stated that the data can become overwhelming and not all of it made sense.

Some interactions are confusing

45% of users found table interactions to be confusing

Whiteboarding & Collaboration Sessions

To determine new requirements, we met with stakeholders and held design thinking sessions

Putting together a moodboard

To define the project vision, a moodboard was put together. The goal was to have a clean and intuitive app with data visualization that is easy to decipher.

Adjusting the Architecture

We looked at the current app and adjusted the architecture to improve navigation and usability

Applying Electron

We then applied the Electron Design System to modernize DESSA. The result was a simple and clean design with generous amounts of white space.

The Result

Enhanced looks. Enhanced usability.

DESSA 1.0

Functional but flawed.

DESSA 2.0

Clean, modern and more intuitive.

Usability Improvements

Here are a few examples in 2.0...

Applied the Electron Design System to create a cleaner and more visually appealing design.
Condensed tab data into one view so a user can interact with all information without changing views.
Condensed tab data into one view so a user can interact with all information without changing views.
Placed actions directly on the row instead of behind an overflow button.
Increased user speed by converting the ‘Add New’ functionality into a modal.
Enhanced interactions by making it easier for users to discern which element they are modifying.
Used secondary brand colors to reduce visual impact of informational banners.
Condensed tab data into one view so a user can interact with all information without changing views.
Applied visual styling enhancements to this view
Applied visual styling enhancements to view.
Removed ‘Summary’ data as the information was redundant with other screens.
Re-designed selections to be easier to discern what actions a user is taking.

We didn't forget about mobile...

DESSA 2.0 was designed from the get go with responsiveness in mind.

Lessons and Outcomes

Challenges

The challenges we faced as a team were:

  • Implementing the Electron Design System
  • Proving to the business that we should enhance an already easy to use system
  • Getting the approved use of time to test and iterate on the new design

Results

Was it a success and were the goals met?

  • The Electron Design System was implemented seamlessly
  • Testing concluded that users were able to find information more easily and perform tasks 28% faster

“Continuous improvement is better than delayed perfection.”

Mark TwainAmerican writer, humorist, entrepreneur, publisher, and lecturer