Catherine Hicks
User Experience and Product Design Professional

NetBase

NetBase delivers the social intelligence that global brands and agencies use to publish, monitor, analyze and engage with customers in real time. Using a high-precision natural language processing (NLP) engine, our platform processes billions of social media posts to extract structured insights delivered via customizable dashboards. Our solutions enable digital marketing, public relations, brand management, customer service, sales, and product innovation leaders to craft winning strategies faster.

Role & Project Summary

  • Allow users the ability to annotate data as they see fit for both presentational and historical reference

  • Users need to be able to give their data context for both presentation and archival purposes
  • Users will be able to annotate data charts with notes to give the data context
  • users are able to highlight key points in the data with annotations - such as a product launch, a social media campaign or an event - so that all data can be see by everyone with access to it with relevant context

Project Constraints

  • When we started discussing annotations, we first explored the idea of having the annotations built outside the data itself, giving time, date and commentary in a panel that sat alongside the data. But once we started digging into the concept of annotations, we thought that having the annotations be right on top of the data made more sense (if it could be done - a technical constraint we were not 100% sure could be implemented)
  • Users of the enterprise platform often have large data sets that they want to share with users. But without the proper context that data is useless for anyone not familiar with it.

Annotations must:

1. Be able to give the data proper context for someone not familiar with it

2. Be easy for the person who is familiar with it to annotate the data with relevant details

NetBase Enterprise: Annotations

Wireframes

Example

At the beginning of my design process I created wireframes for testing purposes.

Guiding Questions

  • Why was it useful to do this?
  • What kind of wireframes did you make?
  • Low fidelity or high fidelity?
  • What tool did you use for this?
  • Did you use them for testing?
  • How many iterations did you have?

NetBase Enterprise: Annotations

Wireframes

Example

At the beginning of my design process I created wireframes for testing purposes.

Guiding Questions

  • Why was it useful to do this?
  • What kind of wireframes did you make?
  • Low fidelity or high fidelity?
  • What tool did you use for this?
  • Did you use them for testing?
  • How many iterations did you have?

NetBase Enterprise: Annotations

Wireframes

Example

At the beginning of my design process I created wireframes for testing purposes.

Guiding Questions

  • Why was it useful to do this?
  • What kind of wireframes did you make?
  • Low fidelity or high fidelity?
  • What tool did you use for this?
  • Did you use them for testing?
  • How many iterations did you have?

NetBase Enterprise: Annotations

Wireframes

Example

At the beginning of my design process I created wireframes for testing purposes.

Guiding Questions

  • Why was it useful to do this?
  • What kind of wireframes did you make?
  • Low fidelity or high fidelity?
  • What tool did you use for this?
  • Did you use them for testing?
  • How many iterations did you have?

NetBase Enterprise: Annotations

Wireframes

Example

At the beginning of my design process I created wireframes for testing purposes.

Guiding Questions

  • Why was it useful to do this?
  • What kind of wireframes did you make?
  • Low fidelity or high fidelity?
  • What tool did you use for this?
  • Did you use them for testing?
  • How many iterations did you have?

NetBase Enterprise: Annotations

Wireframes

Example

At the beginning of my design process I created wireframes for testing purposes.

Guiding Questions

  • Why was it useful to do this?
  • What kind of wireframes did you make?
  • Low fidelity or high fidelity?
  • What tool did you use for this?
  • Did you use them for testing?
  • How many iterations did you have?

NetBase Enterprise: Annotations

Wireframes

Example

At the beginning of my design process I created wireframes for testing purposes.

Guiding Questions

  • Why was it useful to do this?
  • What kind of wireframes did you make?
  • Low fidelity or high fidelity?
  • What tool did you use for this?
  • Did you use them for testing?
  • How many iterations did you have?

NetBase Enterprise: Annotations

Wireframes

Example

At the beginning of my design process I created wireframes for testing purposes.

Guiding Questions

  • Why was it useful to do this?
  • What kind of wireframes did you make?
  • Low fidelity or high fidelity?
  • What tool did you use for this?
  • Did you use them for testing?
  • How many iterations did you have?

NetBase Enterprise: Annotations

Wireframes

Example

At the beginning of my design process I created wireframes for testing purposes.

Guiding Questions

  • Why was it useful to do this?
  • What kind of wireframes did you make?
  • Low fidelity or high fidelity?
  • What tool did you use for this?
  • Did you use them for testing?
  • How many iterations did you have?

Summary

  • We made the assumption - without confirming - that what we were building for this feature could be built on top of our existing visualization platform
  • We went forward with the idea this way because we were, at the time, attempting to push the development team to stretch and build beyond the standard capabilities of the platform. We had fallback ideas if this didn't work with our visualization platform, however this was our first and best idea and pushed the team to explore it - which they were able to successfully complete
  • In what manner were we going to both create annotations and show them in a way that didn't distract from the data itself
  • Our first concept was to have a side panel with the annotations, however we found that didn't give enough context and was cumbersome to the overall look of the UI
  • Alongside the development team we came up with the idea of annotating in the data view, and we worked through a few concepts before we came to the one you see here
  • I learned in depth how highcharts, our visualization framework, worked and how we could push the limits of that