hero-2

Mail Shop

A beautifully simple online marketplace, combining multiple e-commerce, 3rd party and in-house technologies into one single online shopping experience. Available on all devices.

VISIT LIVE SITE >

My role

Lead Interaction Designer

I was responsible for leading the Interaction Design of the Mail Shop project all the way from discovery to launch, starting back in March 2015 and launching October 2016.

The brief

To create a single e-commerce platform to maximize customer lifetime values across new and existing channels

A steady decline in newspaper circulation within the newspaper industry has led to publishing companies turning to new revenue generators in to order bridge the gap left by the fall in print revenue.

We (the in-house UX team at the Daily Mail) were asked to assist the business in discovering and creating a new e-commerce solution to help retain and attract customers and drive further revenue.

The total budget for this project was in excess of £1.5 million.

Approach

LEAN UX – Build, Measure, Learn

The LEAN approach was adopted from the very start of the design process, promoting a user centered approach that the wider product team could be actively involved in from the offset.

 

Agile Product Development

As part of the AGILE product development process I was involved in the typical AGILE ceremonies: Daily Stand-ups, Sprint Planning, Sprint Showcases and Sprint Retrospectives.

I worked closely with Product Managers, Business Stakeholders, 3rd parties, User Researchers and Visual Designers, Internal Developers and an AGILE Development Team based in Bulgaria.

DISCOVERY

Workshops – Engaging the business

A range of workshops were run throughout the discovery process to help gather business and product requirements.

Methods such as Customer Journey Mapping allowed the wider team to ‘step into the customers shoes’ and evaluate the processes, emotions, needs and pain points of potential scenarios.

 

User Research – Listening to our customers

Using the state of the art user research facilities that were available in-house, I was actively involed in multiple rounds of user research (Focus groups, card sorting, usability testing, remote surveys, contextual interviews) and used the findings from these to refine the experience throughout the course of the project.

focus-groups-2

Key Requirements

Online Marketplace – Multiple sellers, multiple products

Multiple e-commerce technologies will need to combine (for the first time) in order to create an online marketplace, which as a result of our research in the discovery phase was found to be desired by both the business and the user.

Single sign-on & account management

The product had to integrate seamlessly with an authentication and account management system being designed and built internally in parallel; allowing the user to flow effortlessly between other Mail propositions without the need to create another account or re-authenticate.

Inspirational article content

Utilizing the editorial resource within the Mail, inspirational articles should be carefully placed within the shopping experience to provide inspiration and guides on home, gardening and lifestyle.

Optimised for all devices

Analysis from existing e-commerce propositions has proven that the percentage of purchases made on mobile and tablet devices is increasing. Based on a forecast of over 50% of sessions to be on mobile devices, it was a requirement that all journeys were not just responsive, but fully optimised for mobile.

DESIGN

Information Architecture

The Mail has a range of e-commerce shops within their portfolio, all running off a variety of different 3rd party systems. This makes it logistically and financially challenging to align the products and take overall control.

The Mail Shop marketplace platform needed to provide a way to integrate ALL existing e-commerce platforms easily and efficiently.

I mapped out the the overall customer experience between all the existing products, highlighting the overly complex and disjointed portfolio of products.

marketplace_ia_uber

Existing segmented e-commerce platforms

marketplace_sitemap

Sitemap I created to demonstrate the structure of a converged marketplace.

By combining the existing e-commerce platforms into one global marketplace, our customers could browse the entire range of products across the portfolio without having to jump to-and-from the different sites.

Paper sketches

 

Workshop/Design reviews

me_whiteboard_suneer


Wireframes

Working in two week design sprints, I produced sets of fully annotated wireframes for entire templated pages and individual components. The work that was to be completed in each two week sprint was decided by the collective team in sprint planning sessions and taken from the product backlog.

My design process was designing Desktop, Tablet and Mobile all along side each other, ensuring that the experience across ALL devices was fully optimised. Working in this way allowed me to consider the most appropriate functionality and interactions for each device. Supplying a fully responsive set of designs in each sprint ensured there was not any shocks later on in the project about unexpected responsive issues and – ultimately – leads to a consistent and fluid experience that’s not too costly to build.



Below are a few examples of wireframes that I produced and delivered as part of the project:

Home Page – One possible configuration

Product Detail Page – Video example

Configurable Article Page widget variations

Configurable Widgets – Articles

wireframe_mobile_navigation

Mobile Navigation states

wireframe_mobile_search_suggestions

Mobile Search Suggestions

wireframe_mobile_filters

Mobile Filters

wireframe_errors_voucher_codes

Error States – Voucher Entry

wireframe_payment

Checkout – Delivery

wireframe_faq

Customer Service – FAQs

wireframe_contact

Customer Service – Contact Seller


Visual Designs

Throughout the project I worked very closely with the Lead Visual Designer.

I was responsible for handing over signed-off wireframes and collaborating/driving regular design review sessions. The handover process was very flexible, allowing for iterative changes to be made to both the wireframes and visual designs (in parallel) prior to sprint delivery.

When handing over new pieces of work to visual design I made it clear as to why decisions had been made – by either myself or by the business – and any technical requirements that may impact the design.

I organized and prioritised the handover of wireframes during each sprint to ensure minimal re-working of the visual designs and to ensure that all assets were handed over on time and in priority order.

 

gif-1

User testing

One-to-one usability sessions

Multiple rounds of one-to-one usability testing sessions were run to test core journeys within the site across Desktop, Tablet and Mobile devices.

I produced high-fidelity prototypes to best demonstrate the key functionality and to reproduce the intended look and feel of the finished product.


View prototype >
Password: Marketplace1

user_testing_desktop

mobile_user_testing

Contextual Interviews

To gain further insight into user behaviour, I went out to a select number of customers houses to assist in contextual interviews and ‘natural setting’ usability testing.

contextual_interviews

The Delivery

Fully annotated wireframes, userflows, visual designs and specifications for Desktop, Tablet and Mobile were supplied to the development team based in Bulgaria.

I established a delivery method which allowed all relevant parties to access the project deliverables from anywhere in the world and make comments. Using the Axshare tool within Axure, I created a hosted space where all wireframes could be directly matched to the respective visuals and specifications and all sprint deliveries could be archived.

In addition to the online delivery doc, I was also responsible for creating and supplying physical archives of the annotated designs. In total, there was over 2,500 pages of annotated designs in the final delivery!

delivery

The End Result

VISIT LIVE SITE >

visual_homepage

visuals_plp

visuals_article

visual_pdp

visuals_signin

visual_payment

visual_orderlist

visual_404



To see the above examples AND MORE, take a look at the live site.

VISIT LIVE SITE >

Customer feedback

“Have had a brief opportunity to look at the new site – MY GOSH – it is really amazing!!!!!!!

I think it is going to be so busy with new traffic – really worth heavily promoting the new site – others would have to love it also!”

Hazel, Twickenham

Project Team Testimonials

“Stefan has worked closely with the ecommerce team to deliver the redesign of the mailshop.co.uk marketplace site. He is a commercially focused designer and balances the requirements of the customer with the commercial needs of the business. His commitment to delivering excellence in everything he does is infectious, and he’s been a great asset to the project team. It’s been a pleasure to work with him!”

Emma Cathie-Harris, Category Manager