Platform
  • Angular
  • Dialog Flow
  • AWS
Year

2019

Target Audience
  • Internal Administrators
Deliverables
  • Ideation & Design Thinking
  • User & Product Research
  • UI / UX Design
  • User Testing
  • Project Management

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

There were too many tabs with too much hidden information. Users reported that "Condensing things into one view would much better."

The information that is present, can be overwhelming

While users reported that the information is great, it can get overwhelming and not all of it made sense.

Some interactions are confusing

This was very specific to the table interactions and there are A LOT of tables.

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.
Designed a slide out window for users to quickly view item details and make edits.
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.

Enhanced looks. Enhanced usability.

With a stark contrast between the first iteration and the second, the team was proud of what we had accomplished.

DESSA 1.0

Functional but flawed.

DESSA 2.0

Clean, modern and more intuitive.

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

Results were pretty spectacular. The feedback we received was

  • Reduced time to find the information needed
  • Quicker database updates via the enhanced actions
  • All users were much more responsive to the new visual look

“Continuous improvement is better than delayed perfection.”

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