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.

Your data wherever you are. A consistent experience on all your devices. One core code base to maintain and develop.

Mobile, tablet, desktop, TV. Build for all. Optimise for what customers use the most.

3. Revealing advanced features without cluttering the interface for everyone

Switching between different sites in your account without obstructing the dashboard.

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

New icons in GoSquared

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)

Guided tour of the new GoSquared

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!

Find out more about GoSquared here