It feels good to gift text, sat in-front of red diamond paper texture

It feels good to gift

UX / UI

Responsive design

Wireframing

Design system

Email design

Now a recognised high street brand, H. Samuel, the home of thoughtful gifting, wanted to remind customers of who they are.

The design team worked tremendously hard and produced a brilliant set of guidelines, from the core brand ingredients such as primary and secondary logos to the tone of voice and brand manifesto.

I was drafted in to review the website, identify inconsistencies and bring it inline with industry standards - then work with the team to develop a design system, to save design and development time.

I also helped in developing the overall brand guidelines, building them into the design system, so client-side digital designers were able to roll them out.

Visual from a presentation showing the website audit

Design system

A large proportion of the project was to review the website, audit and catalogue the inconsistencies such as heading sizes, font family decisions, and build a suite of components for use across the website.

We looked at all button states - primary, second, input fields, radio buttons, checkboxes and dropdowns. There was a larger rebranding brief at play with our design team effectively; being privy to this work as it developed. I was able to merge this offline work across onto the website.

Visual from the GUI document looking at primary buttons and how they change on certain states
Visual from the GUI document looking at input fields and the typography used
Visual from the GUI document looking at drop down, radio buttons and toggles

There were three different badge designs letting users know if the product was on sale, new, exclusive or OOS. They were in various positions on the thumbnail image, in different font styles and colours.

Users didn’t know where to look on each card to get this information at a glance. So if a badge was displayed, we put it in a fixed position on every card. Some would vary in colour but only subtly, as we wanted more emphasis on the text.

Visual from the GUI document looking at product tags such as out-of-stock and how it's visualised

Design rollout

The second stage of this brief was to stress test the designs. Make sure they were actually feasible and could be introduced to the website. The client had already conducted user research over the past year and made certain updates to the website - I had to ensure those updates remained in place.

Paper texture platforms and diamonds formed from the brand guidelines

Each brand had their own page on the website for engagement and SEO. We needed to ensure they were able to use the new brand assets and have total flexibility on style. We built in the option to either select a product in isolation, mount it on one of the brand devices, or go with a lifestyle image.

Three mobile brand template design for Tommy Hilfiger in-situ visual to match the brand language
Desktop brand template design for Tommy Hilfiger in-situ visual to match the brand language

Get in touch

Got any questions or a new project in mind? Drop me a line.

Sent! Thanks so much, I’ll be in touch.
Have you entered your details correctly?