Over the past four months I've been consulting as a UX Designer for a leading UK, luxury fashion brand. This is an account of my experience.
Jump to Key Learnings
If you've not got time to read the entire article, then you can jump to the bottom and just read the key learnings. Hopefully you might be able to use some of them to improve your own workflow or approach.
A Little Context
At the start of 2016, the client's existing website went through a major redesign. This tied in with the hiring of a new creative director, and with it, newly designed products and a facelift for the brand.
As with any major change, 'the new' is always juxtaposed against 'the old'. As such, the new brand, collections and website were under great scrutiny and pressure to deliver.
The website adopted much of the new branding, but due to time, budget and resource constraints, certain aspects of the UX weren’t fully polished.
With no in-house UX Designer, I was hired to help the client reshape various aspects of the user experience.
Laying the Foundations
As with any organisation, the levels of UX understanding differed from department to department. Those who worked in e-commerce and digital design had a good grasp of the what UX was and its importance as part of the design process. Whereas those in branding and non-digital aspects of the business had a lower level of knowledge.
Although I always back-up any UX Design decisions with sound reasoning to justify my choices, I thought it was especially important to emphasis this, given the differing levels of understanding.
UX Audit: Blending Art & Science
My first task was to conduct an audit of the existing UX. This enabled me to understand both where customers were experiencing problems and the opportunities where improvements could be made.
I combined a heuristic evaluation, web analytics review and an 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.
Design & Iteration
The second phase of the project focused on designing, testing and iterating our solutions to the issues raised in the audit. These broadly spanned:
- Navigation
- Interaction States
- Interface Consistency
- General Usability
A Question of Fidelity
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.
Designing in the Dark Ages
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.
New Tools Please
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.
Make It Real
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.
Present, Feedback & Iterate
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.
Design Handoff
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
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.
Prototype Videos & Interaction Notes
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.
JIRA
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.
Event Tracking
In addition, details of UI elements where Google Event Tracking was required were included, so that user behaviour could later be tracked and analysed.
Work In Progress
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.
Key Learnings
I've put together a list of key learnings gained through this project and more widely over the years whilst working on similar projects:
- Adapt your tools and approach to the problem you are trying to solve
- Make it real through prototyping
- Tailor the fidelity to your prototype(s) to your context (problem and audience)
- Don't get attached to your artefacts, they aren't the end product
- Include developers early in the project and provide them as much detail as possible
- Don’t stagnate. Always look to improve your workflow
- Read more Medium articles
Additions & Improvements
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:
