UI inventory. This provided a more holistic audit, one that had enough ‘science’ behind it, so that it wouldn’t be dismissed as just another subjective opinion.
I presented the findings of the audit to both the e-commerce and brand teams. The internal reaction was very positive and was the first step in raising the profile and importance of UX as a key part of the internal design process.
The second phase of the project focused on designing, testing and iterating our solutions to the issues raised in the audit. These broadly spanned:
Before any design was to take place, the level of fidelity and method to best communicate ideas needed to be decided on.
The fidelity issue was fairly straightforward. As the client was a very literal, image-conscious, luxury brand, low-fi artefacts were unlikely to have the impact needed to communicate design concepts effectively.
So high-fidelity it was. But still with a caveat that the artefacts were first passes, and it was the overall concept that was the focus of discussion.
Unfortunately the existing design workflow needed a little more nurturing. It focused on a page-level paradigm, employing Photoshop to output static assets, across two break points.
Worse still, there was no methodology in place to effectively communicate designs to the wider business i.e. prototyping. The team relied on printing out designs onto A3 paper and talking through the features.
When it came to handing designs off to the external development team, PSDs were shared and it was then a waiting game to see what was returned a few days/weeks later.
Due to the fact that the existing website was responsive, it made sense to adopt an atomic design methodology, focusing on the creation of a central pattern library. This would increase the consistency of the UI and speed up the development of new components and views.
This immediately pointed to Sketch and its support for Symbols. The Sketch pattern library provided the pre-cursor to any wireframe and prototype development.
The next step was to bring the static screens to life. There are a wide array of prototyping tools currently available, but I tend to rotate between Flinto, Principle, Framer and plain HTML (in order of fidelity/complexity) depending on what I need to communicate.
I produced a number of prototypes (using Flinto, Principle and HTML) to demonstrate the improvements to various aspects of the user experience.
These were presented to the relevant client stakeholders, on-device. Feedback was captured and iterations were made, until consensus on a final version was reached.
The development company was also given early access to the prototypes so they were aware of the scope of development work, prior to a finalised version.
They were also looped into discussions regarding the new process of handing off the designs, so that it could also be tailored to their needs.
From previous experience of being a front-end developer, I can testify to the fact that the more detail a designer can provide to a developer about 'how' something will work, rather than just how it looks, the better.
Bearing that in mind, I researched various tools to help deliver a more effective and efficient design handoff process. We settled on the following:
Zeplin.io was used to provide the development agency with a central repository of key modules. It supports measurements, asset export, style guides, commenting and tagging of artboards.
The prototypes created in Flinto and Principle were exported as videos, along with interaction notes that specified UI measurements, transition and animation durations and easing types.
The development agency were then provided with a JIRA ticket for each prototype that contained a video file, interaction notes, and URLs to the static artboards in Zeplin.
In addition, details of UI elements where Google Event Tracking was required were included, so that user behaviour could later be tracked and analysed.
We are now at a stage where all assets have been delivered to the development agency and the initial build is in progress.
Both the in-house teams and myself are excited to see how the UX improvements will perform and how the improved design workflow will help the development agency.
I've put together a list of key learnings gained through this project and more widely over the years whilst working on similar projects:
Unfortunately the scope of this phase of the project meant I couldn’t integrate additional tools/methods for quantitive/qualities data collection and analysis (beyond GA Event Tracking) , but I am hoping to look at using some of the following tools in future projects: