The challenge was to create a tool which would help webcast producers keep track of their analytics before, during, and after their webcast more efficiently. As a given, we also needed to keep all existing functionalities and features.
The business goal was to give users a analytics portal that would help them analyse their webcast's success. This was to help ensure customers would not have to use a third party connector to collect and track their webcast data.
My role was to conduct research, lead, craft the user workflows, and create the visual designs.
We interviewed individuals for contextual inquiries, as well as conducted a focus group across both marketing and sales from various organizational levels, to understand the use cases for each role and division. The following user profiles were developed according to the results of those interviews.
Age: 44
Gear: Dell laptop, iPad, iPhone
Preferred Browser: Safari
Objectives
Age: 32
Gear: Dell laptop, iPad, iPhone
Preferred Browser: Chrome
Objectives
Age: 28
Gear: Dell laptop, iPad, iPhone
Preferred Browser: Chrome
Objectives
The feedback that we received from our interviews were divided into 5 core areas of improvement: Global, Navigation, Visuals, Dashboard/ Grid, Widget Report
The interface should be second to the content and fade into the background.
The UI should have the ability to be manipulated by the customer to show specific data, in the manner they saw fit.
All elements and behaviors need to be ubiquitous to help with quick adaptation. This also would help drive the users comfort level with the product.
The UI needs to be clear and easy to understand for quick consumption.
Using a consistent visual language of patterns and behaviors will give users a sense of comfort with the product.
Navigation and tools need to be accessible, when needed and the UI needs to give clear indications of what actions should be taken next in the process.
The layout should be responsive down to tablets. Content is not likely to be consumed on a phone.
With the wireframes as well as the visuals, I developed the visual style in conjunction with the wire framing. I developed this format for a few reasons: the progress needed to be shown to executive staff and some external customers, and visual designs could be A/B tested. Both the wireframes and the high fidelity mocks were made in Adobe Illustrator. All of this was done to increase productivity, since we had a narrow design window. A UI framework was made to create wireframes rapidly and would cut down rework from wires to final mocks.
The layout was the first things we took into consideration. Since the manipulation and placement of the panels would be one of the most important interactions in the feature. How would users move the panels? How will we keep the layout clean and easy to consume data? To answer these questions, we chose to go with a 4 column layout. Users could choose how many columns they would like the panel to span in a predictable manner.
For manipulating the data, we chose an integrated approach. On hover we decided to display the needed functionality per panel. This was to clean up the UI and take away as many distractions as possible. This UI proved to be intuitive without being intrusive and left the controls always at the fingertips of the user, when needed.
We card sorted our content, taking into account the data we already collect from events and combined this with suggestions we took from the contextual inquires. We broke this into the purple column for overview. Overview is averages for the entire webcast. Blue was for data collected on individual webcast attendees, green for activities, and red was for additional items to track, that we did not previously.
This was in hopes that we would have independent sets of data, which would allow users to combine in the way they saw fit for their dashboard.
As a company we decided, in order to get to market quickly, we would leverage our current charts and not add in the ability to create custom for version one. But instead of placing all charts on a users dashboard, we would add in a few essential charts and allow users to add or remove what they saw necessary.
Phase one, would utilize the pre-existing charts with the addition of a description along with categorization tags for Webcasts Producers.
Lastly, I made "implementation specifications" for all of the components so the front-end development team could execute the design.
