The design sprint that brought us the homepage for the Ocado iPad app
Sometimes a sprint is better than a marathon. Deciding to design the homepage of the iOS app for iPad was a big challenge that involved time, effort and dedication from various different departments within Ocado. Choosing a sprint allowed the team to not only create the new iPad homepage design from scratch, but also have it fully user tested first version, all within a week!
This becomes an achievable goal when using the sprint methodology, because everyone involved contributes their ideas throughout the design process, rather than the traditional approach of a designer creating a complete product, presenting said product, receiving feedback from the various teams and then beginning another redesign – a process that can have countless iterations. Gathering everyone in a room for a week meant we could learn fast from our mistakes, agree on our goals and vision and reduce the internal feedback process considerably.
Other than the obvious benefits associated with a design sprint, the other reason was… well, why not? After all, we are a technology division and pride ourselves on our drive to progress and try new things, so why not explore new methodologies and techniques?
How did we do it? This can be summed up with one word – “teamwork”.
As this was a new approach we decided to follow the guidelines of the sprint book, which gave us a recipe to follow. We did, however, adapt the process somewhat and adjusted the guidelines to our needs.
A timeline of the Ocado iPad homepage design sprint
Before delving into the details, it is important to set out your agenda. There were some questions that needed answering before we could begin: What do we want to focus on? Who do we want to invite? When are we going to run it? How are we going to communicate this approach to the business? Do we need any materials? (Pens, whiteboard, post-its? Obviously any technologist will know we always need more post-its).
It is important for a design sprint team to be diverse in their skill set – make sure you have a range of employees with different roles and specialisms. You also need to ensure there’s someone who has a clear vision for every element of the design – the business goals, research and user experience, product vision, technical knowledge.
A design sprint team should have around seven or eight members. If there are more, it will be harder to reach a consensus on any feature ideas. After answering the initial questions (and buying enough post-its to wallpaper the entire building), we cleared everyone’s calendars for a week and started calling Ocado customers who favoured the iPad app to prepare for the user testing phase ready to begin. The pressure was on.
Before we get into how we did it, please be aware that this is an account of the highlights of our own design sprint. We do not necessarily suggest you use this as an exact guideline for your own design sprint. For that purpose, please read the book.
The purpose of our Monday morning session was to gain a general understanding of the business goals. Members of the sprint team from user research, retail and product owners presented all the information they had related to the long term vision, strategy, KPIs, statistics and market penetration of Ocado for iPad. Our aim was to provide a better landing page for users transitioning from the mobile version of the Ocado.com webshop to the native iOS app, by designing a homepage for the app that felt familiar and easy to navigate. We started by building a flow map representing the user journey of a typical customer visiting Ocado.com to place their first order.
First, we settled on an area of focus – the homepage – with the help of our appointed sprint lead. The sprint lead was a member of the team who helped us make judgement calls quickly; they had the final say whenever a decision was needed. We wanted to make sure we stayed on track throughout the week ahead, so we all wrote out our ideas about the vision and mission for the project, which would act as a reminder for the upcoming exercises. Can we create a transparent transition between web and mobile, and help the customer find the products they need in a fast and intuitive way?
Tuesday brought two new challenges: The morning was about research. We knew that we wanted to redesign our iPad homepage, but now it was time to explore how our peers and competitors were designing retail webshops for the iPad. We spent the majority of the morning browsing; collecting images from Pinterest, Dribble and the internet at large to start the ideas flowing. By midday we were debating good and bad user experience and had a lot of new ideas buzzing around. These ideas, alongside the business goals and user research from Ocado, got us thinking about how to design a coherent homepage.
It was then time for the first sketches; boxes containing a word, sentences, a flow, an image – anything you liked, really.
Everyone penned their first ideas and stuck them up on the wall. The team then took a silent vote on the ideas they thought were most promising, and began to share any concerns and suggestion. By the end of the day, each member had created their own wireframes (a more advanced and detailed sketch) and a three page storyboard detailing how they imagined the iPad homepage.
Wednesday’s aim was to select one storyboard or idea to use as a basis for the sprint and to then create a more detailed version. After discussions, the team lead chose from the eight storyboards on the wall. Their task was to select the approach that showed the most promise in terms of the business goals and the vision of the design sprint.
We spent the day creating a detailed storyboard. Instead of three pages, we now used as many as needed to tell the story: a user visits Ocado.com from their device and sees a notification at the top right corner – ‘Why not try the Ocado app?’ – the customer then goes to the Apple Store and downloads the app. The customer opens the app for first time and are offered an onboarding experience when they land on the homepage (the onboarding process is when you receive tips and instructions on your first visit to a page).
This level of detail helped to build the prototype that would be needed on Friday for the user testing.
The penultimate day could probably be summed up easily as ‘divide and you will conquer’.
We had put aside the day to build the prototype, but this seemed like an insurmountable task – we had to break it up and divide the responsibility in order to have a chance of creating a real world product by the end of the following day.
Everyone in the room chose a role. A small group was in charge of the graphic design, others started building the technical background for the prototype, someone else decided to find the right images and copy, another member started creating the script for the user testing and lastly somebody took charge of reviewing all the inconsistencies across message, navigation and colours. The challenge was to make the prototype as real as possible, while understanding the time limitations.
The moment of the truth arrived on Friday. After four days of intense work, we watched remotely as the user testing took place in our head office in Hatfield. While the session was ongoing, the team made notes on customer reactions and patterns in how the prototype app was used, in order to compare and analyse the results. The good news was that we made significant progress; everybody understood the homepage and navigated it successfully – the user experience was, on the whole, positive.
What we learned
- Never underestimate the power of a design sprint. We didn’t know what to expect when we started the workshop, and it was amazing how quickly we could learn internally for other areas in Ocado and externally with customers.
- Never underestimate the power of the MVP; building something small, testing it, gathering feedback from our customers, improving upon it and continuing to build. The faster we test, the faster we learn.
- If we want a change in the way we work, we should make it happen by ourselves, instead of waiting for someone to wave a magic wand. The methodologies and the technologies are all there, it is just a matter of taking that first step.
Stage one of the iPad redesign is in production and has been launched to 100% of customers. There was lots of great feedback, but there is always room for improvement (tip: never let yourself become complacent).
In a week we proved the concept, followed the idea through and tested the prototype for the iPad homepage. We’re now keen to hear from you! What have you achieved with your own design sprints?
Patricia Botta, Senior UX Designer