Derwent London is one of London’s most innovative property regenerators and investors and is well known for its design-led philosophy. They rent office space to companies of all sizes across London. Their investment portfolio totals 5.6 million sq ft and is worth £5.4 billion.
After successfully pitching against other agencies and contractors, Derwent London entrusted me to create and deliver their first ever mobile app experience across iPhone and Android.
The purpose of the app is to help residents (members of staff of a company that is a tenant of Derwent) engage with Derwent’s facilities and amenities to help improve convenience and enrich further their working lives.
Derwent London 2021
UX Research, Strategy, Interaction, Creative Direction and Visual design. As the sole Product designer on a brand new app, it was my responsability to take the business on a journey from discovery to final design and delivery.
The project was delivered remotely due to the pandemic and the development team (Popcorn) is based in India. I worked closely with the Product Owner and numerous stakeholders.
Key customer needs
Key business needs
Derwent supplied a high-level set of requirements, preliminary process flows and concept designs which they had used to sell the project internally.
I collaborated closely with the digital strategy lead and the wider stakeholder team through multiple workshops to understand and suggest research opportunities to help inform and start the ideation process.
Opportunities to further understand:
The types of social media content (news, blogs and announcements) that Derwent currently use and how we can add value to this within the app by conducting an audit resulting in framework to work from.
Understanding Derwent London’s values
Derwent London has a rich and interesting history. It is one of London’s most innovative office specialist property regenerators and investors. They help regenerate areas of London and design / build incredible buildings. They are well known within the industry for its design-led philosophy and creative management approach to development. Design and quality is paramount and the detail is everything.
For me, it's always incredibly important to understand the business in order to create an aligned experience that reflects their values as well as fulfilling their customer needs. The company has grown organically over time to a point where no existing principles existed however, strong values are intrinsic within the company make up. To understand and document these, one-to-one conversations and group workshops were used to understand the philosophy and to gain a 'feeling' to then take these values into the ideation phase. Here are a few quotes from those discussions.
"Organically grown with an absolute and continually uncompromising approach to what we do."
“We're very modest. We speak softly and deliver well.”
‘Distinctive and design led. We do produce the best buildings and marketing materials."
"We build relationships with local communities."
“We design by feel” by subjective means. No resting on laurels in every aspect of the company."
"We do not accept 7/10, it has to be at least 9/ 9.5 all the way through."
What Derwent London do
Below is an image gallery of just a few photos of some of the remarkable architecture and design that the company is well known for (and that this app would need to adhere too, no pressure then! :-)).
Key words identified to describe the architecture and design of their office spaces
For time reasons, I kept this very simple and to the point. These words are used to hold myself accountable against by remaining true to Derwent's underlying values. They also help inform decision making when exploring and benchmarking multiple options later in the design phase.
Understanding consumer types through the creation of personas
There are 3 distinct user groups:
1. Employees of companies (approx 95+% of user base) that rent Derwent office space:
2. Administrators (Manages the work space within a company).
3. Decision Makers (Agrees and negotiates Office Space contracts).
I used a mixture of stakeholder workshops, 1 to 1 user-interviews including questionnaires as well as a wide range of existing online white papers researching employee types to create the personas.
Employee working needs
Here are a few examples of employee needs and how they relate to the work environment and the app experience:
Autonomy at work
Work spaces that give freedom to choose where and how goals are accomplished.
Belonging at work
Workplaces that connect people and the organisation.
Purpose at work
Workspaces that improve communication, foster connection and enable productivity.
Understanding how other industries solve similar problems through Landscape Analysis
This includes strengths, weaknesses, key takeaways and opportunities.
3 main areas that I felt added the most value to explore include:
1. Bookings experiences.
(Trip Advisor, Viator, GAdventures, Expedia, Eventbrite and Airbnb).
2. Food and drink purchasing
(Uber Eats, Just Eat and Deliveroo).
3. Communication via Social Media and Story telling. (To communicate who and what Derwent London are).
(Nike, Chanel, Rolex, Vivani, Uniqlo, Aston Martin and Burberry).
Some examples of the 'Bookings' learnings
What can we learn from perceived 'best in class' experiences through an 'Expert Review'
I chose not to do a competitor analysis. The best experiences we looked at and wanted to learn from tended not to be with direct competitors. A number of mobile apps were mutually agreed to be excellent in different, contrasting ways, this would again help with the ideation process.
One of the apps analysed was WeWork. A good example in that they have a completely different business model to Derwent London and a different customer base however, they still solve similar problems in very different ways for different customer needs.
WeWork: Key take-aways
Understanding Derwent's Social Media content
I wanted to understand how Derwent London's News and content features could be embedded within the app experience. To do this, I needed to first understand what types of content are currently communicated, to then start thinking about how this can be applied and enriched further within the app experience. To do this I conducted an audit across Derwent's website and social media channels resulting in the below framework.
5 main content types emerged:
Architecture, Art & Design, Community, Responsibility and People.
These types ranged across 3 areas: Specific buildings, Villages (areas of London) and globally across all Derwent London’s buildings/ Office Spaces.
Applying the learning
From this I explored the idea of a ‘Discover Derwent’ section (information about the company) as well as more 'news' like daily relevant content that affected employee lives e.g. building closures. The above sections were then utilised to create the information architecture.
This mapping enabled the thinking of how content is displayed in the most relevant way to each persona and individual user e.g. Showing only content related to the user’s office building or relevant village (area in London) at the right moment in the right place to add value and encourage engagement.
From this, I can now understand which persona resonates more with which social network for example 'Decision Makers' using LinkedIn and Twitter vs 'Employees' using Instagram and Facebook and how this effects the type of content on those channels. This will help inform the type of content shown to each, specific user of the app.
Understanding current analytics
Derwent London were already using 3rd party white label apps for many of their buildings. From the analytics provided I could quantify and see which sections/ features are used the most and add the most value.
Usage / engagement is currently low. The most popular features being the open door/ smart key access, events and offers. This was used to help validate and also help to identify the hierarchy of content and information architecture whereby all 3 items would be prominant within the experience.
Defining the top-level Information Architecture
The above research informed the basic architecture of the app and what features and mechanisms can be shown and where.
The point of this is to start early conversations with stakeholders and start the journey of bringing the proposition to life. This also gave us a baseline to discuss and prioritise items going forward allowing the map to progress further through rationalisation and simplification.
Top-level basic prototype
Taking the top-level Information Architecture above and bringing it further to life so stakeholders can get a feeling of how it works and where content and features are placed.
The order of main navigation reflected the current quantitive research/ analytics with Home, Meeting Rooms, Events, Offers and a ‘More’ menu making up the 5th place.
‘Spaces’ (Derwent’s available offices) was placed within the ‘More’ menu. The reason for this being that the ‘Decision Maker’ makes up approximately 3% of the user base of which the majority of the experience is prioritised towards the ‘Employee’.
This also helped provoke discussion regarding the ‘Discover Derwent’ content. This has been purposely placed across the app in areas that are most relevant. For example, in Spaces, at index level, content is more related to the village. As the user digs deeper to individual buildings, then more specific content (including more 'lifestyle' stories) regarding those buildings is placed at the bottom of those pages.
Medium fidelity wireframe flows
Now that the sections were defined, I progressed the journeys across the app by approaching each section at a time creating multiple options and iterations. Below is just one example screen from a huge body of work.
To test and validate our assumptions, user testing was split into 2 sessions per person to cover the whole app experience:
1. Homepage, book, amend and cancel Meeting Rooms. Booking included both the discovery and the more task focused (via search filter) journeys.
2. Spaces, Events, Offers, Discover, Registration and sign-in journeys.
Participants included mostly employees of varying levels from a range of companies with offices based in London.
Testing was conducted remotely via Zoom using a shared Figma prototype. This was a combination of explorative and task-focused (goals-based) user testing. Mixing both qualitative and quantitative testing to primarily test the usability of the prototype.
At the end of each completed task, participants were asked to give a score out of 3: 3 being great, 2 good and 1 poor for ease of use, understanding the pages and clarity of what to do next. This could then be benchmarked for future iterations and progression.
Wireframe prototypes to test
Below is one of the two prototypes used in the testing sessions.
User testing insights - The Positives
Generally, the prototype performed well. Participants gave scores of 143 Greats, 20 Goods and 0 Poors for ease of use, understanding the pages and clarity of what to do next.
“Meeting room booking is very clear. This is really useful as ours is terrible, not visual at all”.
“It was really intuitive, had a good consistent feel with lots of other apps, very similar style which helps as that is what I am used to using. I liked it. I thought it was great.
Genuinely very good, very intuitive, easy to pick up on (use). Looks great.
“I think it tops marks, great, it does a great job in terms of navigating you to key areas.”
“It’s a really good app. Would like to use something like this at my company. I have seen other apps like this but not half as intuitive as what this one is. It’s really clear, it’s not overloading the user. I think this is really great.”
Below is a detailed spreadsheet outlining the pre-testing questions and answers, participant scores and issues / opportunities that I presented back to the business stakeholders.
Insights - Homepage problems
Some key quotes
“I probably wouldn’t scroll down the news. Rooms, Events and Offers the most important to me with Rooms the most”.
"As an employee I probably don’t know who my landlord is. I probably don’t care who my landlord is. All I care about is what this app can do for me. To enhance my experience of working in this building."
Insights - Rooms and Office Space problems
Some key quotes
“There’s nothing here to start that journey accepts that (magnifying glass)”. Once tapped: ““That’s exactly what I was looking for.”
“What’s the difference between Rooms And Spaces?”
“I’m guessing it’s a set of properties in an area.” (Villages)
“Derwent villages doesn’t make any sense to me, maybe it is a brand name.”
“I would favour as much reassuring messaging as possible so I would prefer ‘Booking confirmed’. I’m a bit of a worrier.”
“I would want something a bit more prominent/ clearer than just a bin. If you’re cancelling the whole booking reservation I would want a button to cancel the whole booking.”
Quote of the day
"If I were buying a house, I am not just looking at 1,500 sq ft, I am looking at 3 bedrooms and a bathroom".
Traditionally, Office Spaces have always been described in sq ft however, adding more understandable and meaningful context that is easily relatable helps. For this reason, desk numbers as well as sq ft is now added to the office space search filter and the Office promo cards. A small but very useful step in evolving how the industry communicates office space size.
Balancing business and customer needs
During the creation of the wireframe journeys there was much discussion regarding the prominance of searching for available Office space. It had always been the highest priority from a business point of view however, equally, we knew that it served a very small number of the the user base (decision maker).
As a result the main user base (employees) became alientated and started to mis-trust and question if the app was for them:
"As an employee I don’t understand why I would want to see what office space is available. I don’t understand how this will help me day to day."
“The sales pitch has already been done at the corporate level, why do you need that?”
User-testing helped to validate our concerns and bring evidence to this discussion.
The evidence informed the decision to remove the section from the main navigation and to add it to a new secondary 'More' menu. The homepage promo was removed too. This allowed it to still be available to the 'Decision maker' but with with far less prominance so not to distract or offend the main employee user group. Going forward, it was agreed to monitor the usage when the app launched to then decide to remove it completely or not.
This was a great, positive solution for everyone concerned.
Agreeing a Creative Direction
I went back to the Key words identified earlier to describe Derwent's values throught the architecture and design of their office spaces and how this could influence the digital space.
From this, I presented a number of existing examples (from the Landscape analysis I created earlier) where I felt Derwent's key words/ values matched the UI designs. All with a very simple and clean aesthetic whereby the imagery and videos were the focal points that complemented the minimist design and not to compete with them. This presentation enabled us to agree the visual direction with stakeholders and the branding team whilst mixing in consistency from the current website to start the visual ideation.
From Derwent London's creation of stunning buildings both externally and internally to small design details and their 'Space' magazine below.
Visual and card behaviour exploration
From the Spaces brochure I experiemented with different uses of stroke lines, varying levels of space and bringing in consistency of link colours from the website.
To connect the physical architecture to the digital, it was a great opportunity to explore card behaviour and interactions when swiping both vertically and horizontally. I wanted to create depth and explore the feel of cards overlapping each other like sheets of paper rather than a 2 dimensional aesthetic. While still maintaining an 'understated modesty' that felt 'distinctive' and integrated.
Final visual design prototype
Below is the final visual prototype handed over to the development team again using Figma.
Final card behaviour based on interactions
Below is a video of the pre-launch build showing all card behaviours (including carousels and image galleries) when interacted with to bring a physicality to the experience.
One example is scrolling to the bottom of the page where the 'Discover' (magazine like content) promo has been treated differently whereby, an opposite interaction is used. The card above it glides OFF it (rather than the above cards gliding ON the previous card) to then reveal the Discover card hidden underneath, the idea being that the user literally 'discovers' it.
Below is a tiny snap-shot of the documentation provided. This included detailed explanation for every screen, journey and interaction within the experience. As each section was designed individually, I also needed to step back, look at any hollistic in-consistencies of patterns to deliver one final, consistent and scalable/ modular Atomic design system.
The app launched in the iOS and Android stores in mid September 2021!
To the left is a marketing video created for this showing it's key purpose.
For me, fulfilling the trust Derwent London had in me, being the sole practitioner/ designer working end to end to create and deliver a mobile app for a company worth billions of pounds with such a design heritage is an honour and privilege.
Guiding the client and all stakeholders along a journey without meeting any one in person during the pandemic. This is a huge testament to our communication and collaboration across the project.
Derwent London are perfectionists in the architecture and design they produce. They employ the world's best architects and interior designers and openly told me that they would strongly debate for hours the finest detail from a door handle to a small material. For them to be super happy with the outcome is a huge compliment to me and a credit to our partnership.
I normally work with the development team throughout the build process. In this case (due to budget) it was a number of handover conversations and a single feedback session afterwards. The final designs and documentation had to be extremely thorough and clear to be able to deliver this. To the development team, Derwent London and my credit, a build was completed with only minor changes which I feel is an incredible achievement.
One of the biggest successes for me and Derwent London is that evidence was used to justify and make key, important decisions for the benefit of the user experience and to re-evaluate propositions going forward.
It's too early to say the impact of the project a few weeks after launch however, I'm very much looking forward to finding out more as time goes on and we recieve more quantative data through analytics to continue to refine the experience.
To continue the partnership with Derwent London again in 2022 to take new learnings and iterate further.
In reality, Derwent London are in many ways a silent service in that they provide the work spaces for the employees tenant company. The challenge is to see if deeper relationships can be formed between the company and end users of the app.
Learning about a new industry which is one of the very few I haven't worked in previously. How Derwent London operates, the company history and it's contribution to regeneration in many parts of London.
When going on a journey with a company, sometimes we see progress as a linear journey when in actual fact it can be progressive circles/ rotations. In this case we returned back to many initial ideas to make the right, evidence based solutions for the good of the product and the business.
"At Derwent London, we brought Michael in to take our high level ideas for a customer experience app and develop it into a fully clickable prototype. We started with 5 sketched pages and ended up with every screen planned and designed. Michael has an incredible eye for detail and guided me (the product owner) and my project stakeholders every step of the way.
He is meticulous and patient and understands exactly what users expect from such an experience. He conducted thorough user testing to validate all the decisions along the way. As if the UX piece wasn't enough, Michael then lead creative design across the whole project and has delivered an on-brand experience that far surpassed all of our expectations."
Michael Simons, Digital & Innovation Adviser, Derwent London plc.
More case studies