Gene Steratore
laptop-2838914_1920.jpg

Products

eCommerce Dashboard

Home.png

Overview

When I created the initial VDC Dashboard in 2017, now titled VendorHub, I did not follow a rigid design process. To be honest, I had not even fully developed my own UX design process at the time. In the fall of that year, I began my MS program in UXD and realized that while I had always thought in a user-centric way, I was not fully applying best practices in my work.

Applying Newly Acquired Skills

In early 2018, I had completed the following courses earning A's in each:

  • User Experience - Principles and Concepts

  • User Experience - Design In Practice

  • Information Technologies

I can't express to you in writing how much I had learned. I was motivated to purchase psychology books like Don't Make Me Think and Bottlenecks, embraced a new outlook on design and was able to properly adjust my focus on the user's wants and needs. I knew that it was time to put these newly acquired skills to the test and re-create my most passionate project. 

DIPTE Design

After coming to the decision to embrace a recreation of the old dashboard, I wanted to spell out a design process that I could follow and was relevant to how I progressed through projects. I researched online and found some great articles explaining the need for a structured process. I came up with the acronym DIPTE. It was relevant, easy to remember and allowed me to sub-categorize my work.

D - Discovery & Framing

I - Initial Design

P - Prototyping

T - Testing

E - Enhancements

To read more about my design process, check out this article.


Discovery & Framing

The beginning of my process revolves around conducting user research and brainstorming alongside them. Since this dashboard had a strict internal audience (roughly 21 people on the Vendor Direct team), I was afforded the opportunity of meeting with every user. 

To start, I divided the users into 3 categories, which mirrored their job titles:

  • Coordinators

  • Analysts (Associate Analyst, Senior Analysts)

  • Management (Director, Supervisor)

I met with each group individually and our sessions were very productive. Personas began to form for each position, as they each had different viewpoints for what the ideal dashboard would be to them. The best feedback came when we framed potential features and user actions as "problems", such as "What do I need to review in this vendor meeting?".

  Content is Blurred and Confidential

Content is Blurred and Confidential

We were able to successfully answer the questions posed in these meetings with the current version of the website. 

 

Initial Design

VendorHub 2018 - Info-graphic

Once the meetings concluded and the problems had viable, realistic answers, I transitioned to the next design phase. Initial Design. I started this phase by creating an info-graphic, something I have grown very fond of in school. An info-graphic essentially provides a high-level view at what a particular solution can offer. 

When looking over the data that the team wanted displayed on the site, it was clear that green, yellow and red had to be in the palette to portray good, average and low ratings for metrics such as in-stock percentage. I leaned on Gestalt Laws of Grouping to help identify the color of the other elements (for example, the info-graphic is colored identically to the website and each section correlates correctly). The navy color Independence is an homage to the very first version of the first prototype that I created for our team. The full color scheme can be found here.

Knowing that eventually my career would take me to UX full-time, I streamlined the Excel document that fed data to the website. This allows for easy updating and the ability for the site to continue after my eventual departure.

Prototyping

At the beginning of March, I had a working prototype that I presented to two team members who had given great feedback on the previous website that I built. I let them use the non-prod link for a week and they came back to me with ideas/feedback. Most of this feedback was visual (this button isn't big enough, etc.) and it helped hammer out details.

Due to confidentiality, I unfortunately cannot share details on the feedback they shared. One suggestion revolved around font-weight (300 vs 700) inside of DataTables. 

Testing

Mid-March 2018 the website entered production. I setup an hour to present the website to our entire team, showcased new features and explained how the data was fed to the site. 

The response was overwhelmingly positive and the website is averaging more traffic (albeit with such a small sample size, this could be because its "new").

Enhancements

As of April 18, 2018

Added updated date above any DataTable (Javascript, Bootstrap, pNotify)

Added a loading animation for DataTables (this was due to IE's slow parsing of .csv)

Changed highlight color of menu items to a neutral grey

Changed font from Roboto to Open Sans

Added a How-To Article section