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
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.
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.
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.
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.
Applications we became best friends with: