By Jordan Koroknai

Brands are having to think more and more about how their potential customers interact with them across all digital touchpoints, their website being one of those key players. A website should be viewed like a shop window; showing a hierarchy of what’s important, reflecting their branding and visual style and giving users a more holistic view of the products and services they have to offer.

Back to blog home

Web Design: How do we do it?

Brief: A cross-team collaboration

The project brief was to simplify the user journeys for a potential customer visiting the client’s site, allowing them to perform their desired action as easily and quickly as possible, as well as uplifting their outdated design to match current branding. This involved two teams working closely together within Merkle’s Customer Experience department; Digital Experience (DX) and Creative.

Approach: It all starts with data, pen and paper

Web Design Approach Phase 1: Research

Phase 1: Research

The initial research phase was conducted by the DX team; this focused on current site analytics to help gain insights into how users behaved on site and to get a clearer picture of what they used the site for. The outcome led to a refreshed site map and a better understanding of what their customers needed. Using this knowledge, we were then able to reduce the number of components currently in use. A component being a widget-type module that is used to build web pages in a 'drag and drop' fashion.

Web Design Approach Phase 2: User Experience

Phase 2: User Experience (UX)

This involved taking the insights and research to form wireframes as part of the UX (user experience) process. A wireframe is a visual representation of a web page that helps to define the placement, layout and hierarchy of a particular web page and the components used to build it. If done well, it will help users see what’s important and guide them to their destination.

Web Design Approach Phase 3: User Interface

Phase 3: User Interface (UI)

Time for the Creative team to work on the UI (user interface) design. It focuses on colour, branding, fonts, imagery and graphic elements that create the overall design of the website that an end user will be interacting with. This was completed in an agile process one component at a time, in order to stay within the tight timelines. We used a program called Sketch for the UX and UI stages. This gave us the ability to work in a collaborative environment, build responsive design and share work easily with the client for review.

Web Design Approach Phase 4: Development

Phase 4: Development

This was to annotate and send our designs across to the development teams over at Merkle US. From here they built out a library of components in HTML using the wireframes and designs. This was done in AEM (Adobe Experience Manager) which is used by the client to build their web pages. Applications such as Confluence and JIRA were used in this phase which helped us keep track of progress and relay feedback into development.

Results: Efficiency and Simplicity

We were able to reduce the number of components used on their site from 120 to 40, resulting in a more consistent web experience for a visiting user and a simplified process for creating and building web pages for the client. We were able to align all new components with their current branding for consistency with the rest of their digital touch-points.  We also complied with AA accessibility design standards which allow for the majority of the population to clearly read all content on the site.

Share this article