Bloomfire Responsive Design

Background

About The Organization

Bloomfire is a knowledge sharing and collaboration platform that allows businesses to tap into the collective wisdom of their employees or customers. Members of a Bloomfire community can post questions and answers, and add or create new content that others can like, share, or comment on.

The Challenge

Bloomfire needed to evolve their Web app to a responsive design so that it could serve customers beyond their desktop browser and on many types of devices and screen sizes. In order to have the layout adapt gracefully on different screen sizes, some layout and interaction changes were necessary.

Changing the design of an app that is business-critical to your customers should always be done thoughtfully and minimize the disruption to end users. Strong negative customer reactions to design changes the year before left the company wary of making even minor design changes.


Definition & Strategy

Objectives

  • As the UX researcher for the project, I assisted the UX and UI design leads in assessing the new responsive design for any potential usability problems.
  • If any usability problems were uncovered, assist the team in using a variety of usability testing techniques to iterate and assess design alternatives until a successful design was achieved.

Project Team

  • UX Researcher
  • UX Designer
  • UI Designer
  • Product Managers
  • Software Engineers
  • Client Success

Key Tools

GoToMeeting, Optimal Workshop, Photoshop

Skills

  • Interaction Design
  • User Research
  • Visual Design
  • Design-To-Development Documentation
  • Fast Iteration Management

The Process

Initial Usability Testing Uncovers a Big Problem

Bloomfire’s first user conference in Austin, Texas offered us an opportunity to conduct usability testing on the new responsive design with customers. We used GoToMeeting to both stream the user’s voice and screen live to our team members in the office and record the session for later reference.

Usability testing revealed that while most of the design was a success, we had one huge usability concern:  almost half of the participants had difficulty locating the search feature, if they found it at all. The Bloomfire User Conference was attended by community administrators who were “power users” of the product and sophisticated technology users in general; that these users struggled with this design suggested the average user would likely fare worse.

At the conclusion of tests when we showed users where the search was located, we heard many variations of “Wow, it was right in front of me the whole time and I didn’t even see it!” Users who discovered the search found the new interactions intuitive and delightful, helping us narrow the problem down to the findability of the feature.

Testing Multiple Design Options, But Coding Only One

Search is an essential component of the Bloomfire product, making this a critical usability problem to solve before launching the new design. The team had a lot of hypotheses on how we might change the design to make the search more findable. Frustratingly, we had more ideas than we had capacity to code and not enough user traffic to own customer support Bloomfire community (where we could test ideas without disrupting customers) for statistically significant A/B testing sample sizes.

I proposed we try first click testing with participants who were not customers to serve as proxies for first time users. First click testing gauges how easy it is to complete a given task by showing users a design and asking where they would click to perform a task. The objective of these tests was not to choose the final design direction, but simply to choose the next direction to try. We could test more options, get usability feedback faster, and get results more economically than we could through coding each option.

 
First click tests (like this sample above) gave us a way to do data-driven comparisons between design options before moving on to coding.

First click tests (like this sample above) gave us a way to do data-driven comparisons between design options before moving on to coding.

 

This “Let’s mock it up and test it!” approach allowed more team members to contribute design solutions and see the results. Optimal Workshop gave us heat mapped data on which part of a mocked up homepage users clicked on to start a search and how long it took them to decide where to click. Out of several options we selected the one that had both the highest success rate and the shortest time to discovery.

Another Round of Testing Before The Roll-Out

After choosing the next design direction to test, we coded the most promising design and scheduled another round of remote usability testing with customers. This final round of usability tests suggested the new design fixed the previous usability concerns. We felt ready to roll the new design out to customers.


Outcome

Before & After

Before

Before

After

After

 


Usable Designs “Just Work”

Even with a pre-release communications blitz and customer outreach campaign before rolling out the design, we braced for customer pushback the morning after deploying the new design. What we received instead were minor bug reports but otherwise little out of the ordinary. When we reached out to customers to learn what challenges they had with the new design, probing specifically about the new search design and interactions, the most common reply was “Why would I need to call you? It just works.”