Experience It Like A Local
Part 2 — Develop and Deliver
A UX case study on the mobile first design of a local experience booking service for ACE Hotels London. This is part 2 of 2 where I talk about the develop and deliver phases of this project.
Develop
To kickstart the third phase of our double diamond process. As we diverged to create, test and iterate solutions a design studio was held with the 3 members of the UX team. The goal was to align the team on an understanding of our problem space. As well as share ideas and come up with a collaborative design solution to that problem. The problem statement set for the studio was as follows.
Design Studio Problem Statement: Claire has checked into her room at ACE Hotel Shoreditch. It’s her first time travelling to London on business and she would love to get more of a local feel for the city. She has some free time in her work itinerary tomorrow afternoon in between a morning meeting and a work dinner. But she has no idea what she wants to do or what will fit into her schedule.
A total of 3 studios were held as we sketched, pitched and critiqued our designs. The output of the first 2 sessions suffered from the critique that leant towards the negative rather than constructive. This caused us to focus solely on our own designs. Endeavouring to refine them so that we could communicate them better. This, in turn, inhibited the final output of both studios as we tried to collaborate on a single solution. There had been no collaboration earlier in the studio. No stealing of ideas and inspiration from each other, so we were unable to come to a solution we were in agreement on.
After recognising this through discussing what we each felt was going well and what could be better we conducted the final studio. Comfortable we had reached a combined solution we all valued, the final output of the studio was wireframed. This paper prototype was tested on our design and developer colleagues at General Assembly. The task was to locate and book an experience happening during your stay that fit into a gap in your schedule between 2pm and 5pm. From this, we received some of the following feedback for the next iteration.
- “It’s a very long process if I’m ready to go show me the experiences first”.
Our initial idea was that the user would start by entering the dates of their stay before viewing any experiences. The hope was that this would avoid discovery of an experience unavailable during a users stay, resulting in disappointment. We felt the intention was still good but agreed that the service should be flexible. It should create excitement to use it by showing the end goal up front and centre — the experiences.
- “Filters get lost on screen, have my search results changed at all?”
It may have been due in part to the low fidelity nature of our paper prototype. As such something that would become clearer as we moved into a more refined digital version. Yet it was helpful to hear from testers how important it was to know if they had active filters and what those filters were. This tied back into our competitive analysis and the discovery that being controllable was an area of opportunity that would provide value to our users.
In addressing this feedback we moved into a mid fidelity prototype produced in Sketch and started testing the subsequent design iterations with our target users. In going from a mid to high fidelity prototype to present as our MVP at the end of the sprint we moved through 3 rounds of user testing and iteration.
One of our key areas of iteration was the balance and organisation of the content on the home screen. Or in other words its Information Architecture (IA). We wanted people to know exactly what this service would do for them as soon as they landed on this home page. We also wanted to create a sense of excitement for the journey ahead by having experiences visible from the start. In the screens you can see below I would like to direct your attention to the ‘Search Dates’ button in our low fidelity paper prototype. When users tested said — “I’m ready to go show me the experiences first”. We could see there was an issue with the hierarchy of content we were showing them. The button in question was yelling for their attention. While the experience card peaking up from the fold was not considered as important. Was not encouraging a first time user to scroll down and discover it.
To solve this problem we started by reducing the size of ‘Search Dates’. Then settled on a single styling for interactive elements. Fostering a sense of familiarity for the user as they started to interact with the service. Introducing a primary colour for these elements to reinforce that familiarity. As well as communicate to the user at a glance that this is the next step to achieving their goal of booking an experience.
However, as we conducted further user testing on our mid-fidelity prototype we realised that users didn’t know what type of experiences they were going to find when searching dates. Were they “small local experiences” or “bigger touristy experiences”. This uncertainty affected their desire to take their next step. In terms of creating excitement, we had fallen short. The visual and written content should have been communicating what this service was all about. In considering how to solve this we reflected on the clients’ goal to optimise this design for mobile first. To do so we needed to refocus on what the core experience of our service was and embrace the constraints inherent in designing for a small screen.
With this new perspective, we made the decision to remove both the sort and filter functionality from this screen. By doing so we were also scrapping the idea of having every available experience visible from this first screen via scrolling. This would have overwhelmed the user and was not in line with our goal of guidance. It was important at the same time to not remove control or flexibility from our user’s hands. Instead, we were refining this control. Claire would still be able to see every experience if she wanted to but this initial screen would be a focused taste at first. We introduced an accent colour to our palette by drawing from the mood-board you see above. Which also served as research into the visual design of the service to fit within the brand qualities ACE Hotel already had in place. This accent colour was used to draw the users eye towards a curated list of experiences we called the ‘Summer Feature’.
As we further explored the visual side of the brand and decided on a font pairing to implement in the high fidelity prototype. We were able to refine the typographic layout and condensed a lot of the written content around ‘search via date’ to the very top of the screen. This, in turn, gave us a new prime space to design for that would be seen immediately by the user when first coming to the service. We decided to use this for a high impact full bleed image that would fade through to other images. Each of which was one of the experiences available in the ‘Summer Feature’. All of these changes were made in order to create balance between eliciting excitement in the user, showing them available experiences from the get go and clearly communicating their next step in booking an experience.
One other area of note before moving on was the hover states. Which I discovered during this project work very differently on mobile when there is no cursor pointing at an interface element. A finger cannot hover because as soon as a finger touches the screen it is interacting in one way or another. Be it scrolling content, long pressing to save an image or tapping on a button. So in order to not cause users frustration we had to make interactive elements very clear. We did this through the thoughtful application of our primary interactive colour blue #007AC1. As well as the use of what Googles Material Design refers to as the metaphor of paper and the use of light and surface to convey affordances to the user. You can see an example of this in the subtle colour shifts and the addition of shadow, between the background of the website and the menus and images that sit above it.
Deliver
We presented the final solution to our design and developer colleagues at General Assembly. Focusing on our process and backing up design decisions via this process. The final prototype represented a single focused user journey through the service. I encourage you to explore this prototype yourself below.
When using the prototype try and complete the following tasks. Maybe even pull up your favourite note-taking app and rattle down a few thoughts as you think through each one. I would love to hear your open and honest feedback in the comments below. Anytime Invision prompts you with a ‘click this’ blue box tell me why you interacted with that piece of the UI that didn’t do anything.
Setting the scene: You’re staying at ACE Hotel London Shoreditch from the 13th through to the 18th of April 2017. You have just checked in and have discovered this new local experiences service they offer.
Side note: I have provided the number of interactions required to complete each scenario as I’m not there in person to hand you each new task at the right moment.
- Task 1: Find a list of experiences that are happening during your stay (7 interactions).
- Task 2: Refine this list so that you can find an experience that is close to your hotel (3 interactions).
- Task 3: You have some free time tomorrow (Friday the 14th) just after midday and before a business dinner that night. Refine this list to find an experience that will fit in your itinerary (3 interactions).
- Task 4: Explore your list of experiences. Your interested in booking an experience that will give you some more history about the area in which your staying. (4 interactions)
We undertook a start, stop, keep retrospective individually upon completion of the project as a way of reflecting on our process and the solution it lead to and then shared these among the team. The following are my original reflections and some included after thoughts taken from our group discussion.
Start
Get testable ideas into the hands of users faster and more frequently. This helps establish an atmosphere where you’re not afraid to fail.
Make a plan and establish user testing as a regular review that you know is coming and can meet. Ensure through this testing, that you are addressing your users needs and designing something that is indeed usable. In short, don’t worry about making prototypes too pretty or too clear. If you have recruited testers who are ready to join you on the journey you are trying to design then the learnings will be invaluable.
Stop
Delving so deep into a single area of interest that you are blinded to the rest of your process.
In this case design patterns. Spend enough time to learn the basics or refresh yourself. Then ask the question what value will this bring to my solution. To bring context to this reflection — One of my roles during this project was to move our wireframes into high fidelity. During this step I became too focused on Googles Material design patterns. They were an excellent source of information in terms of implementing components that met best practices. But from a different perspective I may have become too reliant or focused on these patterns. I was not fully considering the deeper context and asking if this was the best solution for my user. I was instead erring on the side of — this is the functionality I need and this component meets that requirement.
Keep
Practicing active listening. Empathy is the biggest must have soft skill for any designer looking to understand their users.
You cannot have empathy if you cannot stop talking and start listening. Not passively listening but actively listening! No one will want to understand you if you don’t try to understand them. It’s a two-way street and through active listening, you will both benefit and leave the conversation with new insight and inspiration. As I mentioned earlier in this case study we had issues and unproductive conversations during our initial design studios. It was only through active listening that we were able to rectify and salvage the output of this activity.
A key moment of this project for me was when I was entrusted with scripting and conducting our user testing. Welcoming our testers to the session and making them feel comfortable. Reassuring them that we were not testing them. We were testing the design and as such if they could verbalise their thought process as they moved through the prototype that would be incredibly helpful. Ensuring the task users had to complete was clear but not leading in any way so that pain points they experienced were not because of bad instructions.
Thank You Fist Bump 👊
Thank you for taking the time to read this case study, even if it was only a portion of it. If you have any feedback or questions I would love for you to share them. As you may already know my name is Tim Hazzard, I am a UX Designer and somebody who is always positive, always trying and always curious.
Most recently I have completed a 10-week intensive course at General Assembly London. It refreshed me on methodologies I had learnt before while studying Industrial Design. It also gave me the practical skills to enter the industry as a UX designer.
