Journey To Our New Normal Application: Streamlining Workplace Access

SUMMARY
Glimpse into the Project
Johnson Controls International (JCI), a multinational specializing in HVAC and digital solutions, initiated a project to design a web and mobile app for remote employees during the UAE COVID-19 lockdown to enable efficient workflow approval management. Digitalization of this process centralized the approval tracking, reducing the time and effort involved in communicating through emails and eliminating manual log of data.
My role
Stakeholder Interviews, Usability testing, Visual Design, Application development
Timeline
January- July 2020
My team
IT Director
Senior Business Analyst
PM
Tools
Microsoft Power Platform, SQL database, Adobe Photoshop, SharePoint Lists, Figma
THE IMPACT
Let the numbers do the talking
The project was rapidly implemented in the UAE and extended to 14 offices across the Middle East, Africa, and Latin America during the COVID-19 lockdown. It was adopted by employees within the first month, and comprehensive training and user manuals were provided to ensure effective utilization.
Project implemented across the United Arab Emirates (UAE) within
30 days
Project deployed across
14
Middle East, Africa and Latin America offices
Designed user manuals and trained
50+
staff members for effective utilization of application
The application used by
200+
employees in the first month of its launch
OVERVIEW
A look into the solution
My team and I created a desktop and mobile application using Microsoft Power Platform to enable remote work approvals during the pandemic. The application allowed employees working from home to request access to visit the office.
It enabled managers to view and approve these requests while tracking occupancy. The app also provided real-time visibility into seating arrangements to facilitate social distancing.

THE PROBLEM
The current approval process was time-consuming and frustrating...
During the COVID-19 lockdown in UAE, employees at JCI were required to work from home. They could only visit their workplaces after approval from the Managers. Employees had to submit a self-declaration form and wait for an approval from their Line and HR Managers.
The Facility Manager then assigned them a seat, after which the employee could visit their office, following the COVID-19 health and safety regulations.
The entire process was done by filling in PDF forms and sending emails for approvals. This interrupted the more important work and delayed the entire process causing frustrations.
To solve this problem, I needed to understand the goals and requirements of the employees.
PRIMARY RESEARCH
Therefore, I decided to conduct user interviews
Conducted exploratory research through 10+ interviews with employees like Line Managers, Facility Managers, and HR Heads to uncover key pain points and requirements for the new application. Research was limited to a few days of targeted user interviews.
Some key insights from the interviews:
"Office access approvals are taking too long due to manual processes"
"Hard to track status of requests across multiple approvers"
"Need visibility into team availability and room capacity."
"Understand the importance of client face time for some teams such as sales."
DESIGN GOALS
These findings helped define design goals

Because of the urgent changes brought on by the pandemic, it was crucial to find a quick solution catering to the needs of the users.
FINDING TIME
So, we implemented a temporary fix to give us time to develop the web application.
A simple form was created on Microsoft Forms to make the process efficient so employees did not have to fill in PDF documents every time they needed an approval.
However, the collected data was stored in the Microsoft approval center, making it harder to structure and extract. It also raised some security concerns as anyone in the company could access the data.
Since the company routinely used Microsoft products with active subscriptions, my team opted to make use of the Power Platform.
UNDERSTANDING THE PLATFORM
I had not worked with Microsoft Power Platform before so did not know much :(
It consists of three platforms: Power Automate, Power BI, and PowerApps.
PowerApps can be used to build web and mobile applications. Power BI is used to generate dashboards to organize and analyze data. Power Automate is used to create task flows and automate processes, including refreshing data periodically in the dashboards. These services can be integrated with each other and other Microsoft products and services such as Teams, Sharepoint, and Outlook.
Being the primary person accountable for the project, I had to start learning Microsoft Power Platform from the ground up.
USER FLOW
Translating design goals into action

INITIAL DESIGNS
Due to the strict timeline, I had to carry design and development simultaneously
So, I quickly created some rough screens for my manager and senior analyst to test and give feedback on.


The layout for viewing the lists and the information along with it gave a good overview of the request sent out. Minimalistic design gave a straightforward way to access the important things.

The designs required a more seamless and user-friendly approach. There was a need to create space for additional features and establish a clearer visual hierarchy. The designs also needed to better align with the brand identity, offer enhanced functionality, and clarify the approval workflow.
To achieve this, I delved into expanding my knowledge of the Power Platform, granting more flexibility in the design process.
It marked a crucial point where I had to skillfully merge design and engineering to discover the most effective solution, enhancing the overall user experience.
FINAL SCREENS
Addressing the gaps and meeting the design goals




The final designs showcased:
Organized Interface
Implemented a clean and intuitive user interface for streamlined workflow management.
Automation for Efficiency
Integrated automated features for faster approval processes and provided real-time status updates to minimize delays.
Data Security Measures
Implemented secure design practices to enhance data security throughout the application.
Enhanced Visibility
Created a transparent view of the approval process, allowing users to track requests easily across multiple stages.
Flexibility and Easy Access
To optimize efficiency and speed, We designed the application for desktop and mobile use, allowing for a seamless omnichannel experience.
TESTING AND LAUNCHING
Finally, three days to the launch day...
-
After completing the design and development, the application was tested with a larger audience, and some new features were added to improve usability.
-
Some new features were added like:
Ability to change the approver.
Ability to assign a seat number for employee visits and returns.
Ability to assign a meeting room for customer visits. -
A manual was created and distributed to all employees, and user training was conducted.
-
An announcement was sent to all employees informing them of the launch.
RESULTS
A successful launch
-
Developed on an aggressive 30-day timeline, the innovative cross-platform application was launched globally on June 17, 2020. Immediately adopted by 200+ employees, it optimized and transformed the office access approval process.
-
With its intuitive omni-channel interface, the application drove efficiency through streamlined workflows on both desktop and mobile. Comprehensive training and user manuals accelerated user adoption across the organization.
-
Given its success, the application rolled out to another 14 offices internationally, including the UAE, within the first month. The software improved visibility and communication, notifying employees of approval status via email and Microsoft Teams.
REFLECTIONS
What did I learn?
Continuous Learning and Skill Development
Reflecting on the project, it became evident that staying open to continuous learning was essential. Adapting to the unique challenges of remote work and integrating digital solutions required acquiring new skills and staying updated with industry trends. I have always enjoyed learning new things and this project allowed me to expand and grow.
Resilience in Adapting to Constraints
The project reinforced the importance of resilience in the face of constraints, such as the sudden shift to remote work during a global pandemic. This experience gave me a new understanding of adapting to constraints which required creative problem-solving and a flexible mindset.
Balancing Complexity and Simplicity
Striking the right balance between addressing the complexity of the approval process and maintaining simplicity in design was a constant consideration. While it was challenging, given the technical limitations, it was also critical in ensuring the application's practical utility and user acceptance.
