DIA2 - Dashboard Design
A revision of existing interface for the purpose of catering to a new user group and improving the user experience.
DIA2 (Deep Insights Anytime, Anywhere) is an NSF-funded project, designed to help researchers search for funded projects and build connections with other experts. When I joined the project, I was asked to help to decide on a new color scheme for the interface and revised it if necessary. I noticed that the overall style of the interface is out-of-date, and the layout could be further improved. Since the flat design style started to become popular and was supported by professionals and designers in various fields. I decided to adapt the style to the design of DIA2. After working closely with developers, we revised the interface and successfully improved the user experience of DIA2.
Since the goal of this project was to revise the interface instead of designing from scratch, I chose to start with mockup becuase it is more appropriate when revising the visual representation of the skeletal framework of a website.
I not only proposed 8 revisions to the team, I also suggested the team to change the font family from Helvetica Neue to Open Sans. Since Open Sans is not only one of the most used web fonts in the year 2013 but also the fastest loading font, it is reasonable to use Open Sans on DIA2.
Some wireframe ideas and the WINNER (left)
Deciding on the Color Scheme
It took the team several rounds of discussions to finally settle on the color scheme. During the discussions, all kinds of colors have been brought up: navy blue, teal, yellow, green, even purple. However, it is important to note that the color scheme should not only keep consistency with the color scheme of NSF but also help researchers with focusing on their tasks. At the end, our team decided to use sky blue, sea blue, and light gray as the color scheme of the interface of DIA2.
Why we chose these three colors? Because:
Based on the persona and design requirements our team created earlier, we identified several functions that should be added into DIA2. I created a high-fidelity visual comp to communicate with the whole team.
Color & Fonts
I got rid of the space between each dashboard and emphasized the active dashboard.
This change allows the interface to show more dashboards on the screen at once. Also, during the usability testing, users didn't have to scroll up and down to switch between different dashboards. This change proves to be a major improvement on usability.
I conducted user testings on DIA2 to compare the performance between the old interface and new interface. The improvement of the usability is significant and the new version helps users save 14 seconds when they perform one single search. And the paper based on this evaluation has been published in HCI international conference 2016, and I am invited to present at the conference in July 2016.
Revision is not Redesign
Not matter whether you are redesigning a product or revising an interface, the essential goal is to solve the problem, meet certain standards, or achieve desired results. When we designers are asked to refine a product, it's not about how dramatic we change the look of the product. It's how much we improve the user experience. So, if a small change of the interface can help solving the problem, let that small change be the solution.