Case Study — Outdoor Adventures BCN — Website Design

The Brief

This project involved working with a company based in Barcelona, Spain which is establishing a business to guide young people in the mountains. They are seeking to create an online platform on which to showcase their business, develop interest, and pitch to potential clients.

Stakeholder: Outdoor Adventures BCN

Timeframe: Two weeks

Team: 2 UX/UI Designers

Platform: Desktop and mobile

Tools: Figma / Figjam / Miro / Trello / Google Forms / Maze

Methodology: Design thinking in an Agile environment

Deliverables: Tested High-fi prototypes (Desktop and mobile)

Intro

Outdoor Adventures BCN are aiming to work with international schools in order to give groups of 11–18 year old students meaningful outdoor experiences. The stakeholder was in the early phases of the process, having reached out to potential clients in the Catalunya region of Spain to gauge interest in any future working relationships, but as yet didn’t have an online presence.

As a team, we were hired to complete a thorough UX research process, and present a design solution which we believed would represent the core values of the business and demonstrate how international schools could benefit from their expertise, passion and energy.

Stakeholder Interview

To kick-off the project, the first step was to sit down with the stakeholder and get to know him and his business plan. This of course was vital in order to build a clearer picture of his pain points up until now, objectives, and motivations. In addition, we were able to set clear expectations about what we would be able to deliver, the timeframes and any limitations.

“My three areas of focus are teaching the skills needed for an uncertain future, helping the students feel alive and be present, and to connect them with nature and appreciate the environment”

“Teachers are finding it hard to manage the growth of silver and gold Duke of Edinburgh awards”

“I want to offer international schools in Catalunya support setting up and delivering the adventurous journey section of the DofE award”

“As a former teacher I understand how to connect with and manage young learners”

“Once I have the experience, content, videos and testimonials I can reach out to schools and build expedition experiences outside of DofE”

What became clear quite quickly is that his ambitions for the business could be divided into 3 phases. A well established primary phase — a Duke of Edinburgh* Silver and Gold guiding service — would provide a springboard for future business goals, and therefore became our focus of our user research and potential MVP.

*The Duke of Edinburgh award (DofE) is a UK based organisation which encourages young people to engage with the community and develop new skills. The award is divided into 3 levels of difficulty — Bronze, Silver and Gold — however all 3 culminate in an outdoor expedition, getting more challenging as you go up levels.

Visual Competitor & SWOT Analysis

The stakeholder also made us aware of the fact that there are only 2 companies in the entirety of Spain which offer Duke of Edinburgh specific outdoor guiding services, and none in Catalunya. However, in addition to these, there are multiple businesses based in the UK which operate overseas to aid international schools with their “practice” and “qualifying journeys” and assessments. These UK based organisations tend to be well established, reputable, and employ highly experienced guides.

By looking at both the Spanish and UK company websites, we were able to undertake a market comparison and visual competitor analysis. This was valuable as it demonstrated to us the strengths and weaknesses of already well established competitors. Some interesting features which came from this research included:

• Use of social media icons and feeds to relay positive testimonials and suggest legitimacy and currency
• Use of videography over text to gauge interest for younger audiences
• Call to action buttons in prominent positions to encourage potential clients to ask questions and build relationships
• Large hero typography explaining services in conjunction with hero images (some on carousels) to emotionally impact the user as soon as they accessed the sites
• Use of detailed testimonials separate to shorter social media feeds
• Sans serif typography for headers and body copy to make for a more readable and friendly voice
• Earthy tones to replicate the outdoors
• DofE accredited logo prominence as a way to suggest safety, legitimacy and experience

With a SWOT analysis undertaken off the back of this competitor study we were able to determine that Outdoor Adventures BCN strengths lay particularly with their location, native English language, and an extensive background of working with young people. However, any opportunities would have to supported by a professional service with reputable testimonials in order to rival those from the UK.

User Research

With our DofE focus for the website decided upon, we had a narrower scope for our user research. The primary users of the product would be the 7 international schools, their senior leadership, and DofE coordinators based in Catalunya. We reached out to these with the help of our stakeholder who had already made contact with many of them beforehand.

In addition, we decided to gather opinions from DofE professionals and secondary schools based in the UK to help build a picture of what pain points they have when finding suitable guides for their DofE expeditions.

We used a Lean Survey Canvas and built a Google Forms questionnaire which we were then able to distribute remotely to 22 users and subject matter experts.

Following the data we gathered from this, we undertook 4 user interviews. These open conversations about the process of choosing a guiding service for DofE and expeditions with young learners helped us to build a better picture of respective pains and gains. Examples of some questions included:

Why would a school use a third-party guiding company over in-house teaching staff?

What value do external guides add to the experience?

What makes people feel comfortable in using a particular guide?

What does the process look like for booking a guide / being approached to guide groups?

What positive / negative impact do DofE expeditions have on the young learners involved? How do you know this?

Finally, with the use of an Affinity Diagram we were able to calibrate the data we had gathered, allowing us to better visualise our users’ needs. We then proceeded to dot vote on what we considered the most important points raised, leading to a more specific design scope.

Key Findings

When looking for a guide, ours users stated the most important factors were:

“I don’t know the local landscape”

“I don’t know the emergency procedures”

“I’m daunted by groups of teenagers wandering around the mountains on their own”

“We don’t have the capacity to run Gold expeditions with our teachers”

“The Duke of Edinburgh award is hugely time consuming for schools, teachers often set it up but then can’t manage the workload”

Some final key observations which came about during our interview phase also included:

• Users are looking for proof of legitimacy with the business
• Young people are looking for role models in a good outdoor guide
• Schools are seeking reliability and low risk
• The overall goals of the DofE expeditions are to offer a fun, challenging experience with a specific focus on personal development for teens

User Persona

With both the quantitative and qualitative data collected from the user research, we could then create a primary user persona to humanize this information. With this we would always have a benchmark for the design process, and help us ensure our prototypes were meeting her needs. Although our design team was small on this project, we felt as though this was an important part of the process in order to build a focused, consistent solution.

We also considered the development of a secondary persona, a parent of the teen who would be keen to research the company — however we decided that for our MVP this was not necessary at this stage. We spoke to our stakeholder regarding this and agreed that parent specific content would be amongst the next steps.

User Journey Map

With the user persona defined from the user research, we could then create a current user journey map. Through this, we were able document the process an international school DofE coordinator (our persona) would go through in order to find and select an appropriate guide to build a working relationship with. As a result, we highlighted the opportunities and specific areas where our design could be impactful, reduce pain points, and meet needs.

How Might We…

After highlighting these specific opportunities, we began to ideate some ‘how might we’ statements in order to narrow the scope of the project and help produce a concise problem statement, leading to a strong MVP. Examples of these statements included:

How might we encourage schools to use OA BCN rather than a more established UK based company?

How might we give schools the confidence to book OA BCN as a guide?

How might we show that OA BCN is an area expert for Pyrenean routes / camping grounds / emergency procedures?

How might we demonstrate the stakeholder’s connection between teaching and guiding?

How might we showcase high quality content that will testify to the quality of his services?

How might we balance the idea of fun with a secure and safe environment?

Problem and Hypothesis Statements

The culmination of the above research process is the following problem statement, which we could then use to guide our ideation and prevent our small design team from deviating from our proceeding MVP:

International schools in Catalunya need to find an external guiding partner for their DofE Adventurous Journeys that they can trust to provide knowledge of the area, expertise in planning the journey and confidence in their ability to be a leader and good role model.

And to validate any future successes we incorporated the following hypothesis statement:

We believe that providing quality content and information for international schools will help them choose Outdoor Adventures BCN as their external DofE provider. We will know we are right thanks to the numbers of requests made on the contact page.

Minimum Viable Product & Site Map

With a problem defined, we set about creating the guidelines we needed for a minimum viable product. With the use of the Moscow Method, we noted the items we felt we must have, and in contrast, what we won’t include for this design sprint. As a result of these considerations we settled on a simple 4 page design categorised by the following site map:

One iteration we made at this stage was to reduce the page numbers down to optimise the user flow, and therefore rather than having a specific ‘About Me’ page we decided to include that information on the homepage.

User Flow

A simplified site map led to a streamlined main user flow and happy path. Here, we decided to focus on the happy path of a user reviewing example journey pages on the site— explicitly those which would indicate the appropriateness of the service for the needs of an international school looking for guidance with DofE expeditions.

Once we had the information architecture decided upon, we felt as though we were at a place in the process where we move into the design phase.

Design Principles

By coming into a project and working with a stakeholder who doesn’t currently have an online platform, we decided that before we put pen to paper and begin ideating our low-fi we should create some design principles.

Based off the research phase of the process we put together the following 5 principles which we used to provide concept guidance for our designs and calibrate our thoughts as a team.

Moodboard and Style Guide

With these concept guidelines put in place, we then sought design inspiration from other sites related to outdoor education and experiences. This helped us particularly with page transitions with varied content, where best to integrate items such as testimonials and social media feeds, how to tell the story of previous successful expeditions, and potential colour palettes.

Once put together, we dot voted on particular design features we enjoyed, and felt complimented our design principles. We were then able to centralise our primary text, colour, iconographic and graphic design styles into a style guide for the primary desktop prototype. We would then modify these for our secondary mobile prototype.

It was at this point that we scheduled another meeting with our stakeholder, to touch base on our information architecture and design concepts. We sought to get our ideas signed off before we continued into the low-fi, mid-fi and high-fi prototyping.

Low-Fi

Within our small design team we set about making sketches for the various pages of the site — incorporating low-fidelity versions of the elements which we had dot voted on with our moodboard.

We presented our respective ideas, explained our reasoning behind each design decision, and eventually dot voted again on the various elements which we thought we could bring together onto a centralised low-fidelity, and then mid-fidelity design.

Mid-Fi & User testing

With Figma we generated a mid-fi prototype and established a short user test. This focused on the happy path of our main user flow — explicitly to scan the homepage, link to and explore the journey pages, and then finally access the contact page. We did this remotely via Maze, and asked those who had completed our user survey to participate. Along with the data we received from the heat mapping, we also asked specific evaluation questions of the users, such as:

Did you feel as though there was anything in the wrong place?

Is there anything you would add to the site?

Is there anything you would remove from the site?

How would you rate your overall experience of the product?

From the user testing results we decided upon the following iterations to our primary desktop design for the high-fi prototype:

• Add an “About Me” page to better put across the company’s mission and unique selling points
• Add a call to action at the top of the homepage to encourage enquiries from the outset

High-Fi

With our primary iterations decided upon, we began to build our design system in order to develop our responsive high-fi prototype efficiently and accurately. This included the use of components, variables, auto-layout, scrolling, along with text, colour, effect and grid styles in Figma.

We focused on building our primary desktop platform first so as to begin user testing as soon as possible, and then adapted the elements appropriately for the mobile version thereafter.

Sample homepage content:

Sample Service and Blog / Article content:

Video demonstrations of the entire site, both desktop and mobile:

High-fi Test Results & Next steps

Our high-fi user test, which again was undertaken remotely via maze, yielded positive results for the clarity of the content, layout and design elements. For example:

“I love the palette you’re using, and both the navigation and the footer look great!”

“Clear layout, nice photos, mix of different kinds of media”

“Large font and easy-to-access menu”

“Layout was clear, easy to navigate, relevant images and text”

“I love the use or potential use of the relive app to show the routes”

“I liked the map “x marks the spot” way of following the information for bronze/silver/gold, very easy to follow”

“Having multiple info boxes in one place triggering new content with buttons (i.e. on the instructor’s section) was nice”

However, there were still points to be addressed with the design, such as the typography and font choices, use of whitespace, text line height and button design / placement. Explicitly:

“The slideshow on the blog is less convenient because I lost some autonomy of what I was (pre-)viewing”

“Too much text in places”

“If the main goal is to click the “services” tab maybe there should be a button leading to that?”

“Text for different sections was quite large if being VERY nit-picky”

“Font size for button”

“No button to go back to the homepage (other than the logo in the middle which wasn’t obvious)”

Our next steps would therefore be to undertake more thorough user testing, ideally face-to-face with potential users. This would then allow us to iterate our design once again, and trend towards a more accommodating product for the user, and more successful leads for the business.

Takeaways

During the 2 week sprint we created a roadmap which would allow us time to complete a detailed analysis on the organisation, comprehensive user research, and a pixel-perfect approach to the design phase. We feel as though this project now has a viable MVP, but there is still plenty of scope to iterate more and help the business grow further through its online platform.

Working with our stakeholder on this project was extremely fun and rewarding. It was encouraging to see how impactful our research and designs could be on a small business which was in the development stage, and the feedback we received from both the users and the stakeholder was positive.