BACK
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.
My Role
Lead Interaction Designer
Key Skills
Interaction Design, Information Architecture, Discovery to Delivery
The brief
To create a single e-commerce platform to maximise 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.
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.
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.
Current VS new workflow
User Research – Listening to our customers
Using the new state of the art research facilities that were available in-house, I was actively involved 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.
In-house focus groups
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.
UX 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.
Existing segmented e-commerce platforms
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
Workshops / Design Reviews
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:
Homepage (responsive)
Product listing (responsive)
Mobile navigation
Custom mobile search
Custom mobile filters
Checkout error states
Checkout (responsive)
UI Design
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.
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.
Password: Marketplace1
Ethnographic study
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.
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 2500 pages of annotated designs in the final delivery!
Example of delivery specifications
The End Result
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
More work
