Fitwel Web App Design & Development
Growing a Sustainable Certification System
Challenge
Fitwel is a certification program for building owners, managers, and developers who want to improve the health of buildings for tenants and residents. Fitwel certification is complex and uses an online application to provide information about criteria and feedback on how to improve.
The Centers for Disease Control and Prevention tasked the Center for Active Design (CfAD) in New York, NY with promoting and enhancing the system to the public. But the app needed work. Built in .NET, CfAD wanted to make a number of enhancements to improve the user experience and monetize the program so it could be sustainable.
How might we allow a sustainability program to scale?
Scope
This project lasted 18 months, and was focused on UX design and iterative development. We designers and launched a number of features to the app over this time period.
Constraints
The Center for Active Design had timelines that needed to be met with Fitwel in order to meet the terms of the agreement they had the the CDC, so our development deadlines were tied to these milestones.
Implementation
We met weekly with the client to talk through goals for the next week and estimate scope for projects.
Our Goal
Standard Beagle worked with CfAD to design a phased solution for adding ecommerce to the application.
Our Solution
We set in place a serious of continuous improvements to scale and grow the app. We also advised CfAD on payment gateways and providers that would last over the long-term. We decided to add React.js to the .NET framework to enhance the user interface of the web application. Then we used our process to design and deliver the proposed changes.
Results
Over the next year and a half, we made continuous improvements to the application. We added additional user roles, multiple new screens for online registration, portfolio management, and custom ecommerce integration.
Our work also included ongoing maintenance and stability improvements, as well as advanced capabilities for administrator management.
Standard Beagle’s work to help launch Fitwel’s Ambassador program will help the program grow and reach more companies and organizations. We have been honored to work with Fitwel and assist it in its early stages and hope to continue our work into the future.
Our Process
Understand
We held a series of discovery sessions with the client to understand our first steps. Fitwel is a global initiative aimed at promoting health and wellness in buildings. Fitwel’s goal is to transform health and productivity by inspiring companies to transform their workplaces into healthy environments.
The Fitwel certification program includes a digital scorecard with evidence-based strategies. Leading companies and individuals — called Champions — have committed to applying the design and operational strategies to their real estate workplace portfolios. The program is not just for large buildings. The vision was for every building around the world to have a Fitwel number.
The Fitwel app was launched publicly by the Center for Active Design. The CDC, which co-launched the development of Fitwel, is a champion and research and evaluation partner.
Stakeholder Interviews
In our initial conversations with CfAD, we found that Fitwel had three key objectives.
Launch site to public and build momentum for Fitwel mission
The Center for Active Design needed to establish hosting and set up for the site and bring it live to the public through their work with the CDC. Several part of the site would be open to anyone who found the URL once it was moved to a public server, so it was important to make adjustments to the application to restrict registration to beta users.
Assess viability of site and provide support and maintenance
The Center for Active Design was concerned about the platform the application was built with. They wanted to make sure it was solidly built and could be maintained over many years so it could support scaling and future growth. They also wanted to make sure the application would be supported over a long period of time.
Design plan for moving forward
The Center for Active Design also recognized that the user interface (UI) needed to be improved in order to support future growth. They wanted to make sure design was handled carefully and incrementally.
Explore
The Center for Active Design has a clear vision for how to grow and expand Fitwel, and Standard Beagle spent the early months of our work learning as much as we could about the certification program and the current platform.
We needed to wrap our head around all of the potential solutions.
We took our notes from our discovery session and organized a team brainstorm session. In this, we created a user story map. This helped us focus our efforts.
We worked closely with the Center for Active Design to provide advice and guidance in development strategies for their goals.
Key Takeaways
-
1
Our .NET expertise helped us identify stability issues and quickly address them.
-
2
The application’s platform enabled it to scale to thousands of users registering millions of buildings; however, the user interface (UI) limited this scalability, which needed to be addressed.
-
3
Design
We designed our plan for achieving the next steps.
Establish stability and launch
When we took on the project, our first goal was to establish site stability and recommend a hosting provider that would be a good fit until the site scaled up to an enterprise tier. It was important to keep in mind the current status of the application and not build too much too soon.
Develop long term plan
Our next goal was to work with the Fitwel team to recommend a strategy for achieving their short-term and long term goals. The application was expected to change over time, but having the vision to see how it would change would be a challenge. We dove into the code to understand every part of it so we would be informed when making recommendations to the client.
Program expansion
One of the planned expansions of the application was to have ambassadors trained to use the tool. This required developing an additional user flow for ambassadors, as well as integrating ecommerce.
Fitwel Wireframes
Validate
We tested our designs with our client, at their request. Fitwel’s scorecard was proprietary and offered a competitive advantage, so there was concern about allowing testers to see the scorecard information.
We created clickable prototypes with Invision and walked through our proposed changes to the scorecard and payment. We recorded feedback and integrated this into our build.
Create
We used this opportunity to build new screens in the application using React.js. This javascript library is flexible and allowed us to enhance the user experience. It also added additional interactions for inline validation, refresh, and transitions the old libraries were not able to do.
Front-End Enhancements
In addition, we enhanced the user registration by allowing admins to invite from the tool itself, and issued a token to ensure that only invited users were able to enter the registration screens. We even enhanced the email sent to invited users with Fitwel branding.
Fitwel’s admins considered multiple options for a payment gateway, but they ultimately decided on a gateway that would allow international sales and had a reputation for strong security and PCI compliance. This gateway’s API allowed us to work it into the application so that the payment experience could be seamless and not take users off site.
Admin Enhancements
Additional features have been added to the application in order to help Fitwel administrators provide better oversight, review, and support for the tool.
We have added additional reporting tools and views so that admins can see a snapshot of what is happening in the tool at any given time and help them verify and certify buildings submitted for certification.
Additional features have included:
- Ability for users to upload documents
- Ability for admins to download a ZIP file of a submitted scorecard
- Ability for users to benchmark their building and admins receive a notification
- Image compression to reduce the space of media on the server
- UI changes to original flow improve UX
