Pay Your Design Debt – A Ground up Redesign of a 3-year-old SaaS Platform
In the early stages of any business, the future is uncertain. A shadowy, uphill path cluttered with obstacles. All you can ever be certain of is where you are now and where you’ve been.
Talking with customers (and those you wish were your customers) is a messy but essential part of building a B2B SaaS company. Feedback will sometimes provide a guiding light, but oftentimes, it’s a thick fog clouding the path.
Really, the answers only come after you ship product. Only then do we start to have grounded, considered conversations with the people we’re trying to help. We talk about their problems in greater depth, we test our (and their) assumptions, we learn where we’re failing and where we’re doing alright.
By the nature of experimentation we’ll ship things that work, and things that don’t.
Inevitably we’re left with design debt – a deterioration in the cohesion of our user experience.
In 2014 I joined David Batey to co-found Nickelled. Nickelled is a SaaS platform that helps online organisations onboard their users through step-by-step website tutorials (a.k.a guides).
We went through those early uncertain phases. Our user interface guidance technology could be used for many different use cases: onboarding, sales, marketing, customer support. We made mistakes trying to build a product that appealed to everyone.
We eventually found traction focussing on SaaS customer onboarding.
However, after a few years of rapid product iteration, Nickelled’s main app (responsible for the management, reporting and editing of Nickelled guides) was suffering from poor navigation, inconsistent UI patterns and jarring work flows.
Design debt was invasive. It was time to pay it off.
The Design Process
Tackling the design debt was a thorough process for us. We were keen not to simply patch it and move on. The team saw it as an opportunity to make some significant improvements to the application. We took time to investigate the user data, we spoke with customers, we prototyped and ran usability studies.
Usage data with Segment
We track in-app usage data at Nickelled using Segment and Mode Analytics. Having access to a historical repository of past user behaviour was a great place to start. I started interrogating the data…
- How often were people using Nickelled?
- What actions were people performing most?
- What actions were people performing in most sessions?
- What were people doing after signing up?
- What were activated users doing that non-activated users weren’t?
- How often were people creating guides?
Unsurprisingly, people were mostly logging in to make changes to their existing guides – so finding the guide to edit was a really important action.
Additionally, there was a large disparity between the views of guides on active accounts vs the views of guides on non-active accounts. Suggesting sharing guides could be a key activation event.
And features we believed to be useful, such as tracking guide views per distribution channel (email, live chat, FAQ pages), were hardly used.
User interviews
The data uncovered through interrogating Segment provided more questions than it did answers. Fortunately we’ve a good relationship with many of our customers and we can go straight to them to fill in some of the blanks.
They told us anecdotes of times they struggled to find a specific guide in one of our supported languages. And stories of how they had to find performance data to make the business case to their boss. And when asked “why don’t you use feature X?”, they replied: “what is that?”.
Card sorting
In our existing app we experienced low levels of engagement on features we considered useful, I was curious to learn how users group features so we could potentially develop a better information hierarchy, placing features exactly where users expected. One outcome has been removing the old layered tabbed interface, replacing it with a flat sidebar for better signposting and accessibility.
Rapid prototyping
Now, we had a set of problems we had to address coloured with qualitative and quantitate data. We used rapid prototyping techniques to solve these problems. Additionally, rapid prototyping gave us tangible artefacts for getting quality feedback from our team and users. I used a combination of Sketch made mockups hooked together in Google Slides, and HTML/CSS prototypes (Middleman and Bootstrap) to communicate and test ideas.
Remote moderated usability tests with prototypes
Usability tests will always uncover gems. At Nickelled, we take a lean approach to usability testing by focussing on our assumptions. We create loose scripts testing those assumptions. Including a scenario, set of tasks and general follow-up questions.
As we’re a distributed team with a global customer base it would be very challenging to complete usability testing in-person with our customers. Instead, we do remote moderated usability testing using Skype. Generally this works great and gives us invaluable customer feedback.
The Results
The positive results of the redesign were many-fold and we’ve received much praise from our users about the improvements. We’ve also seen true business benefits from taking a human-centered approach to our redesign and launch of Nickelled 2.
Here are some of our highlights.
Minimal, streamlined interface, flatter navigation
After diving into our usage data, it became clear that several of the really useful features we’d built were being under used. Taking this data to our users and asking them ‘why’ they didn’t use certain features the reason became clear – they just didn’t know they existed. We had to do a better job of showcasing these useful features.
We did this in two ways.
First, we replaced our poor information hierarchy with a flat sidebar literally displaying all the features.
Secondly, we improved our messaging in a few targeted areas leading users to success one step at a time. For example the image below gently prompts a user to share a new guide that has no views yet.
Better search and filtering
One finding from our user research was after an account had created 10-or-so guides, locating a specific guide became troublesome. So we introduced guide search to make sourcing guides effortless.
Additionally, the filtering options UI was changed to show all available filters conveniently.
Headline success stats and satisfaction insights
People were unsure if they were seeing success with Nickelled. Users need to be able to understand at a glance if they are seeing success with your product (or not). Our new headline success stats made the results clear and obvious to guide creators.
Similarly, guide creators need to share those guides with their own users. They need to know what their end-users think of those guides – is the guide helpful? Nickelled 2 makes this easy and clear to understand with our satisfaction insights.
Considerate notifications
We added non-invasive notifications. Our users wanted to know when particular events occurred asynchronously to their own usage e.g. when a person left feedback on a guide, when invoices were raised, when new features were released.
Reusable design system with Tachyons
Although not a primary goal, developing Nickelled 2 with Tachyons, allowed us to produce a solid and flexible design system that is used across the range of Nickelled web products.
Product Hunt relaunch
Releasing Nickelled as ‘Nickelled 2’ allowed us to relaunch the application on Product Hunt.
Round-up
Whilst intensive, taking the time to redesign the main Nickelled app from the ground up was a worthwhile activity.
Having paid our design debt our development velocity has sky rocketed and, more importantly, our customers are grateful for a coherent and consistent user experience.
🙏 Thank you for reading. This is a story from Fraser Deans’ design portfolio – a digital product designer.
