Derwent London Mobile App

Project overview

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.

Client
Derwent London 2021

My role
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.

Deliverables

Understanding consumers through the creation of Personas.
Competitive/ Landscape Analysis.
Expert Review of specific, relevant experiences.
Business Principles/ Values definition.
Social Media Content Audit and Framework.
Top-level and final Information Architecture.
Multiple Wireframe Prototypes from low to high fidelity in Figma.

User testing facilitation and insights documentation.
Creative Direction exploration and presentation.
Educating on Accessibility by presenting best practice.
Visual design progression, final designs and prototype.
Detailed documentation.
Build feedback document.

Key customer needs

To book, pay and manage Meeting Rooms.
To order, pay and manage catering for those meeting room bookings.
To browse and book Derwent Events.
To view and redeem existing and new offers.
To engage more about their surroundings and local communities.
To self-serve and manage their personal account.

Key business needs

To improve visibility of the Derwent brand and to start streamlining building operations.
To give visibility of available Derwent office space.
To save money longer term and have a much improved experience compared to 3rd party options. This product is integral to Derwent London's digital transformation strategy.

Discovery phase

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:

Derwent London’s company values to help inform the design process and benchmark against. The creation of Principles enables accountability to help inform decision making.
Who the consumer types are through the creation of personas.
How other businesses solve similar problems through Landscape Analysis and Expert Review.
Existing work up to this point (Initial Concept work).
Existing analytics of 3rd party apps currently being used by Derwent London for key buildings.
Defining measures of success and what analytics are needed to learn and improve in the future.
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:

The Hoarder, Generation X.
The Anchorer, Millenial.
The Settler, Generation Z.

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.

Access to premium work space for 'decision makers'.
Enabling exclusive offers to be redeemed so employees can enjoy out of office spaces e.g. cafe and restaurants and help develop relationships with local communities and businesses.

Belonging at work

Workplaces that connect people and the organisation.

To provide localised and cross-London events and social gatherings.
To know what benefits the landlord can provide for the employee.

Purpose at work

Workspaces that improve communication, foster connection and enable productivity.

To provide room bookings for both internal and client meetings.
Relevant news regarding the employee's office space and building.

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

Companies range from a more browse focused experience vs direct and focussed booking journeys.
Personalisation features heavily based on your browsing behaviour.
With the booking process it caters for your experience i.e. if you are booking dinner then contextually it gives you a choice for the next few days with customised future dates possible.
As an existing customer, show historic and planned bookings and provide suggestions based on this.
Depending on context, user reviews influence the purchase process.
Key journeys start/ are displayed at the top of the home screen for quick access.
Reassurances regarding cancellation are provided throughout the browsing experience.
Content is laid out clearly and given room to breath.
Many different sorting/ filter solutions and calendar views depending on the different needs of the booking e.g. Evenbrite accomodates multiple times on a specific day for an event while Airbnb's primary focus is ranges of dates.

'Booking' opportunities

Define the balance between browsing/ discovery vs quick/ task-focused bookings for Meeting Rooms, Offers, Events and available Office Spaces.
As always, 'relevance is key'. Improve convenience, speed and education via personalised individual needs and related suggestions.
Consider reviews from customer experiences to help educate and influence through real, un-bias context.
Make sure that customers are fully informed around cancellation or re-scheduling through out journeys so worry of 'not knowing' does not negatively impact conversion.
Super simple aesthetic, let the products 'sing' and take every opportunity to remove clutter to make pages as scannable and easy to navigate as possible enabling easy access to booking journeys.

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

WeWork are very focused on the ‘now' (on-demand) nature of their customers from the display/ order of content to visual representations of time (for meeting rooms available now). How do Derwent’s consumers consider time? Planning in advance vs last minute/ now.
Simplicity throughout from navigation to content pages. Designed to be much more ‘on the go’ helping the immediacy of the experience, as a mobile app experience should be.
Consider short-cut (quick links) for bookings if applicable.
Consider the browsing/ exploration experience vs a more formal, informed choice on the list pages (e.g. Events).
For long lists of Events/ Rooms have a sticky filter navigation when scrolling so always available.

Consider that CTAs that add more value/ descriptive and minimise human error e.g. ‘Book for 30m’ rather than just ‘Book Room’ and ‘Show 4 rooms’ rather than ‘Show rooms’. Constantly informing and creating expectation.
The relationship/ journeys between the WeWork native app and Google Maps is seamless where both feel integrated. Additionally WeWork re-enforces the brand with the customised locators. Small, subtle details that all contribute to the bigger picture.
Balance relevance with awareness e.g. Availability of events vs creating awareness of the offering/ benefit even if no longer available. Decide what Derwent’s philosophy is with this.

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.

Key insights

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.

Insights

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.

User testing

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

When using the top homepage componant, some participants felt that when tapping they had navigated to a different page. They didn’t realise they were still on the homepage and that it was a component that expanded/ collapsed.
'Discover Derwent' and news items caused confusion in what they were and how they were different to each other.
Users were less interested in 'Discover Derwent' content.
'Furnished & Flexible' is not a term that is well understood. Once understood, the majority of participants (employees) did not see the need for showing available office space to them.
The Information Architecture and hierarchy of content can be more effective in that 'Offers' resonated more with employees than 'Events'.

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."

Solutions

Remove top componant and go back to individual cards placed vertically down the screen. Another advantage is that this pushes down the 'News/ Discover' promos and reduces their prominance.
News was sectioned into 'Noticeboard' and 'Discover Derwent' was well understood to be about the company.
Discover content changed from a vertical list of promos to a single promo at the bottom of the page. News items were reduced to 2 items however, this was iterated further into a horizontal swipable componant which showed less content up front, this provided a better balance so that the hompage did not feel "news heavy" and helped the hierarchy of the main features/ needs.
'Furnished & Flexible' changed to 'Office Spaces' and the section was removed from the main navigation and placed in a secondary position in the new 'More' menu.
As 'Offers' resonated more than 'Event's, the 'Offers' promos on the homepage were moved up above 'Events' in the hierarchy. This was also reflected in the main, bottom navigation which changed to 'Home', 'Rooms', Offers, Events, More which more importance to 'Offers' over 'Events'. This contradicted current analytics however, this can continue to be monitored after launch.

Insights - Rooms and Office Space problems

Brand and industry terms including 'Spaces', 'Villages' and 'Fitted and Furnished' are not clearly understood.
Overall consensus was that the primary need was to search for a room with criteria (inputting requirements and getting results) rather than be shown rooms to then book or filter. Access to the direct room booking journey (via the magnifying glass icon) was not strong enough. However, browsing by location helped initial understanding.
Participants wanted to look at dates that were available for rooms and see what times are available for those dates. (This was maybe influenced by historic behaviour e.g. using Outlook). ‘Anytime’ by default is a good default selection. Some liked the capacity at the top and understood that it was a process of selections to get the results.
When cancelling a room booking, the bin icon wasn't sufficient and again, being more to the point would benefit the experience.
Showing booking confirmation as a message was in some cases not reassuring enough and created anxiety.

Solutions

Re-name historic industry jargon and branded wording with more understandable terms e.g. 'Office Spaces'.
Magnifying glass is removed and replaced with a dominant "Find a room" button. The same is applied to the 'Office Spaces' page where the filter icon is replaced with a dominant button stating 'Find available Office Space".
These main CTA's were placed at the top of the page switching the hierarchy so that this is now the dominant interaction and not just seeing content that can then be filtered and updated accordingly.
Similar to the search icon, the bin icon was replaced with a CTA stating 'Cancel Booking' removing any potential confusion.
Changing the booking confirmation from a message to an additional step/ full page at the end of the booking journey. This was more reassuring even though the journey was slightly longer.

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.

Visual inspiration

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.

Final documentation

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.

Key achievements

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.

The results

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.

Next steps

To continue the partnership with Derwent London again in 2022 to take new learnings and iterate further.

Key learnings

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.

Client recommendation

"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.