Bloomfire Responsive Design
A story of successfully updating the design of a business to business Web app whose customer base was adverse to even minor changes.
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. Strong negative customer reactions to design changes the year before left the company wary of making even minor design changes.
Even with several rounds of usability testing, a pre-release communications blitz, and a 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.
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.
Objectives and Opportunities
- 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.
- UX Researcher (me)
- UX Designer
- UI Designer
- Product Managers
- Software Engineers
- Client Success
GoToMeeting, Optimal Workshop, Photoshop
- Interaction Design
- User Research
- Visual Design
- Design-To-Development Documentation
- Fast Iteration Management
Execution and Process
Changing the design of an app that is business-critical to your customers should always be done thoughtfully with the goal of minimizing disruption to your users. What do you do when a failed redesign in the past leaves customers resistant and the team scared of change?
Usability Testing Uncovers a Big Problem in the New Design
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. 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.
The Bloomfire User Conference was attended by community administrators who were “power users” of the product and sophisticated technology users in general. When power users struggle with a design, an average user is likely fare far worse. Search is an essential component of the Bloomfire product, making this a critical usability problem to solve before launching the new design.
Testing Several Designs, Coding Only One
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. We also lacked 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. 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 design direction to code for another round of moderated usability tests. We could test more options, get usability feedback faster, and get results more economically than we could through coding each option.
This “Let’s mock it up and test it!” approach allowed more team members to contribute design solutions and see the results. It was fast and easy for me to recruit participants who were not customers to serve as proxies for first time, non-”power users.” Optimal Workshop gave me 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.
First click tests using Optimal Workshop gave us a way to do data-driven comparisons of design options before moving on to coding. We improved the original design concept (left) through almost a dozen iterations (including those shown in the middle) into a better-performing version (right).
One Last Round of Testing
After several rounds of first click testing, we choose our next design direction to test. The engineering team coded the most promising design and I scheduled another round of remote usability testing with customers.
The final round of usability tests suggested the new design fixed the usability concerns uncovered at the Bloomfire Users Conference. With the design coded and a communications plan prepared, we felt ready to roll the new design out to customers.
Usable Designs “Just Work”
No matter how much you prepare, or how confident you feel in your work, few things are as nerve wracking as deploying major changes to software.
On the morning of deployment it was all hands on deck. The team was ready to roll back the design if we reached a predetermined threshold of customer complaints. What we received was...silence.
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.”