Icebergs, speedboats and oil tankers: The design behind the design of the new lostmy.name

This post was written by Nick Marsh, designer, product manager and general busybody at Lost My 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

Join us!

If you’d like to come and work, play and hang out with us, here’s what we’re looking for. Though you could just send us something phenomenal, leaving us with no choice but to follow up, to:

careers@lostmy.name

Financial Controller

We’re looking for an experienced Financial Controller to oversee the global reporting and compliance functions, leading a team of two finance analysts to deliver continuous improvement in the financial operating model.

Reporting into the CFO, the successful candidate will demonstrate a high degree of commercial acumen and be comfortable working in a fast-paced and dynamic start-up setting where every week will present new opportunities and challenges to navigate.

With ample room to grow, this role is a great chance for the right candidate to work alongside the leadership team and deliver tangible improvements for the business allowing us to deliver on our 3 year strategic plan.

The key areas of focus are:

Reporting

  • Ownership of the financial month end close process for Lostmy.name Ltd and Lostmy.name Inc
  • Consolidation accounting for Lostmy.name Group (UK and US Entity)
  • Preparation of month end commentary packs and presentation of results to the senior leadership team together with key action points
  • Cash flow and working capital management

Compliance & Control

  • Overseeing global tax, regulatory and compliance agenda including Sales, Income and Payroll Taxes in the UK and US
  • Owning the year end external financial statement audit process
  • Laying down a robust control environment in order to deliver accurate financials with a high level of data integrity

Business Partnering

  • Leading cost saving initiatives to help the business to improve operating efficiency
  • Working closely with the BI team in order to streamline and automate the reporting process
  • Working closely with the engineering team on the R&D tax credit workflow

Requirements

  • Qualified accountant (minimum 2 years PQE in an industry position) - ACA, ACCA, CIMA
  • Experience managing a team and overseeing a financial month end close process for a group
  • Experience with US accounting/tax is a plus
  • Willingness to roll up sleeves and get stuck into the detail while simultaneously keeping an eye on the big picture
  • Self- starter, high degree of emotional intelligence and comfortable making decisions where there may be a high degree of uncertainty
  • Experience using cloud accounting software; we use Xero in combination with receipt bank. Experience of these packages is a plus but not a requirement
  • Experience in start-ups/tech/publishing/retail/consumer products is a plus but again not a hard requirement

Benefits

  • Competitive salary and a real stake in the business - you'll share our success
  • Be part of a fast growing company creating products that are really loved by customers all round the world
  • Manage your own work as part of a small, tightly knit team
  • Flexible office hours
  • Awesome BUPA healthcare for you and your whole family
  • Fantastic mobile phone scheme & childcare vouchers benefits
  • Training budget of £1000: we'll sponsor any conference you wish to attend or speak at
  • Delicious team lunches

Senior Copywriter

Words are brilliant. But there are millions of them, and without good writers, words just sit there in the wrong order saying the wrong things. Rotters.

We’re looking for a remarkably creative comms writer who can make words do exactly (exactly!) what they need them to: entertain, surprise, jump through hoops, play the cello — anything they command. Someone with the ability to be playful and hilarious, who isn’t afraid of a good pun, but who is also marvellously disciplined and hard-working. And they should be brilliant at ideas too.

Feeling confident?

You should have a lot of experience writing comms. You have the knack to be funny and clever without being self-indulgent. You have a light touch but can also land a message with real weight. You know how to edit yourself, how to think about messaging hierarchy, how to make people open emails, click buttons and buy products. And you should be able to create funny, sharable content that your mum might see and chuckle at before boasting to friends that you came up with it. You should also be self-motivated, pro-active, collaborative and self-sufficient. You should know how to write for email, social media or on the side of a banana.

Most importantly, you can make people smile every time they read your words or ideas.

Lost My Name is one of Britain’s fastest-growing brands and this is an opportunity to help turn a successful start-up into a global name. We are a playful, kind brand. This opportunity will be ridiculously exciting to a smart, funny, eloquent, engaging, intelligent, autonomous, experienced, creative and all-round superb candidate.

The team you’ll be working in delivers creative output at a higher-frequency than any other team in the business. We literally ship handfuls of content every week and watch and learn from the public reaction. We get to directly shape and influence the brand by continuously exploring and publishing new concepts and ideas.

This role is the sole copywriter in the team, which gives you a central role in expressing the tone of the brand. You will report to a very experienced writer, who can help you sharpen your talent even more.

Key areas of focus

  • Writing emails and blog posts for our weekly Editorial content
  • Writing humourous, sharable content for Twitter & Facebook
  • Collaborating with our designers to devise and develop creative editorial concepts
  • Writing pithy, dad-joke-esque comments on our Instagram content
  • Writing emails for product promotions
  • Helping to firm up our tone of voice for Twitter and Pinterest channels
  • Helping to champion and promote the brand tone of voice across the business

Experience

  • 5+ years’ experience as a copywriter for well known and/or playful/entertaining consumer-facing brands
  • 3+ years of experience with SEO, email, web copy
  • Ability to produce both long-form and short-form writing
  • Extensive experience and understanding of all social channels, including behaviours and algorithms

Benefits

  • Competitive salary and a real stake in the business - you'll share our success
  • Be part of a fast growing company creating products that are really loved by customers all round the world
  • Manage your own work as part of a small, tightly knit team
  • Flexible office hours
  • Awesome BUPA healthcare for you and your whole family
  • Fantastic mobile phone scheme, childcare vouchers benefits
  • Training budget of £1000: we'll sponsor any conference you wish to attend or speak at. Travel the world and share your knowledge on us!
  • Delicious team lunches

Japanese Speaking Customer Service Angel

We're looking for someone to help us share the Lost My Name magic with our friends in Japan! We’re looking for a brilliant Customer Service Angel to help support our increasing presence in Japan. What kinds of things would you get up to in this fun, flexible role? We are so glad that you asked...

Customer Service, mostly...

People approach us with all kinds of queries. Sometimes they just want to know how much shipping is to Tokyo (it's FREE!). Other times, a book has gone on a different route in the mail system and we need to re-create it ASAP in time for a birthday party. Occasionally a customer would like to change a shipping address, or add a personal dedication.

We also get an incredible amount of feedback with ideas for improvement and future products, and just lots and lots of heartfelt thanks for such a wonderful book. These are just a handful of examples of the issues and topics we deal with on a daily basis. And we like to answer and solve ALL of these inquiries in the same way: super responsive, polite, empathic and delightful. We handle our customer support through a collaborative online platform where you can respond, solve, escalate, re-assign, tag and archive all queries in an efficient and transparent way. If you know how to use Facebook or Gmail, you’ll have no problems with our system.

What else should you know?

The role is a remote working opportunity, with some time flexibility to suit you - e.g. mornings, evenings and weekends. There’ll be an induction period with our marvellous training and co-ordinating team, along with a detailed explanation of how it all works.

So do you think that you can help us? If so, then click Apply Now.

  • You got a flair for friendly and positive digital communication - you know how to be nice, and genuinely lovely online
  • Fluency in Japanese and English language (written and spoken) essential
  • You’re looking for a genuinely exciting and meaningful new adventure, and the idea of making children more curious and kind sounds awesome
  • You must be available for at least 20 hours per week (flexible, including weekends)
  • You’re a super motivated, dedicated, smart and an energetic self-starter
  • Ability to work under pressure and adapt quickly to adverse situations

Lead Designer

You’ll have a real passion for design and communication, and a genuine desire to do brilliant work. As a Lead Graphic Designer you will be responsible for taking the lead on the creative development of design projects across multiple platforms. Driving the creative standards of the Design Team and developing junior designers’ creative abilities, making sure the creative brief is fully explored and delivered to the highest standards.

Key Responsibilities

  • Responsible for the design and production of graphic design across multiple platforms.
  • Responsible for working with internal clients to deliver requirements on time and in line with the brand style.
  • Responsible for applying and co-ordinating the design across the brand.
  • Use a good awareness of design processes to question and challenge design briefs and solve design problems.
  • Be aware of current design trends and attitudes to help inspire the team
  • Understanding peripheral processes, i.e. print, interactive and mobile platforms.
  • Manage and develop junior designers.
  • Work closely with the studio manager to manage and prioritise the workload on a project.

About You

  • Ability to deliver against tight and complex timelines.
  • Knowledge of and sensitivity to trends influencing design in general.
  • Ability to manage multiple and competing work priorities, demands.
  • Strong written and oral communication skills, including ability to make persuasive presentations to internal audiences.
  • Driven and passionate.
  • Stress resistant and confident.

Qualifications and Experience:

  • Recognised design degree.
  • Significant industry experience.
  • Versatile and open mined.
  • Meticulous crafting and attention to detail.

Skills:

  • Excellent communication and presentation skills.
  • Dedicated, passionate and challenging.
  • Ability to lead, manage and inspire.
  • Strong ideas with a portfolio to match.
  • Self motivated and a team player.
  • Loves discipline of identity and branding.
  • Excellent working knowledge of Adobe Suite: Photoshop, Illustrator, InDesign, Acrobat

Senior Brand Manager - Books

We’re looking for an exceptional product / brand manager to join our team and look after the ongoing growth of our book portfolio across territories, formats and licensing opportunities. This important role includes taking stewardship of the growth roadmap for our flagship title Lost My Name.

This role is similar to a licensing manager position within a publishing firm but with two vital differences.

The first difference is that you’ll be working within a very agile, vertically integrated business that currently does all it’s own retail, marketing, manufacturing and product design with a sales footprint in every major market in the world.

This means that if you have a plan to achieve growth through change to any of these functions you can make that change happen within days or weeks, not the usual timescales of months or years.

The second difference is that all the brands and products you will manage use personalisation and technology in creative ways to tell their stories. This means that you can have a one to one relationship with customers through the products you market to them - but it also means you face interesting challenges in doing traditional licensing deals.

If these opportunities and challenges excite you, and if you have a track record in building entertainment brands, particularly in the kids and families space, we’d love to hear from you.

Key responsibilities and targets

  • Drive incremental revenue growth in our book range
  • Key stakeholder in setting and driving overall unit targets across territories
  • Own the internationalisation roadmap for all our books
  • Own the format roadmap for all our books
  • Own the individual brand roadmaps for our most successful books, including developing new upsell and retention products via in house design or licensing
  • Line manage several junior delivery colleagues within the product team

Expected experience and skills

  • Business focused and experienced - You have a demonstrable track record growing revenue on entertainment oriented properties. We’d like to meet people who’ve managed and grown products and brands turning over more than £10M a year.
  • Analytical and data driven - you can show us through examples of how you’ve used quantitative and qualitative data to make the right decisions for the business.
  • Creatively sympathetic - you can also show us examples of how you’ve reasoned out plans and projects from a creative position and protected and enhanced creative value in the properties you’ve managed.
  • Strong communicator and leader - you know how to make change happen in a fast moving company and you’ve got experience of directly line managing more junior colleagues.
  • Gets stuff done - above all, we want someone who is going to roll up their sleeves and get stuck into the fantastic challenge of bringing the values of our books to as many people as possible across the world. Lost My Name is a young company that is just getting started on it's journey - You’ll be super excited to join in and start shipping from day one.
See more