Pine

Design & development of a bespoke website for a travel startup: Like Locals case study

How we expanded a travel startup’s customer journey by building a website that tapped into the research and inspiration phase of travellers.

Introduction

Background

Like Locals is a travel media startup on a mission to inspire and empower curious explorers to uncover each city’s unique culture. They do this by blending invaluable community-driven local insights, immersive storytelling and innovative tech. Currently, they are operating in Budapest, London, Barcelona and Athens, with new cities expected to come.

Pine was hired to work with Like Locals to host an ideation workshop in the early stages of designing the mobile app. At the time, from Pine’s side, there was a researcher whose part was critical to our work, doing social media listening, interviews with the users, content analysis, etc. A UX designer was also involved, accountable for the wireframes, helping the researcher’s work and keeping a clear communication between the departments. A UI designer was responsible for all the assets, the picture-perfect design and every visual needed. A developer who brings all this to life, by coding the back- and front-end of the project while the Head of Design at Pine was responsible for overseeing every area of work and navigating the team into the right direction.

Mobile products can be really contextual—they can understand a user’s environment or mood: they allow for the ability to personalize to a degree that was previously unimaginable and the existing product could fit right into this form.

On the other hand, Like Locals felt something is missing from the big picture as the whole customer journey was somewhat fragmented. They wanted to provide a more thorough and extended, end-to-end experience to the user by tapping into other phases of the customer journey in a way that is going to complete the experience. In this case, it is not the in-destination exploration but the pre-planning phase of their future journey.

By that time, they had a blog where people could find some super helpful tips and takeaways for their upcoming trips. Also, there was a website, introducing the app, its characteristics and features, which only acted as a landing page. Thus we decided to expand the existing scope of Like Locals and take advantage of all the potential opportunities that a website could offer.

Project’s Goal

We agreed to develop an all-encompassing website that mimics the behaviour of the app in terms of finding and learning about new places. The goal, however, of a website is different from the mobile app: we don’t expect people to spend too much time on the app, but rather it provides them with quick and contextual bits of information. They would take longer but less frequent interactions with the website that could fulfil the missing things and steps: helping the users plan and get inspiration before their travels.

Therefore, consolidating all of their existing content and data (the ones from the app and the ones from the blog) seemed like a trivial step. The need for another platform that is more for researching and getting inspiration was self-evident, while it totally resonates with the app and completes the scope of the mobile application. This would facilitate the inspiration and planning phase of the customer journey, which begins way before the actual trip. 

User research

Google it! The first step of any research is to google the questions and hypothesis and see what is already out there. Interestingly, it had already answered 2 of our 9 questions. We found some articles that were published for some huge competitors as a marketing research study with the same assumptions we had.

To create something that people would actually use, we had to identify common patterns in the content that people were sharing before their trip. To investigate these patterns, we made some preliminary interviews, social media listening and then analyzed our collected content to build a sense of the problems that our audience was facing.

We laid down our assumptions and hypotheses and tried to answer those open questions we had on our conversion funnel. For instance, we found out while doing social media listening, users love sharing stories with decent photo galleries. When LL implemented this idea to their blog posts and shared galleries of photos with a story, they had 3 times more exposure with their content.

Further, the content analysis of Pinterest (mood)boards, what people usually collect and what kind of content they draw inspiration from, could be categorised either as hedonic (e.g: a beautiful picture of a city/place) or practical (eg.: how to pack for a month-long road trip). Analyzing these boards and their aesthetic or „bucket list” completeness, gave us even more presumption about what the users seek after. 

Also, to find the best practices in content management, at this phase of the process we conducted an interview with a marketing expert from our partner, 7Digits, who shed some light on how to publish content that will grab readers’ attention. 

We also implemented a method to measure the content’s relevance easily with a simple plugin: When they are reading the article we ask in a pop up with the help of a plugin: Are you preparing for a trip? If the answer is yes, that means that the content is relevant, more valuable and made for the right people.

To contextualize how they might think to solve their challenges, we needed to understand the competitive landscape therefore we made some reverse engineering to understand the content categorization better. Thus, when we benchmarked competitor’s sites, we found they decrease the irrelevant content overload by choosing the city first, so that can simplify the navigation and reduce the cognitive load.

Prior to their trip, people collect practical or hedonic content, in their attempt to prepare for every situation, or and also to get the most out of their trip. Therefore the context in which they consume the content is not important anymore, as people could be doing this from the comfort of their own house, or even their bed. In this we concluded that timeless content receives an even greater importance at this phase of the customer journey, which helped us formulate the website’s content strategy.

This kind of research brings such a huge amount of insights, that will later help in defining the MVP, that’s why it is also important for the client to be an active participant in the process whenever that is possible. If they are there at the time of the exploration of the conclusions, they will feel the whole project much closer, which also eases the delivery of the results. We had the fortunate situation to work closely with a content writer from the client side and it was surprising that he found some information insightful that we didn’t think is important to mention but it made a big impact overall.

As we developed a better understanding of who exactly our end-users were and how they usually behave, we began to translate our research into personas which played a critical part in this project. Personas helped us focus on the higher-level discussions of who we were trying to reach and what information they’d be looking for before we got into designing.

This shared vision and concise language to describe our customers helped our team organize and prioritize content.

Ideation workshops

With the understanding of the research, we came together, as a multidisciplinary team of researchers, designers, business experts, and content creators ideating on how to leverage content and tech to provide an exploring and inspiring experience to the users.

A project succeeds when you understand how its application would fit into the audience’s lives—both practically and emotionally. We ran the first workshop where we set all the main goals and functionalities of the upcoming website. Then we quickly had an understanding of how complex the users’ environment would be.

At some points of the workshops some of our ideas seemed technologically complex and hard to implement. We felt we needed to be creative and have to come up with inspirational ideas on the sessions and we can’t afford to spend too much time on the disciplines while ideating. To be more effective on this, we created a “black box” where we can put everything there as “the problems of tomorrow” and get back to them once we finished with our real goals of the MVP.  

For example, we felt the need to fill the in-between times, like when a user is at the airport or on the airplane with a different hardware and software environment than pre or in-destination. This idea came to us in our workshop session but we couldn’t answer that without proper research, testing and investing the ideal time into the notion thus this will be one of “the problems of tomorrow”. Now that the website is in production, the Like Locals team is going back into the black box topics and addressing them to improve and customise the existing solution even more. 

Also, along the way, we ran some additional workshops, as we realized that we are in need of some further discussions on certain topics. On those smaller workshops, lots of our yet unseen issues revealed themselves and the obvious solutions appeared on the horizon. For example, we realized it was time to restructure our database and get rid of the old legacy structures, which remained from the first version of the mobile app.

Conceptual design

We started thinking about the best structure to provide the value and functions previously defined. We thought about the information architecture, user flows, what the most important information was and how the user would consume it through their journey map.

Mapping existing user flows within the app provides an excellent starting point for the website. The idea is to create a more complete foundation and develop our ideas for our experience design phase. When we understood how people interacted with similar websites, there were certain universal UX elements that helped create a fluid and effortless user experience with frictionless practice across the whole experience.

Online content should be first filtered by city category. The first information we want to know about the user: which city interests them. Further categorization should be within-city as we have seen during reverse engineering sites and as the experts confirmed. Those categories can be seen on the image above, where on the top bar users can sort the content based on their preferred category. Within those city categories, there should be a location-based and a similarity-based recommendation engine for places. We can see that in the first paragraphs of each article, they situate the sight in question in a local context with “within-website” links. This can also be done by embedding.

The users should be reeled in to the website by asking micro-commitments. Micro-commitments are means of interaction with the content that gets users more and more engaged. The first commitment should be small and then they gradually build up. Commitments should be asked after rewarding moments, as the hooked model explains. Eg: social interactions (comment, share or like), newsletter subscribe, asking to sign up.

To ask these from the user we need to provide a clear benefit-oriented value proposition everywhere possible. When the date of the departure is gone, the boards most definitely will be inactive so users will neglect them. Therefore we need to connect the boards that were created, which should lead to the use of the app in-destination. Finding the best marketing tools, user commitments, and marketing psychology to make them do that instantly was our priority.

Before there was no connectivity between online and in-app at these stages of the travellers’ journey. Thus, the website should prompt users to download the app during their planning session. That is the biggest commitment we ask for and also the bridge between the app and the website: We are onboarding the users with the website, they can add places, create their own profile, share and save their favourite places in a collection. This enables cross-platform connectivity and uniformity and they can use the application while on the go with their content already being collected on the website.

By taking the existing workflows and data through the information architecture process, we optimized all the steps within a given workflow. When we tried to connect the database being used in the app, we also realized that the data structure was piled up with the “legacy” bits and pieces of the database for the first releases of the mobile app which made it more complicated than it should be. That’s when it was time to restructure it, as we also mentioned in the ideation workshop phase.

Wireframing, prototyping and visual design

When it was time to turn our paper prototypes into digital wireframes, the first thing that we started working on was the city page, which is the most important one. We started with two parallel threads: a visual study which was the visual concept of our art director from our partner graphic studio next door and the wireframing.

Our decision to design this page first was based on the fact that it is the most important to the user as a starting point to start their exploration.

Once the visual study and the wireframes were ready, our UI designer built the pixel-perfect designs.

Then, we started creating digital mockups for other flows of the screen. Our tool of choice was Sketch from the beginning. In our high fidelity prototype, we tried to focus on features related to solving some of the major desired outcomes found in the research phase. It has to be simple and easy to understand, yet also smooth to navigate while it is encouraging to explore and keep the user in a consumption loop. Also, we need to keep in mind the obvious need for the product to fit in today’s trend as far as travel websites go, but still make it unique and vary from the existing patterns.

Certain challenges that we faced during our UI process were the different cards we had throughout some pages. We needed to make the cards (which represent places, collections or articles) uniform to be straightforward, but also different in order to visually separate the content depending on its type. Moreover, these cards have to be fitted in tablet and mobile grid which means different grid layouts.

Because of the slight time constraints that we had, our UI designer built a sophisticated design system that includes a number of reusable components, along with creating custom ones. When we want to make something different as a whole modification circle (i.e: cards), it undoubtedly reduced the time and effort to change something. Moreover, this significantly sped up the process and made further adjustments a breeze for our developer as well.

Our developer was implementing quite a few complicated and visually loaded screens as well, so it was easy for him to overlook small design nuances like increased letter-spacing, slightly different backgrounds or custom margins.

Being the only UX designer on the project, I understood that a large number of my design decisions were probably based on my false assumptions about the user’s behavior on the website. To find those assumptions, we created and user-tested Invision prototypes.

In order to avoid any occurrence of some unexpected bugs, I provided several documents and made detailed comments, explaining what could be improved and where the execution didn’t align with the initial design. Once everyone supported the prototype, we designed the full-fledged version of the website.

Development:

Development is no simple feat, but when we began tackling the challenges with a human-centred approach, it was much easier to manage. There is less time spent on iterations and much less spent on future changes and support. That’s especially true as we made the development in-house and we kept a really tight collaboration between the design and development team, having daily standups and mini-workshop sessions to solve specific technical issues and situations. We followed agile principles where our design team works ahead of our front-end developer and in tandem with the customer, and that was key to the success of the project. 

Future direction

No spoilers, but Like Locals has had a long road map already and we can surely say it is expected to be even longer going forward. The awaiting new edition of the mobile application, which we have been working on for a few months now, will soon be released after the website. The website will be released in June and we will follow up on this case study with details of the results.

Oszkar N.

Oszkar N.

Committed UX designer with an IT Business background. When leaving the cyber-world, I dedicate all my resources to my mountain bike and building my backyard as an MTB course.

Add comment