Hand & Lock

A British embroiderer rebranded for the modern day environment

Services

Brand and identity, Web development

Timeline

2 months

Project team size

4

Role

Lead designer and developer

Website

www.handembroidery.com

In May 2016, Un.titled had won the pitch to redesign the Hand and Lock website.

The aim of the redesign was to refresh Hand & Lock’s online identity, and to set forth a new digital foundation, whilst also presenting the heritage and culture of the studio more accurately.

As a part of the Un.titled design team, my responsibilities involved leading the creative direction and front-end development – whilst also proposing the initial content strategy and creative approach.

Presentation of Hand & Lock page templates

Creative Direction

From the pitch, we discovered that there were multiple business models of the company attempting to achieve their individual goals but were also having to compete in content and real estate on the one website.

With the client on board with the proposed requirements – we set forth and arranged a UX workshop to restructure their information architecture. This would allow us to provide a large scale content audit to proceed with drafting sitemaps.

Psychologist Barry Schwartz coined the term ‘paradox of choice’. Too many options can lead us astray.

This quote resonated with the client and the team, providing the project a direction of eliminating unpopular content while emphasising popular ones.

UX Workshop

I believe facilitating a UX workshop with the client face-to-face is an effective way for the project team to get their voices heard and on the same page before producing any deliverables.

Hand and Lock UX Workshop
The final result of the card sorting exercise that produced a more accessible content structure

The workshop held with Hand and Lock involved a few short presentations introducing the importance of accessibility and UX. The card sorting exercise had all their existing pages on cards, which were then either removed or merged into a rational structure based on data provided by Analytics or from the clients themselves.

Information architecture

Hand and Lock Sitemap
Refining the results from the exercise into a presentable deliverable

The UX workshop held was effective and had engaged with the client on a level where they would consider their content before defining any visuals and brand. This approach allowed Un.titled to produce a sitemap that would serve as the foundation for the new build and allow the backend developer to set up the website requirements and page types.

Wireframes

Hand and Lock Wireframes
As with any new project, rough sketches of page layouts and UI were produced with pen and paper.

Before applying a look and feel to our digital solution, we coded prototypes to test and refine usability, and to also define the page templates. Rapid prototypes allow us to modify quickly and at low cost, allowing for faster iteration. This was made possible with the support of Bootstrap and Hammer for Mac.

Bootstrap wireframes presented across multiple screen widths and devices.

Style tiles

Style tiles are a deliverable that help define a visual language and create the connection between brand and interface elements without defining layout.

Un.titled had visited the Hand and Lock atelier in London to experience the work culture and studio environment. The goal for the day was to draw inspiration that could be reflected on the website.

Swatches for Hand & Lock

As shown above, a brand new palette was produced that was inspired by the the studio environment. The updated colour palette includes 4 primary swatches sampled from the studio environment, such as flags, walls and curtains. The contrast between the new brand colours strike a balance between vibrant and traditional.

Typography

typography
An example of Domaine Display Narrow and Frutiger working in harmony, a balance between elegance and industrial history of Frutiger.

Along with updated the colour palette, we believed introducing new typefaces will act as the workhorse for the new digital identity and embody the unique characteristics of Hand & Lock craftsmanship. The flourishes, elegant boldness of Domaine paired with the thin humanist characteristics of Frutiger, establish the tone of modern day and the approachable spirit of Hand & Lock’s personality and heritage.

Modular design

The front-end developers at Un.titled follow a modular design methodology when coding UI – and so this approach was also considered when prototyping UI during the design stages. A modular approach allowed interfaces to become reusable components across the site—whether the changes revolved around colours, fonts, form elements, or grid layouts. A modular design approach would also reduce the code base and technical debt early on – and most importantly – readable for developers.

Digital brand guidelines

Digital brand guidelines were developed to reinforce the importance of brand consistency in an online environment. The redesign uses Flexible Content blocks (ACF Pro) to construct page templates – allowing full control on how content is displayed using the components provided. A digital brand guideline ensures that the correct content blocks and colours are being used at the appropriate places. The guideline also documents web font usage and licensing, colour values, web icon construction, photographic compositions and page layouts.