THREE IRELAND PROJECTS

I’ve been fortunate to have worked on many high profile projects with some great people across the digital platforms of Three Ireland.

 

Below you can find a summary of some projects I led from the design side.

APPOINTMENT BOOKING & VIRTUAL QUEUE APPS

Snapshot of the virtual queue start page on tablet

These are appointment booking and virtual queue apps I led the UX research and UI design for.

 

The appointment booking system allows users to book an appointment on a specific date with staff at a Three Store.

 

The virtual queue can be accessed by walk-in customers or around specific in-store events.

 

Both systems were particularly useful during the COVID-19 pandemic when numbers allowed into stores were extremely limited.

 

I also designed screens for the backend system which that staff would use to manage appointments. This part used the Bootstrap framework.

One of my favourite parts of the virtual queue project was creating this wait animation for the live status page. I designed the animation using Adobe After Effects and the Bodymovin/Lottie plugin. It parses the After Effects shapes/animations and exports natively for the web.

The appointment booking system was created mainly for the iPad tablets being used by staff. It also included an appointment booking page for three.ie and the backend system which staff could use to manage bookings.

 

This was a great challenge for me as it involved multiple platforms and libraries inside of the same project.

DESIGN SYSTEM MIGRATION & UPGRADE

One of the largest pieces of work I completed was migrating the existing Sketch Design System across to Figma. After importing into Figma a lot of manual work was required to repair bugs and ensure consistency. Many components had bugs or worked differently in Figma.

Snapshot of a section of the new Design System

I also wanted to add native Auto Layout functionality in Figma to make the components more responsive. There was a lot of effort involved but I knew it would be worth doing to improve the flexibility of our designs. I had previously used the Anima plugin in Sketch but it had only been applied to a small number on components, such as buttons.

48.ie Flows

Snapshot of 48 desktop and mobile screens

48 is a sister network of Three Ireland. It has some cool features such as donating part of your balance to charity. I’ve worked on the 48 Design System and also UI for various flows during my time at Three.

Above you can see an example of some mobile screens I created for an Onboarding Progress flow. The branding and UI is different from Three which I would mainly be working on, so it’s always interesting to switch over and work on collateral for 48.

New Components

My favourite part of the job has been improving the Design System. As part of this I’ve worked within an Agile Squad to create lots of new components using advanced Figma features such as Auto Layout, Component Variants and so on. This has given me the opportunity to lead on design while learning and spreading awareness about new Figma features inside and outside of the team.

Cards component in mobile view

The Cards component formed a massive part of this work as one other type of component was being used excessively across the website. This new component afforded the team some flexibility and meant more content could also be shown within the same amount space as before. Importantly, this could also be achieved without the pages feeling too cluttered or overwhelming.

Cards components (Single and Trio variants) in desktop view

Example of my research around new components

The research phase would form a massive part of my Design Process when creating any of these new components. It’s always critical to see what users are doing, how content is performing, benchmarking against competitors and embracing the latest research to find the best solutions.

Featurettes component on tablet

This is the Featurettes component. The creation of the Cards and Featurettes components allowed me to give stakeholders much more flexibility when creating new pages on site. It also helped solve a critical issue we were having with excessive page length.

Featurettes component on mobile

Featurettes also have numerous variations which adds to the flexibility. There are large and medium as well as light and dark variants. They can also be used with a variety of different image types to showcase different types of content. These also help to keep the experience fresh each time.

Some of the Featurette variants can be seen here

Semantic Site Search

A massive responsibility for me was redesigning the site header for three.ie and adding a new search bar which would use AI technology to find the best results for users.

 

See my case study here for a deep dive into my role on this project.

Digital Assistant for Three Stores

During 2021 Three launched a new type of store focussed on Lifestyle Products. I designed the UX/UI for the in-store Digital Assistant experience on tablet screens.

This was a really interesting experience as the system was completely touch based. No keyboards or mice would be used so there were greater possibilities around touch interactivity and view types.

Example of one tablet browsing journey, showing use of large touchable areas

As the platform was fully touch based and unique, I created and maintained a new Atomic Design System specifically for the in-store tech.

 

Below you can see some examples of the Atoms, Molecules and Organisms I created for this.

Device Support System

I worked closely with the guys at Qelp to define our device support experience. I created screens and engaged in testing to ensure a consistent end to end journey for device support. As a core part of the website it was important that users have an easy way of accessing this information. From an aesthetic point of view it was also important for me to apply the latest styles from the Design System throughout the application.

Lifestyle Online Shop Redesign

After launching a refreshed UI for three.ie in 2021 there were a number of related, but separate, platforms which also needed a UI refresh. I was responsible for a major UI update of the Three Accessories Store, which would become the Lifestyle Store to align with the new approach centred around having a more connected life.