The Problem

DK publishes highly visual, photographic non-fiction for adults and children. They produce content for consumers in over 87 countries and 62 languages, with offices in Delhi, London, Melbourne, Munich, New York and Toronto.

The first iteration of their consumer-facing website lacked an eCommerce platform and only allowed the user to purchase books from retail partners, recouping a smaller percentage of profits.

Users were directed away from the site to retail partners sites which significantly increased bounce rate, friction to purchase and it also reduced trust in the brand.

In addition the product page design was dated and little UX thought had been given to the layout, resulting in an inefficient purchase process and a poor conversion rate.

The Process

We started by defining business and user needs based on personas, user testing results and usability studies. Once established we created user journeys to cover all scenarios. We included the stakeholders from the beginning to ensure buy-in at every stage of delivery.

We used the user journeys to start sketching some ideas for the checkout flow, breaking down each step in the process and deciding what to include on each screen. Fast and loose was the key here to ensure we were focussing on user and business needs and not on aesthetics. This enabled us to discard the weaker ideas and left us with a solid structure from which to start wireframing & prototyping.

Using Sketch to wireframe we created each screen for mobile and desktop and fed them into InVision to build a basic prototype. We included a representative from each discipline within the Web Solutions team to ensure everyone was happy with the proposal, then using the insight and feedback received we tweaked the wireframes accordingly.

With all screens wireframed I worked on the UI in Sketch, adding the middle two breakpoints, creating a consistent look and feel, ensuring CTA’s were clear and making minor UX tweaks for things that weren’t apparent during the wireframing stage.

Finally to hand over I used a combination of behavioural notes and Zeplin, so the development team could view styles, spacing, effects and assets all in one place. A process I used to document by hand over a couple of days now takes a couple of hours, so Zeplin comes highly recommended.

The Result

The finished design is fully responsive and provides the user with a product page that focuses primarily on native purchases whilst also honouring our retail partners.

We made sure to cover occurrences of limited stock (FOMO), out of stock, pre-orders, new editions, added reviews from Goodreads to increase conversion and updated the ‘Look Inside’ image and video lightbox to engage the user.

We created a one-page checkout that is clear, simple and easy to use. The users can see exactly where they are in the process and can skip ahead if they are curious about what is involved.

The checkout process provides clear error messaging when something is out of stock or not available in a specific region and the user is provided with an engaging thank you page to bring them back into the site.

Lessons Learned

Filling in the middle 2 breakpoints at UI stage always takes longer than expected and quite often throws up things that should have been considered at wireframing stage. This was partly a time constraint but all breakpoints should be completed as wireframes before being handed over to UI.

Having completed the Product page in Illustrator (my old weapon of choice) and the bag and checkout in Sketch I am now 100% sure that Sketch and Zeplin are the best combination of UX & UI design tools. Returning to Illustrator was slow and tedious and the thought of writing all the dev styling, spacing and behavioural notes by hand was not a pleasant one. (see below)

behavioural-notes

Adding behavioural notes for devs before the advent of Zeplin.