Geckoboard helps teams hit their goals with KPI dashboards for TV screens.
Previously, when customers wanted to apply company branding to their dashboard the only option was to write CSS. In 2017 I led a project to make customization and branding a viable option for all users.
The project's success was tied to key metrics around expansion, but removing the ability for users to upload CSS had the added benefit of reducing support enquiries and allowing the team to implement front-end changes more rapidly.
I kicked off the project with focused research into the problem, analyzing how other products solve the problem, and talking with users.
This case study is a work in progress.
Responsive web app, TV dashboards
Product Designer - UX and UI
I created a research plan to identify the questions we needed to answer and collect evidence to support recommendations. In collecting evidence, I conducted a survey with around fifty customers, interviewing several in depth over the phone; as well as analyzing how other products solve a similar problem.
The most important question I had to answer was not about the sort of changes our customers wanted to make, but rather why they wanted to customize their dashboards.
- Customization should feel easy for everyone.
- Every brand should look great (including ours).
- Your brand is important but the data is crucial.
- Ship less to learn more.
Setting design goals
Answering the question why do user customize their dashboards? confirmed our hypothesis that the most common use case for customization is to apply a brand's look and feel. To guide us in best supporting this job-to-be-done as the project moved forward, I set four design goals.
The fourth goal came from the team’s experience with previous projects. When we build a new feature, we aim to ship a limited but useful version to customers as early as possible. The feedback our customers then provide help steer us as we design and build the whole solution.
I organised a workshop with designers and a product manager to generate ideas. We used crazy-eights and dot-voting and came away with a handful of strong ideas to explore. Over the following days, I created a light-weight user journey document and low-fidelity clickable wireframes (using Axure) based on our ideas. We pared the feature down to deliver on its core value, and I iterated over the wireframes based on hallway testing.
Validating the design options
The solution was shaping up to be fairly simple from an interaction design perspective; at this stage I was confident we would be able to fulfil our first goal. The biggest questions to validate were will this feature provide enough flexibility? and will our customers be proud of what they create?
My Intercom message put me in contact with customers every day, so I started mocking up the range of options they would be able to create with the feature. Feedback was good; customers liked have a range of choices and most preferred one of our default themes.
There's a possibility we’ll want to add further customization options in future, but these conversations gave me confidence that our MVP was a great starting point. With our fourth goal (ship less to learn more) we would be able to learn about further customization needs after shipping and measuring the impact.
High-fidelity prototyping and testing
At Geckoboard, I create prototypes at a range of levels of fidelity depending on the need. This project required some fiddly interaction design. Rather than simply providing static Sketch mockups, I build a high-fidelity prototype using ReactJS, with which I performed guerrilla usability testing. You can try the prototype below.
Working prototype, click Settings to try it out.
UI and interaction design
Over several rounds of usability testing, I refined and polished several new, bespoke interface elements. These include a slick file upload, color pickers, and cards to encourage customers to upgrade to access the feature.