The app was inspired by my own experience with flexible office space. How to optimize occupancy? Where to find my teammates? I also witnessed the challenges with two specific cases: learning centers and COVID 19.
Recent conversations about going back to the office prompted me to think about an app that could live in Teams and address those issues.


What it does

Installation tutorial (3 minutes) Floor plan tutorial (5 minutes) Team owner tutorial (6 minutes) User tutorial (4 minutes)

First, the app allows to register floor plans and tag each space as shared or designated. Shared spaces are self-service that users can book, while designated spaces are assigned by the admins.
Users can then leverage the information to connect with teammates, and make decisions about being present in the office on a given day.

The value proposition:

  • Security: data is entirely stored in Microsoft 365, with access restricted to team members
  • Users can easily extend the app with their own customizations, such as list views, Power Automate workflows, or Power BI reports
  • No proprietary format. Users can bring their own floor plans in accessible SVG format, for example built with Visio.

How I built it

This Teams app is entirely built on the Microsoft 365 stack and has no external dependency. I have been using JavaScript for more than 10 years and SharePoint for more than 16 years. It was just natural for me to rely on what I know best. I used the SharePoint Framework, which includes an option to create Teams tabs. The user interface leverages Fluent UI for accessible controls and SVG for accessible floor plans.

Challenges I ran into

From a business standpoint, floor plans and office booking were new to me so it took me some iterations to come up with a workable booking model mixing convenience and flexibility. From a technical standpoint, styling with Fluent UI Northstar was challenging because of the lack of resources for this new technology, and unexpected differences with the regular Fluent UI. Also, using one Teams tab vs. multiple was a difficult decision.

Accomplishments that I'm proud of

I am proud to have built the whole thing from scratch - from the business analysis to the UX and publishing to AppSource - in less than 3 months. So many aspects were completely new to me.

What I learned

Technically, I learned a lot from the resources offered by Microsoft, and realized that there's still a lot more capabilities to explore. As a business, I still have a lot of questions and I am hoping to learn more on the freemium model from accompanying my app in its first steps on AppSource.

What's next for FloorPlan

There's a bunch of features I didn't have time to work on, and that will be my priority in March. They are mainly about keeping managers and team members connected. Ialso plan to leverage the SPFx localization feature to extend the app to other languages, such as French, Spanish and Chinese. I am hoping to get more documentation from Microsoft on Fluent UI, to allow me to accommodate the 3 themes, and to build a mobile view.
I also plan to leverage other Microsoft tools and features, such as Power BI or Compliance, to offer app add-ins. That's the benefit of hosting all the data directly in Microsoft 365!

Built With

Share this project: