Close
Close Close Close Close
Contact

Introduce a project

We’d love to hear about your project! Get in touch to get the conversation started.

Talk to us
01227 378 740
Drop us an email
hello@redbullet.co.uk

Ski Club of Great Britain

Ski Club needed a dynamic website that showed different content depending if they were a member or not, creating an awesome UX challenge for us. It was also technically challenging because we needed to use various APIs together to help create a unique and powerful offering.

Kickoff

Data analysis

After a successful Kickoff, we dived into their current site data to help fuel our ideas and thinking. Bev, analysed the GA4 data to get key information such as the most used device, audience ages and genders and where they are coming from. We were also provided user personas.

IA

Card sort and IA

With over 120 current pages, the site map needed a total rethink of how we logically group and organise the pages to create smoother navigation for users. We started with a traffic map, understanding what pages are popular and what aren’t, so we can streamline. This was followed by a card-sorting workshop with the SkiClub team where we organised buckets of pages into categories and culled or grouped low-traffic pages. This led to the IA, where we mapped out the sitemap, focusing on simplicity and grouping. It took 3 versions to refine and simplify the content to around 50 core pages.

User journeys

Creating task and journey maps

Due to the complexity of the site, we first mapped out each of the tasks and how they would need to complete those tasks. For example, some grouped tasks might be… I need Ski travel insurance, what are the packages, what am I covered for. Organising each of the tasks allowed us to create some user journeys through the content, helping visualise the flow. This was done alongside the sitemap to ensure journeys worked within the map.

UX design

Planning content and designing wireframes

We moved on to the low-fi wireframing, creating layouts and component structures for the new Ski Club website and members area. Our focus was to design each of the user journeys and ensure content was lean, useful and provided lots of value to users. Providing value was key to creating an awesome experience for all user types. The UX design phase was a success as returning visitors increased after the launch.

UX and UI challenge

Dynamic pages

One of the main project challenges was we needed 2 designs per page. If a user was not logged in, it would show more sales content such as pushing to become a member and selling the benefits of membership (i.e. this is what you’re missing out on). In some cases to trigger more sign-ups, we allowed them access to valuable content, like weather and discounts but locked them out of advanced features to show what they were missing out on. If they were a member, we’d provide them with valuable and relevant content, getting value from their membership.

Key to the success was planning out both user journeys and mapping what content we needed to show on each page. When it came down to the UI, we opted for a clean and spacious look, with mostly white backgrounds, so the dynamic components could be displayed interchangeably and nothing would clash.

UI Design

Crafting a flexible and standout UI

We opted for a mobile-first approach as it was the most used device.When bringing the UI to life, we needed to consider the dynamic content and amount of content to ensure components didn’t clash or feel too content-heavy. Therefore, we opted for a simple colour pallet, and lots of generous use of white space to make it feel clean and easy for users to read content. There were many unique templates, so we designed a lot of them custom. However, for many of the content pages, we created a component library so they can easily create engaging pages for themselves. For these components, in the CMS, we added the ability to change and flex the background colours so that sections never clashed.

Key challenge

Holidays and resort design

One of the core offerings of the website and members’ area is resort information and holidays, with the two being linked. Planning-wise, we needed to create simple user journeys that flowed from resorts to holidays, to booking and to managing their holiday in the members’ area. We only showed what was necessary and tried not to overcomplicate any steps. We worked with the holiday team to try and simplify their forms for easier booking. Even though we wanted to streamline content, resorts and holidays both had tonnes of information and sections. Therefore, to keep the initial flow simple, we opted for a tabbed design. This meant, on the first tab, they could understand all the essential information they needed to complete the booking journey. Then in the other tabs, we can present extra information that users might need but isn’t essential. This created simple user journeys, whilst providing maximum value.

Members Area

Providing value, simply

The Members’ area or ‘Ski Locker’, was a dashboard where they can manage Holidays, Reps, Discounts, Insurance and more. A typical members’ areas have all things members in one place and all things not in another. The challenge with Ski Club was the member’s content was not only in the Ski locker but also on the website itself. Our main solution to this was dynamic content accompanied by lots of planning, wireframing and journey mapping. Through dynamic content, we were able to show members what they wanted and not confuse them with non-member content. For the Ski Locker itself, we created a simple dashboard that revealed relevant and new content, making them want to come back time and time again. We optimised multiple APIs to give them useful features such as insurance, reps and holiday management. Design-wise, we kept it clean with lots of spacing, so users weren’t overwhelmed with the amount of data in there.

Development challenges

Using multiple APIs together

Ski Club wanted to provide as much value as they could. However, to do so, they required multiple APIs to work together, creating technical challenges. Through this task, it was key to understand all the API requirements and limitations, so none of them clashed. Some of the APIs we used were Sugati to manage all their holiday bookings, Fonteva to manage memberships and Ski reps, Dot Digital for preferences, Stripe for payment methods and a unique weather API.

Overall, through technical planning and design to the technical limitations of each API, everything came together successfully. The only issue we had was the API for reps didn’t provide everything we wanted to give an awesome experience. Therefore, we bolted on those extra features with a custom solution within WPE, combining the two.

Support

Ongoing improvements

Overall, the process was complex, with lots of challenges along the way. All challenges were overcome through teamwork and working with the Ski Club to find solutions quickly. With Ski Club and many of our clients, we love working with teams to build something awesome for users. The Ski Club site was a great example of this, what was built is an amazing offering to the largest Ski member group in the world. We continue to work with Ski Club on improving their site via better UX and new features to excite their audiences.

Next project
Next project Next project Next project Next project Next project Next project Next project Next project

Wycliffe Bible Translators

Wycliffe’s website needed resonating visuals and storytelling so their cause appealed to their user, which in turn would increase donations. Also, their donation process needed to be slicker.

User journeys and personas

Mapping out the user journeys

We started with a fun user workshop with the aim to understand all their users journeys though the site. The journey was mapped so each persona could meet all their key tasks and goals in a logical order. We also thought of their emotions at every step so we could consider if they were frustrated or sceptical. Having the user personas and journeys allowed us to cull any pages that weren’t needed, make key pages in the user journey more prominent and allowed us to tailor the UI to their emotions.

Sitemap and content mapping

Organising and simplifying the site

The previous sitemap had lots of levels, and pages with varied, ungrouped content. To get to the final version (it took a lot to tame this beast), we discussed what pages could be grouped or removed, which gave us a good bunch for the card sort. The card sort helped organise and group all the pages. This highlighted we could group the navigation into 3 core areas. We then organised, simplified and adjusted the taxonomies over many revisions to make it as easy to navigate as possible. Once the site map was finished, it allowed us to do a content map, which organised the content so it was easy to find.

Cool board

Introducing the storytelling

Our task was to establish the brand and represent the diverse cultures Wycliffe helped to unlock. Before committing to any design, we created a cool board that expresses our visual direction. We were inspired by the vibrant colours and patterns of diverse cultures. Using these with a clean typeface and people-focused imagery, powerfully brought everything together, making the brand resonate with its users.

Wireframes

Putting the user journey first

In greyscale, we designed the backbones of the website that was tailored towards the user journey and content map. The benefit of wireframing was we were able to just focus on the structure, content, flow and hierarchy. After some quick iterations, we were happy with all the content being in the right place at the right time.

Visual design

Bringing the brand to life

We applied the cool board styling to the wireframes to bring the site to life. Our main focus was to create a clean and powerful user interface. We used people-focused images, along with the patterns and colours across the site to reinforce the message and create visual interest on every page. The patterns were useful as we were able to layer them behind certain elements to create depth. We were pleased with how the Red, Yellow and Orange worked together.

Donation flow workshop

Mapping a simple and logical route

To tackle the overcomplicated donation form, we had a workshop which firstly involved mapping out the previous form. From there, we were able to cull, simplify, group, rename and automate any steps. Normal donation forms just donate to the charity, however, this form required to donate to projects, people or where they needed it most. This added a layer of potential confusion and complexity, due to searching for projects and people. We solved this by leading with the most popular option (where needs it most) and then separating the projects and people into their own tab with extra UI complexity and functionality. This resulted in two tabs with each focused on its main task, making the form cleaner and more focused. We also found the most popular donation amounts, to reduce the user input.

Donation form design

Bringing the donation form to life

The main task was to balance a really easy-to-use form with a limited amount of input and bringing in some signals that the user is making an impact with their donation. Ways we made it more efficient were using switches and radio buttons where possible to reduce typing, using analytics for popular donations and a postcode address finder. To highlight the user is making a change, we brought in a quote section, in some empty space, that tells users the change donations have had on them. Lastly, on the donation amounts, we visually showed the impact of that amount such as £10 can buy X,Y,Z.

Next project
Next project Next project Next project Next project Next project Next project Next project Next project

MattressNextDay

MattressNextDay needed a user-friendly website that was easy to find and purchase products. Also, they needed their new brand baked in to give a fresh, modern and credible feel.

User research

Understanding the audience

We invited the MatressNextDay team in to help gather insights such as popular pages and key analytics. This allowed us to define the key tasks, journeys, goals and critical differences of their users. The whole process was beneficial later down the line as we identified critical aspects of the user journey such as the homepage, basket and checkout as key areas to improve.

Sprint 1

Redesigning the homepage

After the user research, we planned to work in sprints, focussing on core areas of the site. Sprint one involved redesigning the homepage. We started with mobile as that had the most users. One pain point was users not being able to quickly find products, so we dived into the analytics of popular pages. We then presented these popular ‘shop by’ sections on the homepage for quick navigation.

Sprint 2.1

The product listing page

Next, we focused on the products page. The main focus here was to improve the filtering of the products, so users can find what they want easily. We solved this by making the filters always visible (sticky), and logically ordered and hiding unpopular ones behind an advanced filter button.

Sprint 2.2

The product page

Our main focus was to simplify all the essential information, so it could be placed above the fold. This meant users only needed to read this information to purchase. We also made the images more prominent and stacked the essential ones, so the user could scan through them without clicking. Below the images, we placed all the other information within accordions so users could quickly scan and find any specific details such as specifications or return information. Lastly, reviews were key on this page to gain credibility, so we thought about how to best place them on the page.

Sprint 3

The Basket

The basket had a few extra challenges than a traditional basket. These included seamlessly adding in two extra services (mattress recycling and room delivery), if available for the Next day delivery and tree planting information. We solved this by logically displaying essential information so that the hierarchy and clarity were spot on. Also, colour-coding sections helped create a clear structure for the basket.

Sprint 4

The checkout

The current checkout had multiple steps over multiple pages. Our solution to make this quicker, cleaner and simpler was to make this a one-page checkout with different sections that could expand to review past information. We also tried to automate any steps such as a postcode finder. Lastly, we had to think about the best and most efficient way to select their custom delivery slot.

Sprint 5

Content pages

Now that the key purchasing flow was nailed, we focused on key content pages such as the delivery, about, contact and component library. We were able to bring in the brand and be more friendly and approachable. One of their key USPs is planting a tree with every order, so we designed a branded page that stood out from the rest of the website.

Sprint 6

Mattress finder

The Mattress finder is a bespoke tool for users to find their perfect mattress. Our task was to improve the efficiency of the tool but most importantly, make it an enjoyable, interactive experience that sparks excitement about what they are about to buy. We improved the UX by remapping the flow to make it simpler, categorised and more logical. We also focused on reducing the number of clicks. The UI was improved by bringing in colour to separate it from a normal form. We also introduced some icons so that users could understand each option quicker, which also made it more visually interesting. Each option was a large clickable area, so it was easy on mobile to select what they wanted. Lastly, we adjusted the results page to help show the best option for them. We continue to work with them on ways to make it better as more analytics come in.

Sprint 7 and beyond

Icon library

Across the site, they have lots of icons, especially on the product pages to help visually show features. They were very unique things like ‘horse hair mattress’ so we designed an icon library for them. We are still working with them on new features, icons and more to help improve their site, sprint by sprint.

Next project
Next project Next project Next project Next project Next project Next project Next project Next project

Artisan Directory

The Artisan Directory required a brand that conveyed organic, natural and handcrafted. Their brand needed to tie into their handmade artisan items at every level, from guidelines to websites.

Moodboard

Presenting our initial direction

We had a vision for the brand and where we wanted to take it! We created a mood board for the client with some rationale behind our vision. Getting the client on board before we commit any time was crucial as it allowed us to spend more time refining the brand.

Initial logo concepts

Presenting different route

We explored different visual routes for the logo mark. Experimenting with different typefaces and visual cues to help convey what they do. We presented these to the client to get their feedback.

Refine

Refining and pushing the logo further

The feedback was mixed and the client like different aspects of each logo, such as the simplicity of one and the handwritten of another. From this, we were able to craft a logo that had all the best aspects of our previous logos.

Testing

Ensuring it works in its environment

The logo will be predominantly used on their website. Around half of their users are on mobile devices, so we needed to ensure the logo was legible when small. We presented the final set of logos, testing how it works when small. This help aided the final decision.

Illustrations

Creating a visual language

Branding isn’t just a logo and colour pallet. We needed to bring in some illustrations which can be used across their site and social media. The difficult task was to ensure they paired with the style of their logo. The illustrations help convey what they do and create unique and consistent visual style that make them stand out from the crowd.

Brand guidelines

Defining the brand rules and standards

Once the brand aspects were signed off, we created the brand guidelines. We outlined how the brand should be represented. The guidelines can be referred to, ensuring there is brand consistency going forward.

Website

Using the brand in the real world

Once the brand was defined, we were able to create their website with its unique style. The use of natural colours, typography and illustrations worked well in tieing it into the handcrafted, natural and humanistic touch. Furthermore, the illustrations went the extra mile in conveying what they do and made the site stand out from its competitors.

Next project
Next project Next project Next project Next project Next project Next project Next project Next project

Gooey

Gooey, one of our digital partners, had an exciting brand makeover! It was our job to bring their brand to life with a slick, exciting and unique user interface that made them stand out in the digital market industry.

Brand

Expanding their vibrant brand

We explored how we can push the brand even further for their website. We defined the accessible digital colour pallet, icons and illustrations, creating brand consistency and impact.

User personas

Understanding target audiences

A persona workshop with Gooey was important at the start. We worked together to define who their users are, their goals, barriers and most importantly, key tasks on the site. Knowing key user tasks ensures the design is optimised toward making these as easy as possible.

Wireframing

Creating a blueprint structure

Wireframing involves planning out the structure of the site without focusing too much on layout and visual design. This allows you to quickly refine the pages, content and navigation early on. Getting the UX foundations right early on is key to any successful site.

Visual design

Thinking outside the box

Most websites have a white background. However, to make their exciting brand stand out from the crowd, we opted for the blue background. The coloured background allowed us to use multilayers, creating depth, hierarchy and also visual impact. The layers included a CSS gooey blob that animates, Gooey illustrations and white containers for long-form content.

Iconography

Making each service stand out

Gooey has 5 core services, so to make each one stand out, we assigned each one colour and shape, helping them are easily distinguished. This translated over to the case studies, so users can understand which service was used. Gooey’s sub-services were unique so we designed custom icons for them to help convey their offerings.

Improvements

Evolving the site to their needs

Since launch, we’ve worked with Gooey, to improve areas of the site. This included evolving the blog with more engaging components and brought through more imagery to make pages more engaging. We’ve also been working with Gooey as an SEO partner, bringing their expertise into our projects.

Next project
Next project Next project Next project Next project Next project Next project Next project Next project

Mountview

Mountview had some key challenges. Priorities included improving the user experience for student applications; build a more flexible CMS, and to create a platform to improve online sales.

Application Design

Booking flow was central to success

If we could carry users through the process better, and allow them to save as they go, we expected to see greater conversion and increased application numbers. We focussed on creating a solution that had these attributes.

Refine

Simplicity down to every detail

The booking flow was simplified to every detail. We removed any fields which weren’t essential, making the task less daunting. Fields were carefully thought out, making them easy to enter such as turning text fields into button options. Taxonomies and groups were carefully considered, ensuring they were easily understood. After refinement, the form was ready for visual design.

Component library

Systems not pages

We used a component design system approach to speed up site development, save time on content management and improve overall site performance. We also build our WordPress systems in the same way. Allowing the admins to create one piece of content once, and add it to any page, course or event as required.

The website

Putting it all together

Once we had all the components, we were able to quickly piece together all the pages with consistency and efficiency. The main benefit to having pre-defined components is it frees us up to easily test different layouts and user flows, ensuring each page is optimised towards the user goals.

In the first four months since launch, we saw an increase of over 20% in applications to our headline courses. We put this down, unequivocally, to the improved design and UX Red Bullet have brought to our website and application form.

Matthew Turnbull, Commercial Director
Next Project
Next Project Next Project Next Project Next Project Next Project Next Project Next Project Next Project

KCC Trading Standards Checked

Kent County Council were looking for a partner to give their Trading Standards Checked website a UX revamp from the ground up.

The problem

Not searching for traders

Kent County Council’s Trading Standards site was relatively new and had been building traction by gathering a list of registered traders. KCC had been working on social media campaigns to increase consumer traffic, however tracking showed that although users were clicking through to the site, they were not then searching for local traders.

Requirements

Understanding KCC’s business needs

KCC approached us because they wanted to expand and improve their reach to their second type of users: consumers. They wanted a partner to support them with campaigns and to improve consumer journeys once on the website. Previous efforts with the site focused on creating trader profiles. Readjusting the focus and structure of the site was a delicate balancing act because the two audiences are interdependent in terms of site success.

Part of our task was to look at the overall IA, user experience and branding so that we could better engage consumers with the listed traders. This in turn makes it a more attractive proposition for traders to register. KCC (like us!) were keen that the decisions for consumers were based on data and real user need, so we undertook a discovery phase to define the direction of travel.

The problem

Digging deep into user behaviour patterns.

We reviewed analytics by each audience segment to understand how consumers and traders were currently interacting with the site – and where the pain points, popular journeys and drop-offs were.

We then created a set of user stories for consumers that would act as an anchor point for future project decisions. Defining what users want to do – and why – was really key in understanding the various barriers and concerns consumers have when both selecting and trusting a registered trader. This insight fed into the site structure, taxonomies and key messaging throughout the user journeys. For example, we needed to plan for a range of users, they might be: planning ahead, in an urgent predicament, verifying a trader they’re already connected with or experiencing a challenge with a trader and therefore in need of support. Through the user stories we created a prioritised list of tasks, which provided a hierarchy for the layouts, call to actions and journeys to key content.

Site mapping

Visualising the structure

With consumers at different stages of the process of engaging with traders, we approached the structure chronologically: a preventative and educational section; a search area with a big focus on refining how users find a trader; and a help area for if things go wrong.

An important piece of our planning explored the search and filters. In particular to cater for a spectrum of consumers, depending on their level of clarity about the type of trader they actually need. It was crucial that we gave very fast direct access for those who felt clear whilst also providing hand-holding for those that needed it. We reviewed best practice examples across the sector to finalise the filter taxonomies to cater for user error or misunderstanding. Some users think in terms of the problem and some have keywords related to the solution in mind. For example, if there is water dripping down the kitchen wall – do we search for a roofer, a plumber, a builder – or perhaps a bucket?! The search needed to be powerful and super usable – as some users will also be in an emergency situation!

Wireframes

Mapping out the blueprint

To validate our initial research and planning, we create a rough structure to the site and admin panel, focusing on a seamless user journey through the content for users to reach their goals. We created a clickable prototype to test our ideas, helping us find issues early on without investing too much time into the visual details.

UI design

A website to suit two audiences

The website had two core audiences, traders and residents. We split the site into two core areas so they could focus on their specific goals. The residents’ area focused on finding traders information really easy and then getting in touch. The main way we did this was making the process as simple as possible. The traders’ area focused on selling the benefits of signing up and then logically placing calls to action in the right place.

UI design

Increasing the number of applications

To sign up to the platform, we needed to get a lot of information from the trader to help sell their service. We logically planned out all the information and grouped all related questions to help separate the form into manageable chunks. Each question was carefully thought out so nothing was misinterpreted. From this, we were able to match the question to the most efficient input method, automating the user’s input.

UI design

Ensuring data is easily managed

If the platform was hard to manage, they may not stick around as this would become an unessasary task. Therefore, it was vital that the admin area allowed the trader to easily view all their applications, see profile traction, update their profile and also upsell their account level. We tried to keep this as simple and as useful as possible, so the trader wasn’t overwhelmed yet could get the maximum out of it.

Component library

Creating the different variations

The forms were vital within this process, so we created a component library to help plan out all the different variations in the form. This ensured that there was consistency across the forms. Furthermore, it was vital to ensure we planned out all the validation and states to ensure users were educated and guided through the application form.

Testing

Validating our thinking

As soon as we had a robust prototype of all the screens, we ran first click user testing to validate our decisions. This is a valuable step before venturing into the build phase because it allows us to make quick and efficient iterations, based on real users’ feedback. We reviewed the taxonomies and were able to tweak some labels to further increase the distinction between sections of content. We also made some minor adjustments with some call to actions to minimise any chance of user frustration. It is always amazing to run user testing – with targeted questions we always get very useful results and it provides an excellent way to fine-tune.

Next project
Next project Next project Next project Next project Next project Next project Next project Next project

Basket app

Kent County Council were looking for a partner to give their Trading Standards Checked website a UX revamp from the ground up.

Our role

Defining the initial UX & branding for the mobile app

We were tasked with performing the discovery, branding and UX design of Basket with the browser extension to come at a later date. The app would be native across both IOS and Android and the front-end would be made in Flutter by their dev team.

For the UX – we championed the wireframes, user flows and information architecture for the app itself. For the brand – we crafted the messaging, tone of voice, logo, palette and typography.

Requirements

Understanding KCC’s business needs

KCC approached us because they wanted to expand and improve their reach to their second type of users: consumers. They wanted a partner to support them with campaigns and to improve consumer journeys once on the website. Previous efforts with the site focused on creating trader profiles. Readjusting the focus and structure of the site was a delicate balancing act because the two audiences are interdependent in terms of site success.

Part of our task was to look at the overall IA, user experience and branding so that we could better engage consumers with the listed traders. This in turn makes it a more attractive proposition for traders to register. KCC (like us!) were keen that the decisions for consumers were based on data and real user need, so we undertook a discovery phase to define the direction of travel.

The problem

Digging deep into user behaviour patterns.

We reviewed analytics by each audience segment to understand how consumers and traders were currently interacting with the site – and where the pain points, popular journeys and drop-offs were.

We then created a set of user stories for consumers that would act as an anchor point for future project decisions. Defining what users want to do – and why – was really key in understanding the various barriers and concerns consumers have when both selecting and trusting a registered trader. This insight fed into the site structure, taxonomies and key messaging throughout the user journeys. For example, we needed to plan for a range of users, they might be: planning ahead, in an urgent predicament, verifying a trader they’re already connected with or experiencing a challenge with a trader and therefore in need of support. Through the user stories we created a prioritised list of tasks, which provided a hierarchy for the layouts, call to actions and journeys to key content.

Site mapping

Visualising the structure

With consumers at different stages of the process of engaging with traders, we approached the structure chronologically: a preventative and educational section; a search area with a big focus on refining how users find a trader; and a help area for if things go wrong.

An important piece of our planning explored the search and filters. In particular to cater for a spectrum of consumers, depending on their level of clarity about the type of trader they actually need. It was crucial that we gave very fast direct access for those who felt clear whilst also providing hand-holding for those that needed it. We reviewed best practice examples across the sector to finalise the filter taxonomies to cater for user error or misunderstanding. Some users think in terms of the problem and some have keywords related to the solution in mind. For example, if there is water dripping down the kitchen wall – do we search for a roofer, a plumber, a builder – or perhaps a bucket?! The search needed to be powerful and super usable – as some users will also be in an emergency situation!

Prototyping

Creating a list

One of the main user flows in basket is creating a list. This was one of the iterations we came up with in order to do this. The necessary information we needed to capture from the user included: List name, list type & description.

Prototyping

Sharing to basket

Another flow that we needed to figure out was how to add a product to Basket from both inside and outside the app. This used the native “share” feature on both IOS and Android, and we needed to design what this flow looked like. This is an interaction of how we envisioned this would work.

Next project
Next project Next project Next project Next project Next project Next project Next project Next project

Haulfryn Group

Haulfryn were getting ready to reopen their doors with a brand new set of websites with holiday booking ability and enquiries about purchasing residential and holiday homes.

The challenge

Haulfryn’s business needs

Haulfryn needed a partner agency to help them redefine their digital presence. This included creating websites for their Residential sales, Holidays and Holiday homes sales offerings. They also had a number of satellite sites that needed to be designed for surrounding parts to their business. These included their: Fitness, Food & Beverage, Spa & Wellness & upper market offerings.

Research & discovery

Digging deep into user behaviour patterns.

We started the Haulfryn design process from the bottom; performing a competitor analysis, looking at traffic through their current site map, performing a card sort exercise and then digging deep into their analytics to see what the current trends were.

Following this discovery we then mapped user personas from our findings for holidays, holiday homes and residential sites. We created 3 personas for each site with each one representing a different demographic. From here, we could then use their key tasks to start creating new sitemaps, user journeys and wireframes.

Card sort & Information architecture

Ranking content and discussing priorities

By understanding the overlapping needs of holiday makers and holiday home sales users, we decided to streamline these offerings into one site. This created opportunity for shared content, cross-selling and a consistent joined-up message. With each holiday location providing slightly different services, the structure could not follow a one-size fits all approach. Flexibility was crucial both in the information architecture and page structure. Allowing users to search within Haulfryn’s site by individual preferences was a huge step forward and our technical discussions and decisions, anchored in the personas, helped us define the best set of search, filter and sort options. The most powerful change within the structure was about keeping users on the Haulfryn Holidays site for the entire selection stage of the booking journey, whereas before they diverted to a third party mid-selection. This created a lot more certainty for users, earlier and reduced user frustration.

Flexibility was also important for the satellite sites where we balanced individual site requirements with the streamlining of business processes.

Wider architectural considerations, which we worked closely with Haulfryn alongside to ensure the sites are future proofed, included: future additional aggregators, considerable increase in content and the regrading of property categories. We also worked closely with their SEO partner as we finalised the IA to ensure a balance between users’ need and SEO performance.

Wireframing & Prototyping

Bringing it to life

After defining the site maps, we moved on to the low fi wireframing stage creating layouts, components and user flows for all the sites. Designing for both mobile & desktop, this is where we established a visual guide for how they would look.

Prototyping

Testing that the user journey is smooth

We tied the wireframe screens together, prototyping every button, action and transition to get a feel for the real life product. This was beneficial as we were able to test the flows of the product, ensuring it was efficient, smooth and easy to use.

User testing

Validating our thinking

To fine tune our solution, we tested the prototype with real users. We wanted to discover how well users understood the key page elements and how they would instinctively interact with – and journey through – the pages.

One thing that was super important to test was how well we enabled users to switch mindsets between holidays and holiday homes, now that these sites had been combined. We wanted to be sure users could orientate themselves and not accidentally go down the wrong path and become confused. We designed the questions to explore this (as well as to test the persona key tasks) and the results conclusively showed that users clearly understood the two main branches of holiday content.

It was very insightful which we iterated upon. The testing process helped us to refine some of the taxonomies, include additional call to action buttons for clarification and further refine the filter – there was also some useful content feedback for Haulfryn!

UI Design

Down to the details

After nailing the skeleton of the sites, we then moved onto the high fidelity stage, introducing the refreshed brand palette, typography and refining details such as imagery and components.

Teams and organisations who are looking for a creative digital partner. Quick flings are exciting but we all love long term relationships. We work across all sectors, but have huge experience in property, healthcare, sports, education and finance.

Sarah Chadwick, Head of Digital @ Haulfryn
Next project
Next project Next project Next project Next project Next project Next project Next project Next project