ArcGIS Indoors is a holistic GIS system which supports facilities, workplace, operations, and maintenance workflows across an organization with indoor maps and apps.

Role

Design

Research

Front-end Dev

Usability Testing

Duration

Feb 2018 - Nov 2021

Team

I was the sole UX Designer on the team. I worked with 3 Web Developers, 4 Mobile Developers, 4 Product Engineers, and 1 Product Owner.

To comply with my non-disclosure agreement, I have omitted confidential information and all information here is my own and does not necessarily reflect the views of Esri.

How it started

Soon after joining Esri as a UX Engineer, I joined a team working on the prototype for an indoor mapping application called Indoors Viewer. I designed high-fidelity mockups for the web app using the research findings and wireframes. The designs were well received, and I became a core part of the product team. Since then, I continued leading the UX design effort for all Indoors Viewer applications (web app, native mobile apps, kiosk app). My responsibilities included: doing UX research, creating user experience architecture, designing high-fidelity mockups, iterating on concepts and building prototypes for demoing to stakeholders, styling the components on the front-end, and conducting usability studies.

The Journey

During those three and a half years, I built the design of Indoors Viewer in iterations. Following is a high-level list of the features I designed:

Mobile App

The mobile app features both native Android and iOS user experience. Designs below demonstrate the basic workflow of exploring and searching for something, seeing detailed information, getting directions, and guided navigation from your location.

Web App

The web app features a responsive user experience for all screen sizes. The video below demonstrates the basic workflow of exploring and searching for something, seeing detailed information, getting directions, and guided navigation from your location. You can also share information with your mobile device using a QR code.

Challenges and Learnings

Custom maps

Customers use their floor maps in the app. It was important that the app's UI blended well with any map and gave a seamless user experience. I ensured the app's UI was straightforward and inclusive of custom map styles through experimenting and testing.

Customizable theme

Customers can change the logo, background, font, and accent colors to theme the application to match their organization's branding style. I designed a theme configuration experience that allows users to change styles and preview the results in real-time. The challenge here was to ensure that the UI design was compatible with different color schemes (light and dark).

It was also important that the colors users choose had enough contrast for accessibility. In the theme configurator design, I have included a contrast checker that automatically checks the contrast difference of foreground and background color and warns if it is below WCAG recommended standards..

Internationalization

People from all over the world use the application. Therefore, it is essential to design the product in such a way that localization is easier. Through research and experience, I have learned how to always account for international languages, longer strings, text semantics, flexible positioning, icon familiarity, and bidirectionality of the layout.

Accessibility

When I design, I make sure I plan for a diverse set of users interacting with the product. I have learned to embrace the accessibility guidelines like any other design constraint. I have used more than just color to convey information in the application, ensured enough color contrast on the text, and made keyboard navigation easier. After the UI is developed, I test it with accessibility tools from a usability standpoint and suggest accessibility enhancements to the developers.

Technical limitations

While working with cross-functional teams, I have grown to understand and navigate technical problems in the product development process. Sometimes the designs I create are challenging to implement because of technical and framework restrictions. In those cases, I discuss the issues with developers, try to understand their impediments, and work with them to modify the design to work for everyone without compromising the quality.