[eBook] eCommerce: Beyond the Front-End
How to Develop an eCommerce Website Focused on the End-to-End Customer Experience When it comes to eCommerce websites, beauty is…
From the moment we’re in the studio at 7:30am to when the last team member switches off the lights, our Nespresso machine is working overtime to fuel our coffee
We’re always surprised at the contrast between our experience of Nespresso’s great products and their out of date and frustrating online ordering process we use (probably a little too often) every time we need to restock our capsules. It would be great if Nespresso ran a subscription service, given the amount of time we spend logging in, selecting and paying for the same order each month!
Olly, our Creative Director, is never one for missing an opportunity to improve digital experiences. As a personal project, he decided to use Nespresso as a test case to start the studio’s migration to Sketch, which is currently disrupting the design industry by challenging the dominance of giants like Adobe. I sat down with him over (another) coffee to discuss the benefits of using Sketch, and reimagining the Nespresso site.
Olly: We’ve had a Nespresso machine in the studio for over year now and always found it a shame that their web presence doesn’t match the quality and experience of their actual product. So I decided to (finally) have a play around in Sketch, looking at Nespresso’s user interface as a personal project.
Ben: I’ve been hearing a lot about how Sketch is becoming a really viable alternative to Photoshop for digital designers. What stood out to you when you were getting your head around things?
Olly: We haven’t found an immediate need to bring Sketch into the studio so far, as we’re so comfortable using Photoshop. I can design efficiently within it, although there have always been issues with speed, due to the size of the program. This is the main difference with Sketch, it’s so stripped back and lightweight, it feels so much more responsive and quicker to use (as soon as you get your head around the shortcuts).
Ben: This was a personal project that you’ve been thinking about doing every time you placed a coffee order. So despite the fact that we’ve not spent a huge about of time researching user behaviours and following the usual UX processes that we’d normally follow with our projects, do you think Nespresso would like what you came up with?
Olly:Although this is simply a reimagination of the UI, I definitely think they should be able to see how this approach would be a marked improvement on the current experience. I wanted to demonstrate how small design decisions can impact the overall user experience.
Ben: So what process did you follow?
Olly:I wrote a blog post a while back explaining the importance of guiding users with colour, essentially it’s the simple principle of using a specific colour for all call to actions relating to, for example, ‘making a purchase’. Currently, the Nespresso site bombards the user with blues, yellows, greens and multi-coloured hero images, with no clear user journey. By stripping back the overall UI, we can draw focus to key CTAs such as ‘Quick Order’ or ‘Add To Basket’
Ben: One thing that really stood out to me is how much their content is being constrained, with a UI design that feels much more closely related to an internal corporate intranet than what you’d expect for an aspirational lifestyle brand like Nespresso.
Olly: It’s a shame that they’re not taking advantage of the great assets at their fingertips. The current homepage limits them due to small hero areas and tiny product thumbnails. Also, by having a mobile-version rather than a fully responsive site, the user is presented by a completely different experience when browsing on their phone. The site also performs poorly on tablets, requiring users to drag around and zoom in.
Ben:I’ve got a Nespresso machine at home and as a customer visiting the site for the first time to order capsules, I didn’t find it immediately obvious how to do so!
Olly: Yeah the site is certainly asking a lot of the user from the outset. To help this, the ‘Quick Order’ button is dominant in the main navigation bar, which takes users straight to the capsule ordering page. Without trying to implement anything to complex, I’ve also tried to address this by pushing content in the hero and mocked up 4 full-width content blocks to push the most important content, whether that’s, coffee, machines or accessories.
Ben: As you say the UI changes you’ve made are not overly complex, but they really do make a big difference to the overall experience of the page.
Olly: Definitely. By also tweaking the colour palette to better represent the main offering from Nespresso… i.e. coffee, and switching out the blacks and greys for dark browns and earthy tones, I think it better portrays their product, whilst seeming a lot friendlier and easier on the eye for customers. By making simple design decisions around layout, typography and navigation, you can contribute to an improved user experience and increased conversions. I’ve uploaded a couple of the iterations to Invision.
Ben: So what about Sketch? Are you guys going to carry-on using it?
Olly: 100%. After using the trial, we’ve now purchased full licenses.
Enter your details & we'll be in touch to discuss your project