UX • UI
Client: CBRE
Sector: Real Estate
Tools: Sketch, Figma, Adobe Photoshop CC, MarvelApp
Year: 2019
Better networking with event app
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.
Idea
• Engagement
• Goal
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:
- 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.
- 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.
- Age: 37
- Work: Investment analyst at HSBC
- Family: Unmarried, no kids; long term relationship
- Location: London, United Kingdom
- Character: The Constant Businessman
- Goals include:
- Achieving a solid safety net for him and his
partner to fall back on shall anything go
wrong. - Building a solid net of connections with
people from all walks of life. - Gaining more experience within the trading
Field.
- Achieving a solid safety net for him and his
- Slightly more introverted than not
- Motivated by ingenuity and incentive the most
Michael Scott has always been viewed as a shrewd and logical person, who from a very young age has been very determined on paving his way to success, thus building up a plan of action for both his career and personal life.
Currently, he does not feel like he has fully achieved all of his goals just yet; however, he does realise that his prior diligence and ability to stick to his goals and mindset have allowed him for more successes and ability to make choices.
He is contemplating engaging with CBRE in order to learn of its investment potential, and of how worth his time it is to get involved. He might join the CBRE Supplier Partner Event in order to communicate with CBRE representatives and scale his goals and expectations.
Michael Scott (primary persona) needs a way to quickly and efficiently manage to navigate the event and find ways to communicate with his suppliers of interest.
-> By creating an app that is quick to browse without losing any of the information available (but, in fact, giving more information and options), I will be able to incite Michael’s engagement with the event further, motivating him to explore it more deeply by demonstrating that it is a quick and painless process that would waste none of his precious, expensive time.
Anika Kumar
Secondary persona – CBRE partner employee.
- Age: 45
- Occupation: Johnson Controls Sales Engineer
- Family: married, 1 child
- Location: London, UK
- Character: Entrepreneurial Leader
- Dedicated, motivated, engaged
- Hard-working
- Ambivert with excellent communication skills
- Motivated by opportunity and chance of success
- Goals and preferences include:
- A steady work-life balance
- A steady flow of income allowing for comfort and opportunity to experiment/take risks
- A team that is apt at communicating and doing their parts
Anika Kumar is present at the event as a representative of the Johnson Controls team, performing her part as the company’s Sales Engineer – on behalf of the senior engineer.
Her main goal is to be able to communicate with the visitors clearly and with no issues, achieving public interest for the company and offering a demonstration of the brand’s distinction and ability.
Her tactic for engaging with the visitors is by making the information and the services Johnson Controls provides easily comprehensible even to those who have never heard of this company before – through approachability and patience.
Her technological background is vast, and her experience is respectable – however, she is still no technology prodigy, and would appreciate applications that are simple to use, with a clear purpose and functionality that is easy to adapt to.
Anika Kumar (secondary persona) would not engage with an application that is confusing and overloaded – a sentiment a lot of potential customers would share, as it would inhibit them from properly engaging and stepping out of the simple “visitor” comfort zone.
-> By creating an app that is technologically engaging without being complex, I will be able to properly hold on to Anika’s attention without overloading her senses, and allow her to engage with the visitors with no issues.
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:
- achieve this overall quite simple flow of action through an information- and functionality-heavy database of the application,
- achieve the goals predetermined by CBRE itself,
- 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
- First step: a low-fidelity prototype, where an overall outline of the main pages of the application (“Home”, “Favourites”, “Book Session”, “Account”) is created.
- 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)
- 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)
- Finally, a medium-fidelity prototype is created, allowing for testing and error correction.
Design system
Imagery
CTA
Iconography
Each icon also has a word indicator to ensure the navigation is clear to everyone.
Text & Accessibility
Text windows have a plain, bright colour but the background of the main pages always has imagery for proper attention retention.
User Journey flows
Onboarding
Save the supplier
View exhibitors
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.
