CBRE Supplier Partner Event app

UX • UI 

Client: CBRE

Sector: Real Estate

Tools: Sketch, Figma, Adobe Photoshop CC, MarvelApp

Client website

The project

I was tasked with creating a mobile application for CBRE’s annual Supplier Partner Event, which allows for the company’s partners, clients and employees to come together.

 

The mobile application’s main purpose is for the event in question: it is to encourage the visitors to interact with more suppliers than they could have initially intended to, while being easily navigated even by people who are not technologically advanced.

Research

• Audience
• Brand
• Core message

Problem

• Persona
• Problem
• Plan

Idea

• Attention
• Engagement
• Goal

Prototype

• Ideas
• Creation

Testing

• Functionality
• Success
• Team effort

Research

CBRE are the global leader in commercial real estate services and investments. The company has clients in over 100 countries, including 90% of the Fortune 100.

 

The first step to achieving any goal is to know whom I and the development team at BlueRunner Solutions are working for, and what we are working with. I realise that by conducting analytical research divided into two steps: brand research and target audience research. In tandem, the two allow me to find the most viable paths for approaching the goal, as well as the means to get there.

  • Comparative analysis, which allowed for me to gauge what the market for similar apps (e.g. Expo, Eventbrite) offers, what to aim for, and what to avoid.
  • Overall market analysis through marketing and management tools (SWOT, the 5 Ws of marketing), which allowed me to understand the target audience.
  • Usability testing of the existing website designed by me and BlueRunner was paramount for determining what functionality is necessary for the app – what should be retained, changed, or added on.

SWOT

The SWOT analysis of CBRE as a brand allowed for me to see its overall presence on the market and in the minds of both its existing target audience, and its potential market. 

S

  • Market leadership position:
    • The highest rank in comercial real estate
  • Brand equity
  • Diverse clientele
  • Quick rates of operation

W

  • Difficulty of approach for a regular client
  • Environmental concerns

O

  • Market expansion:
    • stronger market presence
    • more liaisons with suppliers

T

  • International financial crises
  • Market fluctuations
  • Investment market instability

The 5 W’s of Marketing:

The 5 W’s of Marketing analysis allowed me to finally approach the creation of the app, by asking the most important questions – whom am I creating this for?

Corporate, high and medium income.

 Ease of usability, efficiency, simplicity.

During the CBRE Supplier Partner Event on 15th September 2022

London, United Kingdom

Because registration through the web application/app is a prerequisite for attending the event, and it will be used further on to find the suppliers at the venue and book breakout sessions with them

Analytical, profit and incentive driven, financially apt and permissive

Problem

The next step was to determine the actual goals of the task at hand. In the case of CBRE, the goal can be summarised by two points:

  1. The first goal is to enable the visitors of the CBRE Supplier Partner Event to have a full and undeterred experience of the day while introducing them to as many suppliers as possible.
  2. The second goal is to allow as much discoverability of the suppliers present, and encourage as much interaction between them and their potential clients as possible.

 

My goal as the UX/UI designer on this project is to enable the success of both of these goals, while making the application intuitive and easy to use. For that, I came up with several personas that I kept in mind throughout the creation process.

 

As proposed by the client – CBRE – itself, one of the problems of the event overall is the discoverability of the partners.

-> I will be able to make the application more entertaining and creative by adding creative motivators to engaging with the event further through a gamelike incentive system.

Michael Scott

Primary persona – event visitor.

Anika Kumar

Secondary persona – CBRE partner employee.

Idea

In order to get started on the application, I began my creative process with a simple flowchart (Figures 1.1 and 1.2) – a mind map that allows me to connect my tools to my goals by the ideation threads.

 

The main ideas that would help me:

  1. achieve this overall quite simple flow of action through an information- and functionality-heavy database of the application,
  2. achieve the goals predetermined by CBRE itself,
  3. resolve the problems of the personas and therefore overall potential userbase, are as follows:
  • User research indicated clearly that a simple flow (Figure 1.1) within the application is of utmost importance. No complex detours; easily visible buttons, well legible text, concise and clear destinations; intuitive UI aimed at a target market of people over the age of 35 with no high interest in technology. (Figure 1.2)
  • A simple, pleasant design system that takes both CBRE’s overarching design (Figure 3.3) (colour palettes, website navigation) and the UX aspect into consideration. 
  • Game-like elements, serving as both an exciting incentive for the less professionally determined, and as a simple navigation tool.
    • The main idea that I and the development team at BlueRunner Solutions went for is adding an e-passport that encourages the user to collect all the suppliers’ QR codes by scanning them through the application; when the user collects all the QR codes, they are eligible to enter the prize draw.

(Figure 3.1)

(Figure 3.2)

(Figure 3.3)

(Figure 2.1)

(Figure 2.2)

(Figure 2.3)

Prototype

  1. First step: a low-fidelity prototype, where an overall outline of the main pages of the application (“Home”, “Favourites”, “Book Session”, “Account”) is created.
  2. After that, the main functionality is assigned (mostly every action can be made in 3 steps):
    • Home: access to the overall event information, any questions that may be asked, the floor plan.
    • Favourites: suppliers the user of the app may have personally highlighted for whatever reason. (Figure 2.3)
    • Book session: supplier database with a simple search function, with select information on all the partners, as well as the booking option for their breakout sessions. I added the filters for easier search. (Figure 2.1)
    • Account: overall profile of the user. Function to change the password and log out.
    • Onboarding Splash Screens: highlighting the features of the app and showing the relevant icon to increase learnability (Figure 2.2)
  3. Consequently, the QR code functionality was implemented. Since it requires the camera function, I went for similar positioning to the shutter button in the camera application – central on the navigation bar, in easy reach of the users’ thumbs.
    • Scanning the QR code leads immediately to a page with the option to book a breakout session, subscribe to the supplier’s brochure and/or add the supplier to Favourites. (Figure 2.3)
  4. Finally, a medium-fidelity prototype is created, allowing for testing and error correction.

Design system

Imagery

Images are selected based on CBRE's brand identity. Picture that are taken from the top POV, pattern-like cityscapes and nature, monochrome colour palette, incorporated images from their previous events.

CTA

All the buttons and other interactive elements are clearly labelled, highlighted with a darker background colour and bright green icons indicating their functions

Iconography

Icons for the product are linear with some filled colour parts to ensure that they are easy to read on a go keeping in mind the design principles.

Each icon also has a word indicator to ensure the navigation is clear to everyone.

Text & Accessibility

Headings are bold and large, in order to be the most visible and easily-legible element on the page – accessibility

Colours are contrasting enough to be easily visible due to the contrast without being disruptive to our vision – accessibility.

Text windows have a plain, bright colour but the background of the main pages always has imagery for proper attention retention. Big text blocks are divided into smaller sections / pages.

User Journey flows

Onboarding

onboarding

Save the supplier

Scan QR flow

View exhibitors

exhibitor list flow

Test

Qualitative test-research through the MarvelApp application with 

  • 4 participants: members of the BlueRunner Solutions company, uninvolved in this project but fitting the target audience of CBRE (affluent, middle-aged, interested in finance and investment)
  • A timed testing session, where participants are assigned five simple tasks:
    • Registration,
    • Selection of four favourite suppliers,
    • Finding information about three of them in the database,
    • Booking two breakout sessions,
    • Asking a support question
  • Once the tasks are completed, I would take the time taken to complete them into account to see how easy the application is to navigate and work with.

Thank you!

Back to all cases

Let’s make something awesome together

Contact us
Facebook Dribbble Instagram Behance