5 design problems we solved building the new GoSquared
The challenges of designing an analytics platform the whole team wants to use
Our mission at GoSquared is to transform the way companies understand and connect with their customers. We don’t believe tools like Google Analytics are solving enough real problems. We want to move beyond mere “web analytics” — graphs and charts and pageviews — and help online companies connect with their customers in a meaningful way.
At the start of the year, we asked ourselves some deep questions about the future of GoSquared. We’ve been here for 8 years, and we feel like we’re still just getting started. The decisions we made at the start of 2014 led us to releasing the new GoSquared last week.
Why rethink our interface?
The feedback from our customers was loud and clear. Between the email conversations, the live chat, and the Tweets, we had unarguable metrics showing that people were struggling to do tasks that should have been simple. Feedback like this was tough to take:
“The only feedback I have right now is that it was super confusing to figure out how to upgrade. I literally had to go through your support forum to find a link that would let me upgrade that was not exposed anywhere in the interface (not that I could see anyway). Otherwise, the product is pretty cool. ”
— Anonymous GoSquared customer. Emphasis mine.
It’s not just upgrades that were difficult. It wasn’t easy to do much of the following either:
- Inviting team members to view your dashboard
- Blocking visitors
- Accessing plugins for integration
- Editing site details
- Getting help and finding the support docs
- Adding feeds to your Timeline
- Finding invoices and billing information
You get the message. GoSquared had a lot of features but few were accessible. We needed to make some changes to sort these issues out. We needed to take a step back and question some of our assumptions.
Questions
How can we make GoSquared feel like one, unified product? How can we take web analytics out of the back room and make it easy to use for everyone in the company? These questions led to more specific product-design-focused questions:
- If we started afresh with the interface of GoSquared, what would the overarching navigational structure look like?
- How can we bring each GoSquared app (Now, Trends, and Ecommerce Analytics) together into one, unified experience?
- How do we reveal more advanced features to our customers without detracting from the simplicity and ease-of-use that GoSquared stands for?
- How can we ensure GoSquared lives up to its “easy to use” tag line today, and in the future, as we introduce more functionality?
Components that need organising
For those familiar with the previous version of GoSquared, we actually had 4 separate apps that we have been fighting to bring together and integrate more closely:
- Now — What’s happening on your website right now?
- Trends — One click web analytics.
- Ecommerce — Instant insights for your ecommerce store.
- Home — Where you manage your GoSquared account, billing, site settings, and other miscellaneous tasks.
We proposed a solution — design one interface, and combine the different parts of GoSquared into one app, rather than 4 separate apps. But how? The reason these apps were separate was that they each required maximum screen real estate to be beneficial, they each performed specific, focused tasks. They each are built to be independent, yet benefit each other when used in tandem. A new interface would surely have to make trade-offs in some key areas, so we dived in to figure out which of those trade-offs we’d be willing to make.
5 things we learnt designing a consistent, learnable experience across devices
The solution to making GoSquared more consistent across devices? The sidebar. Adding sidebar navigation may seem like an obvious decision on the surface, but it was actually a decision we didn’t jump into quickly or take lightly. A sidebar gives us more space for navigation; it means features like site settings are easier to find because they can be labelled with text, rather than having to be hidden behind tiny icons. A sidebar could be hidden on mobile and displayed easily via a “burger” style menu. It would also ensure navigation is consistent on mobile and desktop.
1. Sidebar vs. Menubar
With many benefits, there were also a lot of downsides in moving to a sidebar-based navigation structure.
Sidebars take up a lot of space, especially on smaller screens — will our customers actually benefit from improved navigation if there is less room for their actual information on screen? Lots of services now use sidebars for navigation — how can GoSquared stand out against other services if they all look the same? Critically, would a sidebar actually be simple enough to use and solve our navigation problems?
After extensive internal debates and hundreds of sketches, we started to realise the reasons for using a sidebar for navigation were stacked high in its favour. It turns out that if we use a sidebar we can focus all of our efforts onto one core area of the UI that can take you anywhere and everywhere in your account. The sidebar means we can have the same set of icons and labels on smaller screens and larger screens, ensuring that no matter where you are you’ll always experience the same familiar layout. It’ll feel like GoSquared on every device.
Sidebar vs. menubar? Sidebar wins.
2. How to design an interface that works for Mobile > Tablet > Desktop > Big screen TV
We’re a small team. We have thousands upon thousands of people using GoSquared on all their devices. A core philosophy for us is to bring GoSquared to as many different devices as possible, with one consistent experience, and one core code base. As a customer you get the same analytics and visualisations wherever you are. As a team we get to push the product forward at breakneck speed because we don’t have to maintain separate apps or code bases for each different device type.
Mobile, tablet, desktop, TV. Build for all. Optimise for what customers use the most.
3. Revealing advanced features without cluttering the interface for everyone
The solution: Take the sidebar further. With extra space afforded to us by the sidebar, we started looking at ways we could maximise our usage of every pixel, and ensure all navigation in your GoSquared account is constrained to the sidebar.
By ensuring all navigation happens in the sidebar, we can reduce the amount of confusion people may face when jumping around their account. So many services have sidebars, and menu bars along the top of the screen, often leading to confusion about the hierarchy of each interface component. By constraining everything to the sidebar, we can be crystal clear about where you currently are in your account, and what you need to click to get elsewhere.
Reveal advanced features without clutter. Keep navigation contained and consistent across the interface.
4. Making it easier to “learn” the GoSquared interface
We’re big fans of Steve Krug’s usability bible Don’t Make Me Think. If there’s one thing I’ve taken away from reading that book multiple times it’s this: don’t expect people to read. The previous interface of GoSquared was text heavy. We didn’t have many visual cues to help you learn the UI.
We decided to introduce a set of icons in the new GoSquared so you can more easily jump between apps. Over time, we hope that these icons will become synonymous with their respective apps and you therefore won’t need to read carefully through the interface to find your way around — you’ll be able to jump to each familiar icon without any unnecessary cognitive load.
Make the interface more learnable. Introduce icons paired with text labels, and keep navigation consistent throughout the interface on all devices.
5. Making onboarding a pleasure (because first impressions matter)
In the setup process, we also wanted to encourage new users to do more than the bare minimum when signing up. A huge amount of the value in GoSquared comes when multiple people on your team have access to the same data, so we added a simple step after tracking code installation to encourage people to invite their fellow team members.
In adding a step to the onboarding process, we also cut out a step that was previously a barrier between signing up and getting to a working dashboard. You used to have to set a timezone for your account during setup. We now automatically detect your timezone, and show this to you on the final confirmation step of setup. Hopefully we’ve automatically detected your timezone correctly and you won’t need to do anything, but it also gives you a heads up that we have set this for you and offers the option to easily change it if you need to.
Make onboarding a pleasure. Fight to reduce complexity and remove unnecessary steps. Make the process fun and enjoyable and activation will increase.
The beginning of a busy summer
While the new GoSquared is among the biggest updates we’ve ever made to GoSquared, it’s just the start of some really exciting releases we’ve got planned for the summer. I really hope you enjoy using the new GoSquared!
