Research

Since the company already had a system built for DART, our goal was to evaluate the design and colors of the current to determine if what they were using was appropriate for the user going forward or if we should suggest changes. I started researching the colors being used going through accessibility issues and understanding the users work environment and how we could improve the design on color alone to improve the efficiency of the users experience.

I presented the stakeholders with very solid research on why their style guide and more specifically their color palette was a poor choice in terms of legibility, eye strain, and accessibility.The research was from the medical perspective gave us insight on how the eyes work while looking at darker vs lighter screens. The users are mostly working in bright large rooms, which optometrists recommend balancing the screen brightness with the rooms ambient light

Research from MIT showed the effects that staring at the screen with their color choices for multiple hours would result in a lack of efficiency. In fact, MIT showed that light mode led to better user performance than dark mode in all instances.We also tested the accessibility issues by looking at the contrast between elements and the background colors and showed how their current colors/styles were not meeting the accessibility standards.

At this point we showed the wireframes for the invoice system in the current style guide and showed what that would look like updated to the lighter colors with better contrast. This shows how much easier it is to read the table data and have a much better visual hierarchy between elements on the screen.

User Testing

We backed up our research with user testing. The goal of the user testing was to understand if our new style performed well with the users and increased their efficiency in their work. Our methodology included sitting down one-on-one with users and observing them going through tasks in a prototype. All sessions were recorded and later transcribed and analyzed. The stakeholder had never seen user testing before and they found the process really interesting. They saw firsthand how user research can lead to better software design and asked us to look at some of their other systems as well.

Wireframes

The first step in our updating the DART process was tackling the workflow issues by creating wireframes of the user experience before moving onto the visual design. To unveil where improvements were needed, we conducted more Usability Testing. We evaluated our designs by observing the users try to complete tasks; this provided us with the best sense of where improvements were most needed. During testing, users were very excited with multiple users expressing the new system will “Cut time in half!”
At this stage, this is where many UX projects stop. However, in true design thinking we continued iterating with our visual design exploration.

At this point we showed the wireframes for the invoice system in the current style guide and showed what that would look like updated to the lighter colors with better contrast. This shows how much easier it is to read the table data and have a much better visual hierarchy between elements on the screen.

Visual Design

With the visual design exploration we started by creating a mood board to define looks and feel.In the first round we presented 4 very different design styles. Including the versions that were closer to their current branding and the versions that were new to them. This exercise was for us to help the client push their brand to the next level and to help them see a potential in their brand.

Final Design

Here was the final design. After 3 round of design, the client felt that gaming and tech inspired design was the right direction for them. We also made sure that our design is completely responsive, adaptive and also has animations to bring the design to life.