Icebergs, speedboats and oil tankers: The design behind the design of the new lostmy.name
“It’s so easy to use, it’s like magic” - user tester when using our ‘new design’
In the past few weeks we’ve been shipping a series of very significant updates to the user experience for Lost My Name customers - you can check out the purchase journey part of this for yourself here.
Image: Our beautiful new basket page. I challenge you to find a better basket on the internet
At the time of writing it’s nearly ‘done’ in as far as the core building blocks of our future UX are now live on the site and part of the delivery team has moved onto the integration of our exciting new book while a new squad gets to work optimizing the experience.
This is a big milestone for the company, and represents the culmination of around six months technical, creative and organisational change work.
I’m writing this post to record and highlight the many projects and people that contributed to this achievement.
I hope it will be useful as reminder to all of us working in digital businesses that designing and delivering beautiful, simple, scalable user experiences is about so much more than the graphic design of the interaction layer with the customer.
Years ago, in my first proper job, my old boss and mentor Joe Heapy used to tell me “service design is an organisational problem”, and I see this more and more every day in my work.
The user interface of lostmy.name is like the tip of an iceberg - it’s the visible portion of the much deeper collection of complex technical and human delivery systems that lie below the surface. The tip is the ‘new design’ that customers now experience.
But to make that design simple, elegant and scalable means thinking and working hard on the myriad of ‘designs’ that the customer don’t see - and that most people don’t think of as design at all.
Image: Lazy screenshot for a lazy metaphor
In the immortal words of the late Prophet Steve Jobs “Most people make the mistake of thinking design is what it looks like. That’s not what we think design is. It’s not just what it looks like and feels like. Design is how it works.”
Making a system like Lost My Name ‘work’ at scale is a lot of work. As an illustration, it’s fair to say that almost everyone in the company was involved in some way in shipping this ‘new design’.
So what is the ‘new design’? Well, it’s a beautiful, consistent, performant, mobile focused shopping experience for customers. That’s the tip of the iceberg. But it also gives us several other business benefits under the surface:
We now have a front-end codebase and UI system ready to sell more than one product
We now have a content management system that makes it very easy to add new internationalised sites and products with minimal developer intervention
We can nowiterate and test UI changes aimed at increasing conversion rate and other metrics much, much faster
Our build and deploy time has decreased, making it less frustrating to ship
And, above all else, due to the modularisation and consistency at a UX / UI and code level we can now start separating different parts of the customer experience out more easily and handing responsibility for smaller pieces over to our new product squads.
In this post I’m going to outline the major projects that lay behind this ‘new design’. I hope this is useful for anyone in the process of wrestling with transformation in their own business.
It’s also, in part, an attempt to document this work for posterity and celebrate the hard work put in by all the team - doing all this whilst the company 6x’d headcount has been no mean feat.
The major projects were:
A big refactor of our store front that we called project Mermaid
A new design language and principle driven UX
A componentised front end that we called project Jester
A new, abstracted CMS powered by Contentful
An organisational transformation to take advantage of all this
These projects (or ‘designs’) are interconnected and there are many other small pieces I have missed out.
Project 1: The enabler, code name ‘Mermaid’
During the christmas quarter of 2014 we tried, and often failed, to ship a range of experimental features and tests to improve conversion rate and basket size. One of the principle reasons for this failure was our underlying mostly monolithic code base which is built on top of Spree, an open source ecommerce engine.
Developers were trying to ship simple stories like ‘allow a customer to add multiple items to a cart from a landing page’ and getting caught up in the complex business logic of the Spree core. The result was a lot of heads on keyboards and frustrated product owners.
At the end of 2014 we held our first all hands quarterly engineering retrospective. Amongst other things we agreed to re-architect Spree to move the storefront logic out of Spree all together. This would achieve the twin goals of enabling full stack developers and UI designers to ship experimental features faster, whilst core engineers could remain confident in the integrity of the central ecommerce platform. Patrick Sinclair, our head of Engineering described it as “tankers and speedboats”. Predictably, he was immediately nicknamed The Deacon.
Image: Patrick Sinclair yearbook photo
After spiking a range of options we settled on a half-way house - we’d deliver Mermaid as an app within an app, separating logic within the codebase, but not going so far as to have the storefront communicate with the backend over http as two separate services.
Image: A snapshot of our ‘All The Architecture’ diagram showing Mermaid at the heart of everything. With a Monkey on her shoulder.
During February and March of 2015 Simon Coffey and Patrick Sinclair led the effort to complete this programme of work as quickly as possible. Back end re-factors are a hard project to sell to the rest of the business as perceived progress is low so pace was important.
By mid April 2015 Mermaid went into QA and was live by the end of the month. So far so good, but from a ‘new design’ perspective … nothing had changed! Mermaid shipped with exact like for like features and UI. Very much a below the surface part of the iceberg.
But we now had a strong foundation for the application of our new UX ideas...
Project 2: New, principle driven design language
At the same away day we’d held a separate meeting about the need to ‘refactor’ our design language. We had several goals here.
First, we wanted a more flexible digital design system that allowed for easier experimentation in conjunction with the de-coupling that would happen with Mermaid.
Second, we needed toiterate our visual style to de-couple the Lost My Name brand from the Lost My Name book in advance of our new book - historically the brand, site and book have been one thing. That had to change.
Image: The Lost My Name homepage over time
Thirdly, we needed to really focus in on improving the user experience on mobiles and smaller devices. In the previous quarter our traffic had become majority mobile, and this was increasing. It’s around 70% mobile at the time of writing.
The legacy design we had in place was creative and fun, but very visually led. We had several different core layouts within a single journey, and the design was desktop first.
So we set to work to evolve the design language, in parallel with a significant change to how we handled our front end code base (the next project, below). This work was led by Simon Cook our creative director, with significant input from Lee Giles and myself (Nick Marsh).
The end result is our ‘new design’. Behind this design lie two big themes - consistency and modularity.
First, consistency. With our new design we’ve tried to make sure that the user experiences a consistent approach to creating and editing our personalised products throughout all parts of their journey. Previously we had four different ways to edit the customisation options of their books.
Image: UX audit of the legacy design showing three different templates in three consecutive steps
Now, on the landing page, preview page, basket page and in their account area users see the same interface components and rich, full screen preview.
We’ve also pushed consistency into other parts of the experience - for example using the same grids throughout, consistent call to action colours and buttons as well as other small principles such as containing key interactive areas inside drop-shadowed cards with a red highlight.
Image: Some of our components
The second big theme is modularity. We’ve broken all the design components down into small individual parts, and made those parts work elegantly at all screen sizes (optimised best for mobile) and on any page.
Image: Example responsive ‘card’ components for display any combination of icon, header and paragraph text
This gives us much more flexibility in terms of iterating on the design and experimenting with different layouts and content within components. It also is the foundation for our next big iteration when we’ll introduce our next book - it will look gorgeous and unique, whilst feeling familiar and re-using very similar modules and layouts. But we can’t show you that quite yet!
The end result is a foundation for growth in the variety of user experiences we can provide and the range of tests we can run. It is also hopefully a framework that will make bringing new designers on board easier and quicker. This project is the tip of the iceberg - although the ‘design’ you don’t see is the vast array of future designs and iterations made possible by a principle driven design system.
We still have to fully document the system, but once we do I’ll write about it in more detail.
Project 3. A componentised front end
This project, code named Jester, is the implementation layer of the previous project and was led by Barney Fox, our head of interface development.
The principles behind Jester are those of the new design language - consistency and modularity, but they add another - re-use.
All our interface components are now delivered as smart partials of code that can be easily reused, updated in one place and then we see the change propagate to all instances.
We also refactored the asset pipeline as part of Jester (code named project Pigeon) to improve how we handle image compression and storage (we also removed a lot of images from the build with the next project below).
Finally, we’ve introduced a smart theming system whereby we can apply a different theme to the same component. This is the technical expression of the change to the design language mentioned above whereby we needed to start differentiating between Lost My Name the brand, Lost My Name the book and our new product.
Jester is paying off in spades now with our current major project to add our new product to the site - it’s been a breeze to build a new product creation flow.
Project 4. A new, heavily abstracted CMS
The final technical piece to the puzzle has been the introduction of a heavily abstracted CMS to make the internationalisation of our sites easy peasy, and allow us to do content experiments more easily.
International sales are essential to Lost My Name. We’re a UK business but the vast majority of our sales come from outside the UK, and we currently have our site and book translated into seven languages - this will be ten by the end of 2015.
Prior to our CMS, managing our international sites was hard. To take one example, it meant our deploys took forever. We had to upload internationalized versions of all photos in every build - non trivial when you have a gallery of 30 images times seven languages that needs to be re-sized into four image sizes. That’s 840 images in the build. Not good!
On the text side, we had been using a clever crowd-sourced translation system that took our YML file and translated it into the right languages. This was ok, but it meant we had some weird situations - for example all our customer reviews on the French site we just translations of UK customer reviews.
So along with our new modular design language and front end we also ripped out every possible piece of content that needed more than a crowd-sourced translation and put it into a clever content management tool called Contentful. This project was led by Jesse Zwaan and Pete Roome, two of our smartest full stack developers.
Image: The Contentful UI
Contentful is essentially a CMS as an API. You add your content using a standard CMS UI, but then developers can easily query the database and request any combinations of that content in very abstract form, and then pipe into into whatever content containers you want - for example, our very modular front end!
The end result is that all its now almost trivial to ship an international site (and edit the content on it) and our build and deploy time has gone down significantly.
Again, this is a classic below the surface ‘design’ - customers don’t notice it explicitly, but it contributes to a more personal experience and has made our business more efficient and able to change faster. This leads nicely onto the biggest project of all - the ongoing organisational design work we’ve been doing to enable our growing team to take advantage of all this flexibility and modularity.
Project 5. An organisational system - squads - to support this
This deserves, and will hopefully get, a whole post in itself and is 100% a below the surface ‘design’ we’ve been working on. During this extensive rebuild we’ve also been re-factoring the organisational structure of Lost My Name to make us more agile and more focused. Our big (small) idea is ‘squads’ - small autonomous teams that have a clear mission, a single KPI to focus on and the ability to ship change without asking anyone outside their squad for help.
Image: Slide from an internal presentation on our ‘squad’ system
So whilst we were rebuilding our site and systems, we also rebuilt our teams, chopping the website team into ops, growth and product, and then further devolving into Lost My Name Book, Purchase Journey, Loyalty, Infrastructure and Performance, Product Delivery and many more.
This has been possible, in part, because of the modular, consistent technical and design systems we’ve put in place.
For example, the ‘Purchase Journey’ squad can now confidently experiment with new content in the gallery or layouts on the basket page knowing their designs won’t conflict with the ‘Lost My Name Book’ squad’s changes to the product preview, and they can all rest happy in knowing that their changes will only lightly impact the Infrastructure squad because the storefront is de-coupled from the Spree core… and so on.
Conclusion: Design is a big word
The main driver behind all of this of course has been Lost My Name’s transition from a brilliant personal project to a high growth, VC backed international business. I think the biggest achievement is that we’ve achieved these relatively complex projects as a very new team, working together for the first time, constantly onboarding new team members throughout, and considering the bigger picture of the design behind the design. This is something to be proud of I think. It’s been an epic personal journey for myself and I’m sure for other people on the team as we’ve gone from 10 to 60 employees over the past nine months - and we’re just getting started. I can’t wait to see the impact of our new product this summer.The biggest legacy from this work to systemise, separate and modularise is the technical and creative platform that will (I hope) allow our squads system to flourish and help us scale another 10x whilst staying agile and focused.
However, it’s not true to suggest a one way relationship here. I’m a big believer in Conway’s Law which states that “Organisations which design systems ... are constrained to produce designs which are copies of the communication structures of these organisations”. I guess its the ‘law’ version,, or the output of, Joe’s observation that “service design is an organisational design problem”.
I hope that a big part of why we’ve now got the beginnings of a modular, flexible iceberg of systems (to stretch a metaphor) is because we’re genuinely building an organisation that empowers the smart creative people in it to make their own decisions, master their domain and get on with shipping and learning every day.
Time will tell. But we’re off to a good start!
P.S - If you’d like to come and help out with all this, we’re hiring across the whole stack and are especially looking for people who care about the design behind the design