Published on <a href="https://blog.prototypr.io/client-project-travelling-with-the-telegraph-472437002d16?source=rss----eb297ea1161a---4">| Prototyping: From UX to Front End &mdash; Medium</a> Holly Hamlett 
Re-visiting the travel section to create a cohesive design for reviews across The Telegraph website.
The Telegraph wanted to modernise the review presentation for reviews across the website. My team &amp; I re-visited the existing user journey, focusing on the review page for Travel, a key source of revenue for The Telegraph. Taking a user-centered approach, I designed an updated look for the review page, combining the existing format with a more modern and user friendly design. When presenting to the UX and product teams, they were incredibly happy with the work that had been done in the 2-week sprint and took some of our ideas into their own design sprint.
<h3>Brief Interpretation</h3>
The Telegraph wants to re-look at its review format for the key money making departments, with a view to creating a universal review format, which would create better parity across the website’s commercial ventures. Along with this, they would like to increase user click through to third party vendors. The brief was very broad, which gave us licence to think big with our solution.
<h3>Competitor Analysis &amp; Stakeholder Meeting</h3>
Before meeting the stakeholders, it was important to see what formats and features The Telegraph’s competitors were offering. We chose a variety of publications and online retailers as well as review sites as we felt it was important to get a sense of the other places that The Telegraph readers may find their information. In total we viewed 9 direct and indirect competitors including a luxury travel agent and Which? as well as other publications (magazine &amp; newspaper).
<img alt="" src="https://cdn-images-1.medium.com/max/1024/1*DQiFsnsv1PB_ErydtCZE1A.png">Direct and Indirect Competitiors
We also looked at the usability of the existing site. The route to find hotels was quite extended, and once a user has clicked onto the review page, the information above the fold was limited. One thing the we also noted was that while the information in the review was detailed and well thought out, the review itself is very long. In addition, the booking bar was fixed at the top, so if a user wished to book they would need to scroll all the way to the top to continue. While not wanting to influence any user driven decisions, these were things we wanted to take into account.
We attended the stakeholder meeting on the Monday following the brief. It was a great opportunity the meet the teams that are responsible for the departments we would be looking at, including the lead UX for Travel, and get a bit of insight into their aims for the project. The brief was purposely vague, and we were wary of narrowing it too early on, but we established in the meeting that Travel was their highest income area.
<h3>Finding Users &amp; Common Themes from the Interviews</h3>
There were 2 main concerns when seeking out user interviews: primarily that those who read The Telegraph are a wide age range, and secondly that The Telegraph was quite a politically oriented newspaper. As the team found out early on, it was difficult to find users in certain age groups (especially 18–25) who did read The Telegraph. With this realisation, we changed the focus of the questions to establish behaviours when users are shopping for higher ticket items and reading reviews.
Ultimately we conducted 13 interviews, across a broad age range. These were both people we knew were The Telegraph readers and those the team had found through a screener survey. All of the people we interviewed
Having completed the user interviews, we wanted to glean key themes from our interviews to inform any design decisions and get a better understanding of our users. Using affinity mapping we found 22 common threads in the interviews, but with the overarching themes of:
Fear of making the wrong choice — users were worried about areas where they didn’t have a prior knowledge, about losing money or being mislead, and about having time to think and reflect on what they had read.
<blockquote>“I’ll read reviews for everything because there’s too much choice nowadays.” — Carl, 38</blockquote>
Being fully informed — Users were concerned with making sure that they were fully informed without making a decision.
Validating decision — Users sought validation when purchasing or reading reviews, often from friends and family. They most trusted reviews that were had similar demographics to them.
<blockquote>“My main criteria is value for money, quality and reliability.” — Rodger, 69</blockquote>
Value to the individual— Users found value in flexibility, authenticity of both experiences and reviews and good value for money.
<h3>Narrowing the Brief &amp; Creating Personas</h3>
At this point we decided that there was enough research to narrow the brief and focus on the Travel section. All the users who completed the screener survey read reviews when deciding to book a holiday or hotel which, combined with the fact that it was The Telegraphs highest income area, made it the logical choice.
With this in mind we brought the user research and themes together to create personas for the project. We had been given personas with the brief, but during the stakeholder meeting had established that these were approximately 4 years old and the stakeholders were happy for us to create new personas for the project. We decided to create proto-personas from 3 different age groups as the research suggested that the behaviours and motivations of these groups was quite different; this was then narrowed to a primary and secondary persona to take forward into the project.
<img alt="" src="https://cdn-images-1.medium.com/max/1024/1*eqAuwdcEVhcNwchn8KzADQ.png">Primary &amp; Secondary Personas
The first and primary persona was a couple, Alan &amp; Joan, who are newly retired parents of 3 adult children. In the original set of personas, many had been couples and this was supported with our user research for this age range, that decisions regarding large purchases or holidays were almost always made together.
The secondary persona was Jess, who is younger at 37 and works as a financial analyst. She likes to do research and tends to be the decision maker in her friend group, which is the people she usually travels with. In Jess’ case, she is the one who coordinates trips as well.
<h3>Design Studio</h3>
The team met with the stakeholders again to complete a design studio and get the ball rolling on the design solution. We presented our research and the new personas the team had created, followed by the design problems we had identified during the course of the user interviews and our own assessment of the existing website.
<img alt="" src="https://cdn-images-1.medium.com/max/1024/1*t6A2kIfIClIwx8dHVGqfIQ.jpeg">Design Studio at The Telegraph offices
The first concerned Jess and how to convert her from a researcher to a purchaser.
<blockquote>“Jess likes to know all her options and does extensive research on purchases. Part of her research takes her off The Telegraph to validate. How do we make her a qualified customer?”</blockquote>
The second was aimed at Alan &amp; Joan &#8211;
<blockquote>“Alan &amp; Joan want to do some wine tasting in Bordeaux. They are reading hotel reviews on The Telegraph but they have no easy way to compare the hotel reviews and map out their journey.”</blockquote>
Some great ideas were generated during the course of the two design studios we ran with the stakeholders, some more ambitious than others. Being able to view hotels/locations on a map seemed to be a common theme, and one that was brought up more than once during the interviews. Several people had also come up with the idea of being able to enhance the trip or visit by either booking or showing activities and attractions nearby, or car hire and other travel necessities.
Another idea that had come up was the idea of a route planner, or a way to customise an itinerary. This was greeted enthusiastically as it would also be a way to encourage additional bookings, thus bringing additional revenue for The Telegraph.
<img alt="" src="https://cdn-images-1.medium.com/max/1024/1*ocLSViifyzcXG5opZw5byQ.jpeg">Paper Prototype Sketches
<h3>First Sketches &amp; Testing</h3>
We continued our meeting following the design studio in the lobby of The Telegraph building, enjoying the creative flow we were on and anticipating that one of the team would be away over the weekend and therefore not available to meet. From this we created a few initial sketches and tried to decide a direction and a firm design solution.
One thing that had been a recurring comment from our interviews, specific to travel, was being able to view locations on a map to get a sense of location. They also wanted to know about the surrounding area, such as areas of interest and weather. This wasn’t a function that was currently available on The Telegraph website and as such we wanted to include it in the design.
Ultimately we decided on the idea of creating an itinerary of hotels which could all be booked though The Telegraph, a sort of tour planner. We met the following day to sketch out the paper prototype and begin testing.
<img alt="" src="https://cdn-images-1.medium.com/max/1024/1*yVdI0ms5tBYLw_vvyZqu-A.jpeg">Initial Paper Prototype
It tested horribly. Users weren’t sure of the process, and the UI was unclear to most of the users we tested with. One user I tested, who had experience in the travel industry, also explained the nuances that hadn’t been thought through with the concept — that an itinerary would also need to include car hire and other activities near the area, as well as instructions of how to get from A to B. The team met again and decided to revisit the design solution.
<h3>Re-sketching &amp; Moving into Digital Wireframes</h3>
Having had such poor testing it was time to revisit the research and the product, as well as the outcomes of the design studio, and we refocused the project around encouraging users to return to The Telegraph when they ultimately clicked-away to do more research on competing websites. To this end, we developed the idea of being able to save reviews so that, having verified the review, the user can come back to book through a site that they trust which had been brought up during the user interviews.
<blockquote>“I’d like to be able to save things so I can read and think about them.”</blockquote>
Rather than having to have multiple tabs open, the user would be able to save any reviews that interested them and return to them later.
<h4>Iterating for Low and Mid Fidelity Prototyping</h4>
While the idea tested well, one issue that cropped up was where to ‘host’ the saved items. The Telegraph currently has a subscription system which (having signed up ourselves) we knew was a simple process. We decided to ‘host’ the saved items on the launch page of the profile as it was a beautifully blank canvas. As we moved into digital wireframing, new issues came up, such as how the user would access the profile page, as it wasn’t immediately obvious in the existing design. The iconography we initially chose for the user to be able to access their saved items was confusing and, as one user pointed out, a bit redundant as it was on the profile home page.
<img alt="" src="https://cdn-images-1.medium.com/max/751/1*aj3Id5CnzZyUp_Wxb60-SA.jpeg">
<blockquote>“I’m not entirely clear what this icon means… can I phone someone?”</blockquote>
When we removed the ‘clipboard’ icon and added a smaller notification, users were still confused, so instead we decided to bring notifications on as part of the on-boarding process, with a pop-up message letting the user know that their item has been saved the first time an item is saved, and instead used the change of state of the ‘Save Review’ button to communicate this.
The ‘Save Review’ button was another major hurdle. It was initially placed with new floating booking box, however when we tested, users were unsure what it was that was being saved
<img alt="" src="https://cdn-images-1.medium.com/max/1024/1*nLE_vJgb9wMNWZMaoCDBqQ.jpeg">
<blockquote>“I’m confused, am I saving the price or the review?”</blockquote>
When it was moved to above the fold and away from the booking box, users were still unclear so the copy was amended from ‘Save’ to ‘Save Review’.
Users also commented on how cluttered the global navigation felt, especially once we had added access to the profile page.
<blockquote>“It’s a bit of information overload to find what I want”</blockquote>
Although we were using the existing The Telegraph global navigation, we decided to take a risk and amend it as a suggestion. We had assessed these navigation items and discovered that many of them are duplicated in the menu. These were removed to make way for the direct access to the profile page, which cleaned up the look of the global navigation without impeding the users use of the website.
<h3>Prototype</h3>
<img alt="" src="https://cdn-images-1.medium.com/max/1024/1*nJGh-mt_XVuwzJkp9Av3uw.jpeg"><a href="https://invis.io/8ZCV59OCY">Click Here to View</a>
<h3>Next Steps</h3>
<ul>
<li>On-boarding of new &amp; existing users</li>
<li>Sharing and personalisation of boards</li>
<li>Showing local area content for restaurants or local attractions on map</li>
<li>Testing implementation across other product reviews</li>
</ul>
<img src="https://medium.com/_/stat?event=post.clientViewed&amp;referrerSource=full_rss&amp;postId=472437002d16" width="1" height="1" alt="stat?event=post.clientViewed&amp;referrerSou">
<hr>
<a href="https://blog.prototypr.io/client-project-travelling-with-the-telegraph-472437002d16">Client Project: Travelling with The Telegraph</a> was originally published in <a href="https://blog.prototypr.io">prototypr</a> on Medium, where people are continuing the conversation by highlighting and responding to this story.

Client Project: Travelling with The Telegraph

Top Stories