Miscellaneous

MiscellaneousUI

A collection of UI designs and interactions I have created over time – this is either personal work or versions of my designs that never went live.

Podcast app - concept

Podcasts@2x

Mountain app - concept

Mountains@2x

Design system/Component library - concept

Design_System_example_1@2x
Design_System_Example_2@2x

Fitzrovia Barbers - original concept

FB original@2x

Virgin Media Careers - vacancy module

RCN Manchester - map module

Beazley

BeazleyUX and UI Design

Beazley Insurance needed a team to deliver a website to help guide new recruits through the lengthy onboarding process. I was the consultant and UX/UI designer on this project.

The client

Beazley - a specialist insurance company with many offices around the world and high-profile clients.

The Brief

Scope, plan, design and build a pre-joiner website for new starters at Beazley across the world.

The Work

Consultancy, planning, UX and UI design, and developer hand-off.

Wireframe prototype
Desktop designs
Mobile designs

NCA

NCAUI design

National Crime Agency (NCA) needed a landing page for their campaign “No Predator Too Big” – raising awareness around the work they do and advertising live vacancies. 

The client

NCA - an essential governmental body that "catches the bad guys".

The Brief

Design a landing page for their campaign.

The Work

Consultancy and UI design.

Desktop
Mobile

Fitzrovia Barbers

Fitzrovia BarbersUX & UI

Fitzrovia Barbers are masters of barbering – their shop is based in central London and I had the pleasure of designing and building their new website. 

The client

Fitzrovia Barbers - a newly-opened and already very popular barbershop in Central London.

The Brief

Design and help build and deploy their new website where users can book appointments.

The Work

Consultancy, planning, UX, UI design, front-end dev, testing and deployment.

Approach

I kicked pff the project with a discovery meeting with the clients where I tried to ascertain all the stakeholder needs and desires. Unfortunately, the previous version of the website didn’t have any tracking or analytics so I couldn’t rely on user/performance data. However, it was safe to assume that the main user need is to be able to quickly book an appointment and any potential pain points lie in this particular journey. The other considerations were related to the features, functionalities and content required by the clients. 

After taking everything into account, I proposed a simple, two-step approach – planning the information architecture and then applying new, fresh designs to approved wireframes.

UX design

I created a new sitemap to illustrate the content architecture and then produced low-fidelity wireframes to showcase the user flow and demonstrate how I have introduced easy and quick access to booking appointments throughout the the site.

Wireframes
Some of the design routes

Design exploration

The client want a new look that was on-brand. However, as a fairly new business their brand was not visually established yet. This allowed for some room to explore different styles and approaches. I created 4-5 different design routes and together with the client I  filtered out the elements they felt strongly about until we reached a look and feel that they were happy with. 

UI design

Once the clients had approved a design route, I applied the agreed look and feel to the wireframes to create the new UI designs. I handed off to the developers designs for desktop and mobile together with supporting imagery and iconography. The site is built in WordPress and the front-end editor is Elementor so I also advised and implemented some improvements in the front-end directly – including micro interactions and animations. 

PeopleScout

PeopleScout CX ToolUX and UI

PeopleScout evaluate the experience of candidates when applying for a job with a specific company. Their final report needed to be translated from simple PDF format to a more engaging platform fit for the web.

The client

PeopleScout UK - a leading provider in specialised talent acquisition solutions.

The Brief

Design a new platform and interface for their CX (Candidate Experience) reporting tool.

The Work

User research, user testing, wireframes, high-fidelity prototypes and final user interface designs.

Approach

As the new product was meant to be a completely different format compared to its initial version (only a PDF report), and the current target users were unaccustomed to this format, it was crucial to perform user testing first. This allowed me to test and validate the initial personas, and also to uncover the major usability flaws of the proposed tool. The quick turnaround meant that low-fidelity wireframes could be used to align the stakeholders and dev team, while a high-fidelity prototype was necessary to get feedback from users that is as precise as possible. 

The timeframe and budget of the project were fairly tight which didn’t allow for extensive research and a more iterative, lean UX approach. 

What?

  • Research
  • Personas
  • User flows
  • Low- and high-fidelity prototype (multiple iterations)
  • User testing
  • Developer hand-off of final designs

How?

Firstly, I conducted initial conversations with the stakeholders to better understand the needs and goals of the business, and also to establish KPIs. 

I then conducted some research on similar reports, services and tools, and created user personas. I put forward a proposal to create a platform with a dashboard interface. The preferred approach by the key stakeholders was to first create low- and high-fidelity prototypes and them conduct user testing with the prototype.

I started with a few different versions of low-fidelity sketches and user flows which I tested in catch-ups with the stakeholders and the dev teams. I created the first high-fidelity prototype based on the team’s feedback and tested it with 6 users. 

I analysed the feedback from the first round of usability testing, refined the prototype to minimise UX and UI pain points and presented it to the team and stakeholders. I repeated these steps in two more rounds of user testing. In total I tested the hi-fi prototype with 17 participants in order to cover approximately 85% of the potential major usability issues. 

Outcome

The timeframe and scope of the project were fairly tight which didn’t allow for extensive research and a more iterative approach during the initial stages. However, as the goal for this first release of the product was to be an MVP, I proposed that the live CX dashboard is tracked with analytics and heatmaps which will provide data for future UX improvements and will allow other useful testing techniques (A/B testing) to be implemented more easily.

Designed with Adobe XD.

GLL College

GLL CollegeUX and UI

GLL College offer courses and training in the sports and leisure industry for both individuals and businesses. Their website wasn’t fulfilling the needs of their users so it needed new functionalities and interface.

The client

GLL College - leading UK provider or courses and training in sports and leisure.

The Brief

Audit of their website's performance, user journeys, conversions, additional functionalities and new designs.

The Work

Consultancy, planning, qualitative and quantitative user research, UX and UI designs.

What?

The client’s request was to achieve a complete revamp of their platform in terms of performance, user experience, and look and feel. In order to achieve that, I had to start from the basics which meant analysing the current performance of their platform and finding the user pain points before suggesting ways to improve the UX. The full proposed scope included:

  • Personas
  • Quantitative research (Google Analytics, heatmaps)
  • Qualitative research (surveys and polls)
  • User flows
  • Low- and high-fidelity prototype (multiple iterations)
  • Developer hand-off of final designs

Initial research

I added heat / scroll / click mapping to the key pages, as well as set up screen recordings to track users behaviour when on the site. While these were capturing over the following weeks, I took a look at Google Analytics to gather insights into high-level user demographics, behaviour and preferences.

User personas and flows

The insights from the analytics shaped the initial draft of the various user personas. Based on their needs and desires, and together with the collected data, I mapped out new user flows and information architecture. 

Direct user interviews were organised to gain insights and confirm the hypotheses made in the user personas and flows.

I also set up a voluntary survey on the GLL site to capture some high-level feedback from our current users, and iterated on the questions to really hone in on the assumptions that were created on the basis of the quantitive research. 

Information architecture
Example of a lo-fi wireframe of updated element

UX improvements

A key milestone in the project was converting all the insights into actions. The next was to apply the knowledge and feedback of the user research into a new and improved interface. I created low-fidelity wireframes to clearly illustrate what the need updates, why the changes are necessary and also how they will improve the overall UX and website performance.

UI design

The final stage was to create new UI designs which are still adhering to the brand guidelines but give the website a slicker, fresher look. Once the new look and feel was approved, I applied the updated UI kit to the signed-off wireframes and handed off the project to the developers.

Outcome

This approach allowed the team and the stakeholders to not only create a better version of their platform with a refreshed look and extra functionalities, but also to give voice to their users and discover crucial details about the the faults in the user experience and therefore – the conversion rates!

A key moment was finding out that there was a very high % of people who said they didn’t find what they were looking for on the site, which eventually lead GLL to reconsider their general offering and re-evaluate their business strategy. This only goes to show the power of user research!

Virtual Events Platform

Virtual Events PlatformUX and UI

I was approached by a SaaS company to help them develop a new product – a virtual events platform, which repurposes a wide range of their existing tools and features. The development is in progress and the client and the project are confidential.

The client

SaaS chat and chat bot platform.

The Brief

Create a new tool - virtual events platform, based on existing functionalities.

The Work

Consultancy, planning, qualitative and quantitative user research, UX and UI designs.

Discovery

I kicked off the project by having multiple conversations with the stakeholders. The aim was to determine the business goals and desires, gain more insight into the existing products, establish limitations, define KPIs and educate the different stakeholders on the key aspects of UX (and its importance). I also used the opportunity to find out more about any existing user insights and competitor research the team already had.

Approach

After gaining a good idea of the business needs and the project constraints, I created a proposal outlining the methodology and timeline I planned to implement. As the new platform is supposed to be largely based on tools and features the business already offers, there was a certain frame I could work with. The key here was to find out what the user needs and pain points are and how these features and functionalities can potentially address their needs. 

One of the user personas

Research

The first step was to define the target users. I used the insights provided by the stakeholders in combination with competitor research to create the initial user personas. Even though at this point the personas were mostly hypothetical due to insufficient user data, this served as a springboard for creating user flows and putting together a selection of questions for a user survey.

The user survey aimed to test the assumptions made so far and help better understand the user needs, clearly outline their needs, pain points and priorities. 

In addition to the survey, I reviewed feedback from users who had previously used the platform’s other existing tools.  

User flows

Planning

While the survey was running and collecting responses, I sketched the first draft of the wireframes. The sketches were based on the proposed user flows. After a few revisions, I transformed the drawn wireframes into low-fidelity wireframes (using Adobe XD) which I presented to the stakeholders in order to get their input but also to bring them up to speed with the scope of the proposed new platform. 

Once I had analysed the survey responses and previous user feedback, I tweaked my previous work refined, data-informed user personas and flows. The research confirmed most of the assumptions made in the earlier stages of the project but it also gave me ideas for other opportunities and ways to address essential pain points. This user data played a key role in defining priorities (for both users and the product team), shaped the crucial user stories and helped outline the first draft of the MVP.

Some of the first drawn wireframes
Hi-fi prototype

UI design

Having implemented all the user findings into improved versions of the wireframes, the next step was to bring the mockups to life using the established design system*. I created two separate and slightly different hi-fidelity prototypes. This enabled me to test the multiple proposed features in a way that is less overwhelming for the users and me. 

Further user testing

I tested the prototypes with users in three consecutive rounds and refined the UX and UI after each round to eliminate major issues, minimise unclarity/confusion and re-align priorities. The final result was the first draft of the MVP.

Hi-fi prototype

Next steps

The approach I proposed for the development of this product was iterative, lean UX. The goal of the first stage was to rapidly create an MVP and launch it as quickly as possible so that there can be more input from real users and much bigger/better user data. The new platform needs constant revisions and optimisation in order to grow and adhere to the ever-changing needs of its users. 

Hi-fi prototype

Design system*

Prior to this project, I had worked with this client on a few other UI projects including a design system. I had already created a detailed, centralised library of styles, components and guidelines that reflect the company products’ neutral look & feel. This allowed me to speed up the UI design and prototyping process for this particular projects as reused and repurposed many of the elements from the UI kit.

Design system elements