How user testing saved the day for this mini-web-app!
The goal of this project was to build a new feature on the cloud backup platform to enable billing data to flow into a 3rd party product called Connect Wise. It was not deemed as a high-priority project in the beginning but grew to become one as more customers requested this capability.
Project layers discussed:
- Initial design
- Design for new server
- The project gets an Agile team
- MVP implementation
- MVP usability testing saves the day
- Pivoting iteration
- Training material
I was brought into the project after basic customer and engineering insight had been gathered by product management and those assumptions were used to formulate the starting architecture and interface. Initial discussions involved whiteboarding and sketching out potential functionality. Ordinarily I would opt for expanded collaboration with engineering, support, and ideally some form of live customer insight.
The intent was to build and deploy this using the legacy server architecture. This dictated many of the initial parameters to design within: the look and feel should resemble the rest of the site, the page width was fixed, and interactive capability would be limited. I came up with the following mockups to describe this potential interface.
Design for new server
Priority for this project shifted and waned for a while before being reverted to the original implementation team for improvement. This team managed a different backend server system with newer architecture — giving me a little more freedom to make the interface friendlier but requiring more technical input from me. As a result, I provided an interactive HTML/CSS/jQuery template for backend code to be attached.
As work began on improving the backend code, priority shifted once again and the project was further postponed.
The project gets an Agile team
The project was reprioritized when a new Agile team was formed around me to tackle this and other front-end projects. The decision was made to try to implement this through short iterations on the legacy server platform — so I took my template design and mocked up how it might behave there.
We implemented a minimum viable product based on my design in a two-week iteration. I don’t have any screenshots of this first version but I can tell you that included most of the fields with no interface niceties. It was not ready for release but it was certainly ready for testing.
MVP usability testing saves the day
Possibly the most important activity in this project was when we approached beta customers for testing before trying to implement any richer features. In a quick series of screen-sharing usability tests, we determined that most of the assumptions we had made to design this feature set were incomplete. We uncovered several details that would have prevented most customers from being able to fully understand or reliably use this integration tool. Though I don’t currently have any media from these sessions, the insight I/we gained from them was powerful and valuable.
With this new insight we spent the next sprint implementing design and architecture fixes for all the problems we uncovered. I moved and renamed elements, dropped unwanted future features, and created a 3 button set for publishing as our customers requested.
The layout now fit our customers’ mental model of this information and gave them a baseline of features they needed most, all still in a single page.
At the end of the next sprint we scheduled follow-up sessions with our beta customers, asking them again to show us how they will publish information to ConnectWise. Our tests passed and they were VERY happy.
Once we’d gotten our own interface into an easy to use page and gained enough knowledge about the complex, multi-screen ConnectWise configuration — we realized we should provide training material for how to set up the ConnectWise portion. I created a 3 minute walk-through video for this purpose. Once completed, we enabled this feature for all Doyenz customers.
Originally published at www.ihoby.com on May 14, 2016.