Empty Chairs at Empty Tables
By: Liam Laidlaw, Hadiya Malik, Yasemin Ahmed, Alexander Kennedy
Office space vacancy has been a problem with the City of Calgary for approximately a decade. This trend started with the decline in oil demand globally, and this was a major challenge for Calgary as we have been known as an oil city in Canada. Many oil and gas businesses that once settled in downtown Calgary are now gone, and as a result, there are many vacant office spaces.
The Impact of COVID-19
The decline in the oil industry was only the beginning of the office space vacancy problem in Calgary. In March 2020, the World Health Organization declared COVID-19 as a pandemic. To slow down the spread of the virus, many businesses required their employees to work from home indefinitely. This spiked the vacancy rate for office spaces at an all-time high, particularly in Calgary. According to the Calgary Economic Development, by the end of Q1 2021, Calgary has an office space vacancy rate of 32.3% (Calgary Economic Development, 2021). This rate is significantly high compared to other major cities such as Vancouver, Toronto, and Montreal.
How is this a Problem?
The problem, in this case, is clear. There are too many office space vacancies in Calgary, and this is a problem. The activity level of downtown is important for many large cities as it provides energy both economically, and spiritually. As Calgary is aiming to expand the city as an innovative hub to drive the economy in Canada, we must solve the issue of office vacancy, and this is the problem that we identified from our client. To tackle this consulting project, our team came up with a solution to utilize empty office spaces by using technological tools.
Alternatives
Our team identified several options as potential solutions to solve the high office space vacancy rate in downtown Calgary. These options include:
- Affordable housing
- Affordable leasing for tech start-ups
- Office space rentals
The first option has several benefits. The obvious pro to this solution is that it will reduce the number of vacant office spaces long-term, and having more people living downtown will spark engagement with downtown local businesses. This will help with the economic growth of Calgary. However, the major problem with this alternative is that it will require significant renovation cost and legal complexity. Therefore, this option is not feasible for the scope of our project.
The second option is also an attractive way to promote active engagement in downtown Calgary. However, there will be commitment required from the tech start-ups to remain in the leased office spaces, and this limits their flexibility as they grow their business.
After reviewing the other alternatives, we believe that the best solution to our problem is to offer these vacant office spaces for rentals. This solution deals with the vacant office spaces while having the flexibility. Additionally, there are technological tools available that will help with operating this type of service, and we believe that this type of service will be valuable after the pandemic settles.
The Solution
Our approach to this problem was to utilize all the available technological tools to solve the problem. In this case, the high vacancy rates in downtown Calgary. To fully utilize the available office spaces, we recommend our client to launch a service where customers can book and rent office spaces for different purposes. For instance, let’s say that a customer is in downtown Calgary, and has to have an urgent meeting with a client. Unfortunately, the company that this individual works with does not have office space. This is where our proposed service comes to play. The user can utilize the app to book nearby office spaces to meet with the client in a professional environment.
Office Buddy
The service that we are proposing to our client is called Office Buddy. Office Buddy is an online service that provides office space for professionals. Users can easily book office spaces in advance or book spaces for urgent meetings. In the following section, we will describe the process and the technological tools that we utilized to build the prototype of Office Buddy.
Adobe XD
For the UI of our mobile application, we utilized Adobe XD as our primary platform. We will walk through the steps that we took when developing our prototype for Office Buddy.
Step 1: Getting Started
The first step of building a prototype is to download the necessary tools and requirements which are:
- Adobe XD
- Adobe Account
That is it! The beautify of Adobe XD is that the software is easily accessible for all customers, as long as they have a computing device.
Click here to install Adobe XD for free!
After logging in using your Adobe account, you will have the option to select the dimension of your prototype. In our case, we selected the iPhone X dimensions. Now you are ready to build your mobile app prototype.
Step 2: Building your Prototype
Once the dimensions are set, this is where you start to develop your prototype. However, first, it is important to understand the requirements of your application. This will help with the design and the functionality of your desired prototype. Our team used an online tool called Lucidchart to brainstorm our ideas for the requirements of our prototype.
The best way to learn new software is to learn by practicing along with a demonstration. There are many videos on YouTube that explain how to build a prototype using Adobe XD. Below is a list of useful resources that we used to develop our prototype.
Using all the resources available online, we developed a prototype of our UI for Office Buddy.
Step 3: UI Testing
After completing the design, it is now time to test the UI of your prototype. In Adobe XD, there are mainly two options for testing. The first is to test the functionality of the prototype using the desktop preview function (the play button on the top right), and the second option is to preview your design on an actual mobile device (the phone icon on the top right). Once you are satisfied with the UI, you are done with building the frontend prototype.
Xcode
Xcode is an Apple-designed program for the development of iOS applications. The program is designed for trained developers and requires a significant amount of background knowledge in several different coding languages to be proficient.
With this being said, Adobe XD is directly integratable with XCode as templates can be downloaded into the application allowing developers to start with a UI/UX with minimal coding required. Once this phase is completed all of the backend controls and other integrations that make the app work must be done manually.
One of the key features we included in our development process was API integration for features such as logging in with Facebook and Google, and paying with Google and Apple pay. These features are ‘copy and paste’ into Xcode and would provide incredible ease of use, with little additional effort. These APIs are readily available on each of the relevant sites and only require a user account and corporate banking information to build this code into the app.
Bee Pro & Zapier
Bee Pro is a web-based platform that provides HTML templates and allows for users to extract raw HTML from their created templates. It created drag-and-drop functionality for images, text, and links to social media and other sites. This tool dramatically sped up the email template creation process and required no coding knowledge to execute.
Using Zapiers HTML text email function we copied the HTML code from Bee Pro and modified premarked sections of the code to include relevant personal information from our Google Sheet. The result of this process is a fully personalized, relevant email conveying booking information in an easy-to-read and professional template.
IBM Watson Chatbot
For the chatbot portion of our mobile application we used the IBM Watson Assistant platform. IBM offers one of the most accessible, user-friendly, and trusted AI chatbot creator platforms. To provide a better understanding, we will walk you through the basic steps we took to create the prototype.
Step 1: Getting Started
Getting started with Watson Assistant is fairly simple and requires no tools to actually be downloaded to your computer. Instead, it can be accessed through their website where you can create an IBM Cloud account. There are options to upgrade your account to premium versions; however, for the purpose of the prototype, we only need the free, lite version. You should then click ‘Create’ which will then open a new tab where a chatbot named ‘My first assistant’ will automatically be created for you.
Step 2: Building Your Prototype
The programming of this chatbot involves a basic understanding of entities and intents. Intents are the meaning or purpose of the user’s input, such as a question or request. Entities are the modifiers that a customer may use to describe something, such as dates or names. For a more in-depth understanding of these two components check out this IBM Cloud Doc on “Defining information to look for in customer input”. For our particular prototype, we focused only on intents. Entities would be required when developing the final product to create a more abstract and in-depth conversation between the bot and user.
These two components are then put together within a dialog. Within the dialog, you program responses to particular intents. Sometimes the intents and entities are enough information to produce the correct response, other times, the bot will have to ask clarifying questions, all of which must be manually programmed. For more information on the process of developing a dialog check out this IBM Cloud Doc on “Building a complex dialog”. Dialogs take the form of a vertical tree graph.
Step 3: Testing Your Chatbot
Once you are done creating a flowing dialog with no errors showing you should now focus on “Testing your assistant” to ensure the intents, entities, and other components are aligned properly. This can be done by clicking ‘Try it’ on the top right of the programming screen. This will prompt you with a mock chatbot display where you can have a trial conversation with your assistant. When you message the bot the trial window will show you exactly which intent or entity you have triggered by your message and will reply accordingly. If you were to say something that your bot is not yet programmed to identify or respond to, then you will get an error message such as “irrelevant” and your bot will ask you to rephrase. Error messages will also occur in the event that you have not properly programmed your bot.
Step 4: Final Prototype
Once you have tested your prototype, embedded all of the required intents or entities, and can have a solid conversation flow with your bot, you are now ready to view your final prototype. This can be done by returning to your ‘Assistants’ page and pressing ‘Preview’ at the top right corner. You will be taken to a page with a sample chatbot box, a shareable URL link to your final prototype chatbot, and an option to ‘View embed details.’ If you follow the view details you can customize your bot and find further details on how to embed this version into your website or other platforms. Further details on this process can be found in this IBM Cloud Doc.
Once you are satisfied with your preview, you can launch your assistant onto your chosen platform and a more succinct, formal conversation can be had with the bot.
Final Prototype
References
Asm Arif. (2020, June 9). Adobe XD Tutorial | Login/Signup Page | Basic Course of UI/UX Design [Video]. YouTube. https://www.youtube.com/watch?v=PVcUFCT0J0Q&t=83s
Calgary Economic Development. (2021). Real Estate [Online Document]. Calgary Economic Development. https://calgaryeconomicdevelopment.com/dmsdocument/84
DesignSense. (2020, August 28). Food App Design | UX/UI (Wireframe, Prototype, Export) [Video]. YouTube. https://www.youtube.com/watch?v=195RY7jCuZg&t=689s
IBM. (2021, February 9). Getting started with Watson Assistant. IBM. https://cloud.ibm.com/docs/assistant?topic=assistant-getting-started
IBM. (2021, March 19). Designing information to look for in customer input. IBM. https://cloud.ibm.com/docs/assistant?topic=assistant-entities
IBM. (2021, April 22). Building a complex dialog. IBM. https://cloud.ibm.com/docs/assistant?topic=assistant-tutorial
IBM. (2021, April 22). Testing your assistant. IBM. https://cloud.ibm.com/docs/assistant?topic=assistant-deploy-web-link
IBM. (n.d). Build your own assistant using IBM Watson Assistant. IBM. https://web-chat.global.assistant.watson.cloud.ibm.com/preview.html?region=eu-gb&integrationID=855f3091-d36e-4e55-b42a-c808853b197d&serviceInstanceID=4408dd8a-d9a6-496c-b805-325f27f69238
IBM. (n.d). Sign up for IBM Cloud. IBM. https://cloud.ibm.com/registration
Jerrin James. (2019, Jan 2). App Onboarding Screens (UI design and Prototype) — Adobe XD Tutorial [2019] [Video]. YouTube. https://www.youtube.com/watch?v=VslRPP5WIvM
Sade, K. (2019, February 8). Office Space [Online Image]. Unsplash. https://unsplash.com/photos/2zZp12ChxhU
