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

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

Focal data

The aim of the platform was to be a comprehensive survey creation and management tool, with complex analytical feedback and results.

Research & discovery

Understanding users and thier journeys

We identified key user personas, each with different tasks and capabilities. Some users are restricted to just viewing content, some could edit and manage their own accounts, as well as the accounts of their organisation.

We created user flows for each persona, capturing how their different capabilities manifested in their journey. We mapped how each screen, notification or email might be different or required, which all depended on the users account rights and flow through.

Wireframing

Nailing the stucture and language

The journeys were transformed into wireframes, focusing on the placement of elements and communication. We constantly questioned ourselves such as, do they know what screen they’re on and what to do next? What if errors are made and how they’re communicated?

We discovered the best language to use. For example, Login, Log in or Sign in? A challenge was to seamlessly communicate Focaldata approved accounts. Whilst waiting for approval, we introduced an onboarding step, keeping the journey flowing and minimising frustration.

UI design

The visual design framework

Following usability testing iterations of the wireframes, we added the visual layer. Focaldata used the Material UI framework, so our designs needed to correlate. The framework’s is built up of colours, type scales, interactions, errors, buttons and components. Our design speed drastically improved, allowing more focus on UX.

Always improving

Iterating design sprints

After the initial launch, we’ve worked closely with Focaldata, iterating through several design sprints with specific aims. Overall, the core aims are improving usability, streamlining user journeys and adding new features. Notably, the design has become simpler and cleaner to improve usability, organisation and content digestion.

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

DMA BiO Design system

DMA’s maintenance app BiO is already an existing web app but needed a UX team to give it a revamp and streamline and simplify the user journeys.

Discovery & research

The discovery phase

We initially conducted some engineer interviews and gathered some insight into some of their issues with the current BiO app. We then used these to form key tasks and personas for the engineers.

User journeys

Mapping the journeys

Because BiO is was an enormous app, we narrowed down our scope main flows to focus on and develop.

These were the ones we felt could do with the most improvement and have the most benefit for the users and the business.

  • Global Navigation
  • Starting job / updating job status
  • Inspect job / completing checklist
  • Raising a job
  • Inspecting a quote
Sketching

Planning out the stucture

We sketched out the system as this is the quickest way to plan out what we wanted to create. Through sketching we can save lots of time later down the line as it enables us to test new ideas and layout quickly. It also helps us understand the whole system very quickly. Knowing the system as a whole helps us make better decisions as we’re thinking of the system as a whole.

Wireframing

Bringing the sketches to life

Once we sketched out the system, we brought them to life using our design programs. We use figma as we can quickly mock them up and then turn them into a clickable prototype. Having a clickable prototype early on in the process as it enables us to test and change UX issue early on, without committing too much time.

UI Design

Adding in the design system

Once we tested and were happy with the wireframes, we applied colours and other visual elements to bring the designs to life. The way we set it up in Figma was through the use of reusable components. This means we only have to update the original designed element and it will update every use of it in the mock ups.

Components

Creating a design System

We already had an existing app and components within that we just needed to make it more usable, this meant starting from the ground up. We built everything with the Atomic Design System in mind. Starting off granular and building up to larger components.

Everything was from scratch: buttons to inputs to sliders, so we could have full control and scalability over everything.

Testing flows

Raising a job

Raising a job was one of the crucial flows of the platform. Therefore, we created a high fidelity mock up of the flow in Figma. We were then able to test this and get this right before building it with code.

Testing flows

Job checklist

Another crucial flow was marking of a task from the job checklist. We also mocked this up and tested it to ensure it was efficient and easy to understand.

Click testing

Validating our assumptions

Since prototyping we’ve been able to gather insights from real engineers putting them through usability hub and collecting heatmaps. We were then able to determine common pain points which we ammended.

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

KCC Trading Standards Checked

DMA’s maintenance app BiO is already an existing web app but needed a UX team to give it a revamp and streamline and simplify the user journeys.

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.

Discovery & research

The discovery phase

We initially conducted some engineer interviews and gathered some insight into some of their issues with the current BiO app. We then used these to form key tasks and personas for the engineers.

User journeys

Mapping the journeys

Because BiO is was an enormous app, we narrowed down our scope main flows to focus on and develop.

These were the ones we felt could do with the most improvement and have the most benefit for the users and the business.

  • Global Navigation
  • Starting job / updating job status
  • Inspect job / completing checklist
  • Raising a job
  • Inspecting a quote
Sketching

Planning out the stucture

We sketched out the system as this is the quickest way to plan out what we wanted to create. Through sketching we can save lots of time later down the line as it enables us to test new ideas and layout quickly. It also helps us understand the whole system very quickly. Knowing the system as a whole helps us make better decisions as we’re thinking of the system as a whole.

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

Quest

DMA’s maintenance app BiO is already an existing web app but needed a UX team to give it a revamp and streamline and simplify the user journeys.

Discovery & research

The discovery phase

We initially conducted some engineer interviews and gathered some insight into some of their issues with the current BiO app. We then used these to form key tasks and personas for the engineers.

Validating ideas

Understanding the audiences

Having run the event in the Alps for Ski for Sadie, using the same technology, we already had a bunch of rich user insight to start forming the direction for Quest. During the beta launch of Quest in lockdown 1, we piloted the app in a few locations around Kent, onboarding real users through Facebook adverts to gather as much insight as we could. Early findings showed young families were a huge take up as it gave children a new way to explore areas they already knew. Lockdown meant people couldn’t travel, so having something ‘new’ to do on their doorsteps saw an organic spike in users. At that point, we knew Quest would be a hit. No marketing spend, no brand exposure, but people were using it.

User journeys

Mapping the journeys

Because BiO is was an enormous app, we narrowed down our scope main flows to focus on and develop.

These were the ones we felt could do with the most improvement and have the most benefit for the users and the business.

  • Global Navigation
  • Starting job / updating job status
  • Inspect job / completing checklist
  • Raising a job
  • Inspecting a quote
UI Design

Baking in the brand

Once we tested and were happy with the user experience, we applied the Quest branding to the app and other visual elements, like animations to bring the designs to life. Moments of ‘joy’ are so important when engaging with users.

UI Design

Adding in the design system

Once we tested and were happy with the wireframes, we applied colours and other visual elements to bring the designs to life. The way we set it up in Figma was through the use of reusable components. This means we only have to update the original designed element and it will update every use of it in the mock ups.

We have developed a great working partnership with ‘Quest’ along with their dedication, guidance, communication and support which has had a great impact on delivering the product to a great standard. This has given our targeted demographic of guests a great experience which we would not be able to provide without the Red Bullet & Quest team.

Ryan Higgins, Regional Entertainment Manager @ Park Holidays UK
Next project
Next project Next project Next project Next project Next project Next project Next project Next project

Basket app

DMA’s maintenance app BiO is already an existing web app but needed a UX team to give it a revamp and streamline and simplify the user journeys.

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.

Discovery & research

The discovery phase

We initially conducted some engineer interviews and gathered some insight into some of their issues with the current BiO app. We then used these to form key tasks and personas for the engineers.

User journeys

Mapping the journeys

Because BiO is was an enormous app, we narrowed down our scope main flows to focus on and develop.

These were the ones we felt could do with the most improvement and have the most benefit for the users and the business.

  • Global Navigation
  • Starting job / updating job status
  • Inspect job / completing checklist
  • Raising a job
  • Inspecting a quote
Sketching

Planning out the stucture

We sketched out the system as this is the quickest way to plan out what we wanted to create. Through sketching we can save lots of time later down the line as it enables us to test new ideas and layout quickly. It also helps us understand the whole system very quickly. Knowing the system as a whole helps us make better decisions as we’re thinking of the system as a whole.

UI Design

Baking in the brand

Once we tested and were happy with the user experience, we applied the Quest branding to the app and other visual elements, like animations to bring the designs to life. Moments of ‘joy’ are so important when engaging with users.

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

DMA’s maintenance app BiO is already an existing web app but needed a UX team to give it a revamp and streamline and simplify the user journeys.

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.

Discovery & research

The discovery phase

We initially conducted some engineer interviews and gathered some insight into some of their issues with the current BiO app. We then used these to form key tasks and personas for the engineers.

User journeys

Mapping the journeys

Because BiO is was an enormous app, we narrowed down our scope main flows to focus on and develop.

These were the ones we felt could do with the most improvement and have the most benefit for the users and the business.

  • Global Navigation
  • Starting job / updating job status
  • Inspect job / completing checklist
  • Raising a job
  • Inspecting a quote
Wireframing

Bringing the sketches to life

Once we sketched out the system, we brought them to life using our design programs. We use figma as we can quickly mock them up and then turn them into a clickable prototype. Having a clickable prototype early on in the process as it enables us to test and change UX issue early on, without committing too much time.

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.

UI Design

Baking in the brand

Once we tested and were happy with the user experience, we applied the Quest branding to the app and other visual elements, like animations to bring the designs to life. Moments of ‘joy’ are so important when engaging with users.

UI Design

Adding in the design system

Once we tested and were happy with the wireframes, we applied colours and other visual elements to bring the designs to life. The way we set it up in Figma was through the use of reusable components. This means we only have to update the original designed element and it will update every use of it in the mock ups.

We have developed a great working partnership with ‘Quest’ along with their dedication, guidance, communication and support which has had a great impact on delivering the product to a great standard. This has given our targeted demographic of guests a great experience which we would not be able to provide without the Red Bullet & Quest team.

Ryan Higgins, Regional Entertainment Manager @ Park Holidays UK
Next project
Next project Next project Next project Next project Next project Next project Next project Next project