This is a design challenge I took as consideration for a position asLead Interaction Designer at a company called Lattice Engines. Most Design Challenges lack the real-world opportunity to understand the requirements and deliver the desired outcome through an iterative process and this was no exception. 

Typically, I would either have a Creative Brief provided with a followup meeting to answer any questions, or host a workshop with stakeholder to nail down the requirements. However, given that Design Challenges are growing in popularity as a prerequisite for design positions in Tech, I caved in and went for it. 

Prior to excepting the challenge I emailed a series of questions that I would normally ask in stakeholder interviews and below is the response:

No additional information was provided to me. No content. No feature sets. No mandatory actionable item's. No established flow. No data for basing the data visualization's on. Pie in the sky, open ended, subject-to-interpretation, blank slate. OK...here we go!!!

Leveraging the world-wide-web as a replacement for User Interviews, I began researching coffee companies. As I learned about what a coffee companies portfolio is comprised of, I recorded the various information I felt provided the most relevance to the use-case scenario presented in the white-boarding session. That information was recorded in a simple text editor to later be structured and serve as content in the final page layout.

In the document above, I am using dashes to record static content, indents to show the level various content is accessed, and bullets to record actionable items. This is how I quickly record high-level information and update on the fly. The information is distilled down to the simplest structure by reducing redundancies within each grouping, and sorted based on the use-case scenario and tasks associated. This works for existing products, as well as product innovations, and it works like a charm.

Once the content and structure had been captured, I began sketching out ideas. Given that the primary objectives of the user is to Manage and Report, I placed financial information as the utmost importance, and used Time as the KPI (Key Performance Indicator) for each supporting sub-category. This way, all data visually represented in the dashboard could be filtered in the context of Time.

From scratch, I began blocking in the page content. Starting with a black and white pallet while focusing on the high level bits then working through the visual hierarchy in grayscale. Starting with a black and white color pallet allows me to focus on layout, without being distracted by color balance, harmony, etc. and focus on the visual hierarchy by allocating varying levels of contrast and weight to primary, secondary, and tertiary elements.

At this point, I am looking at a page with no representational content. Meaning, there are no metrics, just placement text and copy that indicate purpose. It's also lacking color to reinforce the relationships of each element on the page, in addition to established typography styles.

The metrics I chose are intended to communicate a perceived scenario and reinforce the flow. As the metrics changed, so did the page elements to support the story. The idea was to filter the page content based on Time, with actions pertaining to each grouping (Product, Trials, Facilities) to further filter the page content. I used Sales v.s. Cost since I thought profit margin's would drive management decisions based on Performance. I grouped Facilities by Region, which were further broken down in to sub-regions, and Trials were base on Level of Completion.

As content was updated, so was everything else. Icons are crucial in making the connection of elements with their purpose, so I simply used Font Awesome for the sake of time. Typically, I would generate a color pallet based on user research, brand identity, or an established style-guide, but since I had nothing to go off of, I used a pallet from a project I had worked on in the past.

The final page design was a dynamic dashboard which the user could filter prior to drilling in to execute on either of the primary tasks. The screen shot below is what was delivered.

The end result is what I would consider to be more of a or mockup. Since this was an interaction role, I focused on establishing a flow, and structuring content, rather than the visual treatment. However, based on prior discussions with the hiring manager, and the DC description of "Instead of box with text, round the edges and get some style in there" I felt as though visual design would inevitably factor into the final critique. 

Since the design is at a point where content and structure are established, I wanted to challenge myself. I wanted to see how much more value can be added in another six hours...so I gave it a push.

After fleshing out the original design, I felt the initial layout was too busy. I thought that there were a number of problems and things I simply didn't have the capacity to address. The metrics I used for Trials were a huge issue for me. The Map was incomplete, and the Navigation didn't seem necessary. I also found that Time as the only contextual marker for the page content, was limiting.

Originally I had intended for the Navigation to allow the user to perform a task without drilling in from the dashboard. After giving it more thought, I imagined that the same filtering would occur on those pages, as what was available on the dashboard. My gut instinct was that this made for a convoluted experience, and detracted from the unique value of the dashboard.

One thing I thought worked well was the Performance metric within the Region tiles adding another level of insight to the user based on location. I ended up moving Product and Trials to the Region tiles, and exposing the unique variables as Strands. I felt this provided an added level of visibility to the breakdown analysis of the Financial Overview, and expanded on the context for the page content. Now the page reads from top to bottom, providing high-level information as a point of reference for the proceeding content.