Using Responsive Design: An Interview with 7digital’s Product Manager
DEVELOPERS
Amidst the hectic schedule of redesigning our web-store, we managed to grab a few minutes to sit down with 7digital’s Product Manager, Nick Skelton. We talked about his experiences using a responsive design method for the reboot of 7digital.com.
Find out what actually happens when launching a Beta site, what challenges we’ve faced designing responsively and what our plans are for the future!
Why do you think responsive design is important for a digital music service provider like 7digital?
It’s principally about choice and accessibility. Something we’re big on here at 7digital. We’ve seen an undeniable shift in consumption where the purchase, download and streaming of music is no longer the domain of the desktop and we’ve always felt it’s hugely important to provide the highest quality experience no matter where, or how, our customers choose to use 7digital. In the space of just 12 months we saw an increase of over 10% in smartphone usage, where we’re now seeing over 75% of customer activity on smartphones and tablets. You’ve got to be where your customers are!
What are your main goals transitioning to a responsive website design?
We hope to simplify access by offering the same 7digital experience to all our customers across all Web-enabled devices.
I want to start reading one of our artist interviews on my desktop here in the office, hop on the bus to read the rest on my phone, while listening to the music in my Locker, and then, once home be able to immediately download and listen to the band’s album on my tablet – all in the same experience – that is one example of simplified access.
Beyond that there are some ‘behind the scenes’ benefits of unifying our mobile and web experiences. By not having a separate mobile-optimised store it makes development significantly easier. We’ll be able to react quicker to customer feedback, allowing us to offer new features, bug fixes, updates and improvements in a much shorter time.
What does the process look like?
For a start, we had to listen to our customers! We’re very data-driven here, but it was really important for us that we got our customers’ voice represented in all aspects of the reboot. After all, that’s who we’re building this all for.
As soon as we had something usable, we invited regular customers to preview what we were up to. Releasing early like this gave us lots of valuable feedback that’s gone on to help drive and shape our roadmap. We follow a Lean approach to development, meaning we’re able to react and adapt to market demand quickly. Tight cycles of building, measurement and then critically learning from those results to improve the next iteration that we push out, which can happen multiple times a day.
Listening to our customers has definitely helped us focus on what’s important; we’ve made big improvements to search quality, navigation and working on long-awaited functionality around playlists, wishlists and persistent baskets. The latter being essential when you’re browsing and purchasing across devices. We want to make sure you can pick up where you left off between sessions, something we know our customers are very keen to see. This is along with resolving small, but long-standing, issues and annoyances with our current site to make the whole experience smoother.
Last, but not least, we’ve put in a great deal of effort rebuilding things under the hood that will allow us to deliver updates faster and more reliably. That’s principally seen us move from a C#/.net stack to the leaner and meaner powerhouse of node.js interfacing with our platform’s API, in the same way that any client of our platform does.
How have you coped with the challenges of creating & publishing content that works well on desktop interfaces, tablets and smartphones?
Simply modifying a website’s layout to make it adapt to different screen sizes isn’t really what responsive web design is about. You’ve always got to be thinking about context and location in everything you build. While a certain feature may work beautifully with a full-size keyboard, a 24” monitor and a nice comfy chair, it’s probably going to struggle when compacted down to a 5” screen on a crowded bus with just your thumb for use.
Spend time addressing each breakpoint individually and don’t assume you can get away with a one-size-fits-all approach. Be prepared to compromise on the more esoteric elements of your site for the sake of usability across devices. At the same time, you must carefully tune each view to its context; hover effects make no sense on touch devices, for example, but really impact on responsiveness and feel when using a mouse. Consider optimising for fast, task-based activity on mobile and more of a lean-back ‘browse’ experience on larger screens.
The greatest challenge we’ve encountered, however, is testing. It’s hard! The device and browser landscape is incredibly fragmented. While there may only be a few operating systems, there are tens of thousands of browser, device and resolution combinations, all with different capabilities. It’s essential to make use of your analytics data and feedback to decide where you need to focus on creating the optimal “A-grade” experience for the majority of your customers and then working on a ‘best-fit’ gracefully-degrading experience for the long-tail.
What tools/frameworks have you used to help you develop the new responsive website at 7digital?
We opted not to take a framework approach, as they can sometimes be a little dogmatic and presumptuous about what you’re trying to achieve. We’d rather be in control of the product. Instead we make use of a number of open-source projects and libraries to build out the site, such as our own API client for node.js, handlebars for templating and SASS with Compass as the basis of handling the CSS that ultimately determines the responsive layout.
Outside of specific tools, from the start it’s fundamentally important you create a strong design-system that works for the content and then build the underlying scaffolding to support that. As the age-old mantra goes, ”content is king”, so ensure you design your content first and then build a site to show it off at its best, rather than trying to shoehorn content in. We’ve put lots of effort in changing how we author and publish content so that it follows this approach. If you’re authoring lots of written content for a site, the tool you use to author it should be concerned with the content and not the design; let the site display it at its best and concentrate on writing great structured copy. A lot of older CMS don’t suit this, and this is an area you may need to rework when going responsive; layout-agnostic and content-first.
How are your measuring your online metrics, and how often?
We test everything and assume nothing. We’re students of the Lean Analytics methodology and our primary tool of choice is Google Analytics, where we’ll monitor usage of new features and adapt based on how well it’s performing against our desired goals. Our release cycle means we can watch activity and engagement within hours of new features being released.
Having lots of quantitative data goes long way to understanding your customers, but validation truly comes from talking to your customers. We’ve toyed with session tracking and split-testing as other methods of getting feedback on progress, but feel these bring the biggest benefit a little further down the line where you’re looking to run micro-optimisations and experiments on a feature-by-feature basis.
Is designing a responsive website a part of a wider mobile web strategy?
Undoubtedly so. With the feedback from our customers and through looking at usage patterns, it’s definitely an area that we will be putting more focus on. Not to the detriment of laptop and desktop users, of course, but we can’t ignore the changes both in the way people are get online and how they desire to experience music. Fully supporting mobile devices is one other way we can continue with 7digital’s mission to simplify access to music – staying agnostic of device and location and putting choice back into the hands of the consumer. Our goal has always been to create a service that supports everyone.
That means going beyond just ‘mobile’ devices and ensuring we’re available on things from connected TVs and multi-room audio to emerging technologies like wearables and ubiquitous computing in general, and whatever the future holds.
What are your future plans for improving 7digital’s user experience?
We are always working on improving the service; small things here and small things there that all add up to making it a better experience. We’ll definitely keep listening to our customers and getting them more involved in helping us build a service that they want. Our initial preview period of the site changed the nature of our roadmap and will now launch with a much better feature-set than we had originally planned for.
We may be working to accommodate different audio file formats and we’re looking at what we can do with streaming and radio, recommendations and improving the quality of the music metadata we serve. We’re in such a fast-paced market that it’s tough to predict what we’ll offer next, but I can confidently say we won’t rest on our laurels and strive to continually improve the unique and open music service that we’re grateful to be able to provide.