Holiday Benchmark Analytics


IBM CORPORATION












Building a responsive web app for reporters to create custom data visualizations.













The challenge

Help reporters help themselves to IBM's data

Reporters and analysts use IBM's Benchmark data when writing about Black Friday and other heavy buying periods. IBM benefits from the free publicity.

Requests for Benchmark data were being handled by IBM Media Relations and the process was slow, labor-intensive, and reporters could not explore the data themselves. As a result, reporters used less Benchmark data and IBM received less publicity.


The solution

IBM Holiday Benchmark

The IBM Holiday Benchmark web app allows reporters to "self serve" Benchmark data and create custom visualizations as needed.



My role

UX Designer

I was the UX Designer on this project, responsible for all user research, interaction design and usability testing. My methods and deliverables included:

  • Stakeholder interviews
  • User interviews
  • Task analysis
  • Personas
  • Empathy maps
  • Information architecture
  • Design workshops
  • Sketches
  • Wireframes
  • Interaction design
  • As-is/To-be scenarios
  • Prototypes
  • Functional specs
  • Usability tests
  • Demonstrations



Kickoff

Our team was handed a spreadsheet of requirements and a data diagram and told that we needed to launch in 10 weeks. Oh, and make it responsive. Ready… Go!



Define the mission

I started holding working sessions with the core team every day and the extended team every week. Together, we wrote a problem statement and determined three goals for the project.



User research

Talking with users helped us work through our assumptions and better understand what needed to be done. I consolidated our findings in a Persona and an Empathy Map.



Ideation

Our dispersed team used an online tool (Mural) to collaborate with each other.



Wireframes

My early wireframes focused on helping users quickly find the infographics they needed.


The rug gets yanked

Our Product Manager announced that the infographics were being dropped and that we'd have to use data charts instead.

Yeah, sometimes it happens that way.

The following wireframes show how the design matured as we incorporated data charts and experimented with layout, navigation, and different ways of selecting data dimensions and metrics. The red notes are my critiques of the work in progress.





Usability testing

Not everything was ready when we needed to start testing, so I asked our Visual Designer to send me what he had. I arranged his mockups into a crude but effective prototype and we were able to get the results we needed. We found that users liked the overall look and feel of the app, calling it "straightforward" and "clean," but we also found a few sticking points.

Bluespark Usability Test Results (Final).pdf



High-fidelity mockups

I worked closely with other designers throughout this project to ensure that the finished look and feel adhered to IBM guidelines while staying true to the original design.



Recap


    • Determined problem to solve and three goals for project.
    • Conducted user research and consolidated findings in Persona and Empathy Map.
    • Iteratively created wireframes related to infographics.
    • Scope change: Infographics out, data charts in.
    • Created new wireframes related to data charts.
    • Created prototype.
    • Conducted remote usability tests with users matching persona.
    • Launched on schedule.




Big Iron Goes Mobile

IBM Corporation

Enterprise | Mobile | Web