Clarks Global website

UX, UI, DESIGN SYSTEM & ANIMATION

Clarks is a global, multi-billion e-commerce company and retailer, originating in Britain and specialising in the manufacture of shoes since 1825. I was asked to work with one other designer at Like Digital to provide UX strategies and UI solutions with a focus on some key user journeys defined by the business.

 

KEY UX JOURNEYS –  BOOKING AN IN-STORE FITTING
Another key journey for Clarks was the booking of a fitting, this is one of Clarksí USPS. We took insights from the previous user journey and refined and simplified the decisions we need the user to make. Key of which is selecting a store and time slot. We solved this by allowing users to quickly select a store and see available time slots without moving onto the next step of the journey.

KEY UX JOURNEYS – CHECKOUT
One of the key journeys Clarks were seeing a higher than average of drop off from was checkout. This is a vital journey and itís simplicity would be key to the websites success. We simplified the journey to 3 decision, Bag, Delivery and Payment. This was designed as a single page checkout designed to get the user from start to finish as quickly and easily as possible.

UI DESIGN`
I was asked to lead the UI phase of this project selecting a team to work along side me. Deadlines for delivery were incredibly tight so an efficient work flow was key. The user interface was inspired by the Nike website and was predominantly white with hints of colour for key CTAs. Accessibility plays a key part in the UI of this site so we worked closely with an accessibility agency to advise and review out designs.

DESIGN SYSTEM
We designed over 200 components with different variations and capabilities. This allows the website to not only be versatile but also remain consistent throughout and across each region. Every component was annotated to allow a seamless transition to development along with any animation requirements.

Previous Project

SIRO Native App

PRODUCT DESIGN, UX, UI, DESIGN SYSTEM & ANIMATION

SIRO is an destination fitness and recovery hotel and club. They have plans to roll-out hotels all over the world and have already partnered with AC Milan to offer the best facilities for professional athletes. I was asked to Lead this project for Like Digital to provide UX strategies and UI solutions and work closely with the developers to choose platforms and systems to make it all possible.

MAPPING JOURNEYS
Before we started designing the user experience we first needed to map out the flows. As this app is able to do so much it was key that we separated out these journey as clearly as possible while keeping the journeys themselves as simple and familiar as possible. We took inspiration from Nike training club as well as Uber eats, Barryís bootcamp and booking.com to bring together everything in one place for SIRO members and guests.

KEY UX JOURNEYS –  BOOKING A STAY
One of the key journeys needed for the SIRO app was the ability to book and manage a stay at one of their resorts via the app. The business required two different routes to book a stay, one where you filter available rooms and another where you select your room first. This brought with it some challenges to keep the journey as simple as possible without distracting the user.

KEY UX JOURNEYS –  ORDERING FOOD
Another key journey for SIRO was the nutrition offering, they wanted to give guests and members the ability to order food from the multitude of restaurants within the building to their room or location within the resort. There were multiple routes into this but we needed a way to simply find the restaurant, view the menu and order as well as notifications to reassure the user the status of their order.

UI DESIGN`
SIRO brand team ha d strong guidelines for the app. We worked closely with their head of brand to make sure our designs were compliment with their brand. Simplicity was key with lots of white, subtle rounded corners and big focus on imagery but above all with such a complex app it had to be easy to navigate.

DESIGN SYSTEM
We had to create a comprehensive design system with detailed component notes written for each component, the noted included details about the anatomy of the component as well as notes on functionality and animation.

Next Project

Previous Project

Noble Panacea website

NP is a very high end skincare brand, they focus on market leading research with use of famous endorsers and brand ambassadors.

I was asked to Lead this project for Like Digital to provide UX and UI solutions for a replatform and re design of their website. I had to work closely with the client and the development team to ensure every component allowed for maximum flexibility, and keep in close contact with the development team to ensure all designs were validated and deliverable within the scope of the project.

UX COMPONENTS

One of the key parts of this project was mapping out all the components we needed site wide, this was very important as the build was quoted on a component basis. The first part of my job was to go through the pages of the current site and map key user journeys, in the process making note of every different component we might need and working out how minor changes to components could enable us to create everything we might need.

UI DESIGN

The UI for this site had to be clean minimal and very white. The client wanted the colour to come primarily from the imagery so we created a palette of warm greys and subtle colours with strong focus on elegant line work and detailing.

UI DESIGN

The routine finder questionnaire and the shelf builder was a key journey for NP part of the service they offer is a consultation to help you discuver the best products for your skin, this was their opportunity to bring that knowledge online and into a bundle builder.

DESIGN SYSTEM

I created a comprehensive and thoroughly documented design system for this project, i had to outline all the editable functionality and every element that was going to be customisable by the client, including examples of how and where they can use each component.

Next Project

Previous Project

Chaletbau Matti Website

UX, UI, DESIGN SYSTEM  & ANIMATION

Chaletbau Matti is a bespoke chalet builder in the Swiss Alps. They offer an incredible bespoke and high end service. The whole building is hand crafted to your specific requirements. I was briefed by Saentys to bring this offering to life through a very indulgent and beautiful website with a heavy focus on beautiful UI and animation

UX UI

I worked on refining the wireframes and leading the UI and motion design.  This involved mapping the content, wire-framing and designing the site. As well as specifying motion and animation and a full developer specification document to aid hand over. I also created a style guide and custom design system to ensure consistency and scalability. The website has since won a web excellence award as well as receiving an honourable mention from AWWWARDS.

DESIGN SYSTEM
I created a simple design system and style guide to ensure consistency across the site and to make adding additional content as simple as possible in the future. This aided developer handover hugely and was delivered along side a very thorough animation guide.

Next Project

Previous Project

The Future Works Website

UX, UI, DESIGN SYSTEM  & ANIMATION

While working with the team at Saentys I was briefed to wireframe and design the Future Works website a new office development taking advantage of the newly opened Crossrail station right outside!

This project involved working out the Information architecture, mapping the content, wire-framing the key flows as well as UI, specifying animation and a full developer specification document to further aid hand over. I also created a style guide and custom design system to ensure consistency and scalability.

UX UI
A key part of this project was the visual really focusing on making the UI bright bold and fun! We did this while keeping in mind usability and keeping the UX as simple as possible with clear and prominent navigation which gives access to all pages of the site.

DESIGN SYSTEM
I created a simple design system and style guide to ensure consistency across the site and to make adding additional content as simple as possible in the future. This aided developer handover hugely and was delivered along side a very thorough animation guide.

Next Project

Previous Project

PI59 Website

While working with the team at Saentys i was briefed to wireframe and design the PI59 website. I also visualised the motion of the homepage as it had a unique scrolling animation.

I had to prepare the files for developer handover, this included creating a style guide and custom design system to ensure consistency and scaleability.

 

Next Project

Previous Project

Arsenal competition web app

PRODUCT DESIGN, UX, UI

We were approached by Arsenal and Citroën brief to promote the partnership between Arsenal and Citroën to Arsenal fans. Our idea was to create a predictor web app where users compete  for the most correct predictions. With Citroën putting up a car as the main prize. The key to this game was to keep people coming back each week to predict Arsenals result.

Arsenal competition landing pageArsenal competition game

UX UI

The key element to this app was to keep users coming back and sharing with friends to help spread the word. We achieved this by rewarding social sharing and integrating with Facebook to show your facebook friend list as a leaderboard to encourage health competition!

The game was incredibly well received amongst fans and we grew the app to around 10,000 active users in the first season. CitroÈn and Arsenal weíre so happy with the results they continued running this competition for the next two seasons!

Arsenal competition game

DEVELOPER HAND OVER
I had to work closely with the developers to deliver this product. We created a style guide and full documented handover files to help make the transition as simple and seamless as possible.

Next Project

Previous Project

Glenny Databook web app

PRODUCT DESIGN, UX, UI

Glenny are a market leader in the real estate sector and the only company that conducts a large scale annual market analysis across all their sectors which they publish and share across the industry.

While working at J2 I was asked to develop a digital product for Glenny’s to package their databook into a updatable app to allow them to push updates more regularly and make it easier for their users to share specific insights.

ON-BOARDING
A key flow for this product was the on-boarding process we tested multiple flows and kept the navigation really simple. We wanted to focus the users at this stage to allow tailored data to be delivered to the user. All users were greeted with a market commentary overview from Glenny on successful completion of the on-boarding flow.

UX UI DESIGN
The key to this product was breaking down and categorising the information architecture in a way that allowed users to quickly filter down through the masses of data and find exactly what they need. This app is very data heavy so data visualisation was really important. We created multiple chart and table components to allow Glenny to quickly pull together complex information and display it to their users.

Next Project

Previous Project

Voca brand & app

Creating a brand and designing an app for a transportation service targeting rural areas in the UK involved more than just visual appeal—it required a deep understanding of user needs and technological integration to ensure seamless functionality and accessibility.

Our app design centered on rural user needs, prioritizing intuitive navigation and a user-friendly interface. We aimed for simplicity without sacrificing functionality, ensuring easy access to transportation services for small village users. Visual elements were meticulously crafted, leveraging customized icons and colors that conveyed reliability and approachability. Functionality was paramount, with a robust design capable of operating in areas with weak network connectivity. Tailored features specifically addressed the challenges of remote locations, emphasizing convenience and accessibility. Continuous refinement through testing and user feedback resulted in an app that seamlessly connected rural communities with reliable transportation services.

In crafting the brand, our focus was on creating a standout identity within the transportation sector. The brand exuded reliability and approachability through a clean and distinct visual identity. Customized colors, icons, and typography were carefully chosen to resonate with users and ensure immediate recognition amidst competitors. The brand’s persona reflected friendliness and dependability, aligning perfectly with the app’s functionality. This cohesive branding effort not only enhanced recognition but also established a sense of trust, making the transportation service a recognizable and reassuring choice for users in rural areas.

Next Project

Previous Project

TERMINI Brand

The opportunity to pitch for Termini’s brand and campaign creation for their new flagship office building in Sandyford, Dublin was a momentous invitation. At the heart of this venture was the focal point of emphasizing the site’s connectivity to the city, a critical selling feature tailored to attract the attention of the vast tech companies based in Dublin. The objective was clear: crafting a brand that not only stood out but resonated profoundly with this audience.




Understanding the landscape, we recognised that a substantial element in reaching and engaging these tech giants lay within the digital realm. The brand and campaign needed to harness the power of digital offerings in advertising and website presence. This entailed crafting a narrative that highlighted not only the physical connections to the city but also the digital infrastructure and capabilities that would cater to the tech-savvy audience.

Termini_Brochure_Cover
Termini_Brochure_Spread1
Termini_Brochure_Spread2
Termini_Brochure_Spread3
Termini_Brochure_Spread4

Our pitch aimed to encapsulate this essence—melding the physical proximity of Termini to Dublin’s bustling tech hub with an innovative, digitally savvy brand identity. We envisaged a campaign that seamlessly integrated both worlds, portraying Termini not just as a physical space but as a digital ecosystem primed for the needs of modern tech enterprises.

In essence, our strategy revolved around creating a brand narrative that bridged the physical and digital landscapes, amplifying Termini’s appeal to the tech-centric audience and positioning it as the epitome of connectivity, both in the physical and virtual realms.

Termini_Website

Next Project

Previous Project