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.
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.
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.
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.
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.
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.
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.
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:
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.
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 >
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.
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!
Launch promotion video
“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!”
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