Smart BMS

Research

  • UX expert review
  • Competitive analysis
  • Domain research
  • Stakeholder interviews
  • User feedback review
  • Persona, User story
  • User flows

Design

  • Brainstorm/Sketch
  • IA diagrams
  • Wireframes
  • Visual mockups
  • Prototype

Deliverables

  • UX review report
  • IA documents
  • Visual mockups
  • Prototype

Project goals

Smart BMS offers tools to help operators of smart buildings keep their systems healthy. Before adding functionality to their app, Smart BMS wanted to improve its foundation. They asked for help to address known issues.

Their users reported regularly getting lost in the app, and many struggled with the complex filtering system. I was hired to address these issues, and see what other usability improvements I could tackle in the 6 week timeline.

Identifying Users

User feedback and stakeholder interviews revealed the app has two primary users.

Supervisors run the daily operation and maintenance of smart buildings. They make up the vast majority of users.

  • Responsibilities:
    • Manage maintenance teams
    • Oversee repairs
    • Handle inventory
  • High school education
  • Limited technical abilities
    • Comfortable using email
    • Social media, games on smartphone

Executives number far fewer, but do make purchasing decisions. They are more concerned with the overall health of the system.

  • Responsibilities:
    • Overall building health
    • Maintain system's resale value
  • Advanced degree in Business or Finance
  • Tech-savvy
    • Regularly use spreadsheets
    • Familiar with online tools
Persona of smart building Supervisor

A persona for a Smart Building Supervisor helped me to clearly define and communicate to stakeholders who we're designing for.

Persona of smart building Supervisor

A persona for a Smart Building Supervisor helped me to clearly define and communicate to stakeholders who we're designing for.

Understanding user needs

Supervisors often need to play detective as they troubleshoot maintenance mysteries. Solving problems requires understanding of how systems relate within the building’s walls. Is the leak on the 4th floor coming from the bathroom, laundry, or a broken pipe somewhere between? Has there been recent work in this area where we should check for problems first? Where should we drill to not damage sensitive equipment behind the same bit of plaster?

The old design allowed users to see details of specific assets. But, it required users to navigate elsewhere to see related work orders. Users must go elsewhere still to check if needed inventory is in stock. As users clicked around to gather information, they would often get lost in the app.

Information Architecture diagram of old app design

Supervisors regularly need to cross reference information in the app to solve maintenance mysteries, but they keep getting lost in the process.

Information Architecture diagram of old app design

Supervisors regularly need to cross reference information in the app to solve maintenance mysteries, but they keep getting lost in the process.

Defining the problems

“People are constantly losing their position through the app. (There’s) too much jumping around, behavior is not what you’d want it to be.” - J.P., stakeholder interview

"Filters eat up the entire screen." - H.G., user interview

Problem 1:
Users struggle to maintain context and are getting lost in the app.
  • Existing IA requires excessive cross navigation
  • List and Detail views of different categories are so visually similar, they're easily confused
  • Filters interface expands full screen; users lose context of their workflow
Solutions:
  • Minimize the need for cross navigation
    • Restructure the IA for simpler workflows
    • Rethink the grouping of related information
  • Redesign the filters interface so that it does not take up the whole screen
    • Improve user's sense of location and context by not detouring from the main workflow
  • Offer visual cues to help users maintain context in the app
Problem 2:
Users value the data collected by their buildings, but the less technical struggle to access and examine it in a meaningful way.
  • Most users find the robust filters overwhelmingly complex
  • Executives find the filters empowering
Solutions:
  • Redesign the filters interface to be more accessible for less technical users
    • Encourage users to learn and experiment with filters by showing the results of their actions in the same view
    • Adopt tokens as a familiar way to express applied filters
  • Don't force filters on users who hate them
    • Offer users alternate methods of finding the data they seek

Designing Solutions

Preventing Disorientation

Changes to the IA reduce the need for cross navigation, helping users maintain their sense of place in the app.

1. The filters interface now displays in a side panel. This allows users to maintain sight of their data while they filter.

2. The new Detail view has tabs for related information, reducing the need for cross navigation.

Diagram of new workflow

Changes to Information Architecture simplify the workflow.

Diagram of New Workflow

Changes to Information Architecture simplify the workflow.

  1. The filters interface now displays in a side panel. This allows users to maintain sight of their data while they filter.
  2. Detail view redesign contains tabs to house all related information, minimizing the need for cross navigation.

Minimizing cross-navigation

The "Overview" tab on the Work Order Detail contains maps, schematics, and other important information. Other tabs house relevant service histories, task checklists, and associated inventory. Instead of navigating throughout the app, now users can access relevant data within the detail view itself.

New design of Work Order detail

Detail views become hubs, with tabs to house relevant information.

New design of Work Order detail

Detail views become hubs, with tabs to house relevant information.

Providing Context

1. Breadcrumbs were added to the header, to help users maintain context while navigating.

2. Icons label all work orders, so users know at a glance that they're working in the Work Orders List.

3. Tokens are introduced as a familiar way to express applied filters. Tokens clearly communicate functionality, benefitting both novice and advanced users.

4. Moving the filters into a side menu means that users can now see the list they're working with while they filter. Besides helping users maintain context, results of their actions are now immediately evident. This creates better opportunities to learn how the filters work.

New design of Work Order List

Updates to the List views include moving filters into a side menu, as well as the addition of icons and tokens.

New design of Work Order List

Redesign of the List views include some notable improvements.

  1. Breadcrumbs have been added to help users maintain context.
  2. Icons now display for each category, helping users understand which list they are seeing at a glance.
  3. Active filters are expressed intuitively as tokens.
  4. Filters now display in a side panel, providing users opportunity to learn how they work as results update in the same view.

Catering to novice users

I wanted to provide users with simpler methods of navigation than filters.

1. Custom Reports

Users can tell Smart BMS which metrics they find most valuable. These metrics were regularly updated and emailed to users in the form of custom reports.

When users wanted to see more detail on report items, they needed to locate the same data from their email in the app. This seemed a bad experience, especially considering the navigation complaints of these users.

I suggested we bring custom reports into the app. Now users can click on linked report items and go directly to a detail view.

2. Recent Links

We also added links to recently visited work orders, assets, and locations to the home page. Users can now completely avoid filters when returning to recent work.

New design of Home page

Users can now navigate from the home page with Search, linked custom reports, and links to recently visited places.

New design of Home page

Links on the home page allow users to quickly access what they're looking for while bypassing filters entirely.

New design of Home page

When navigating from the home page, users can bypass filters entirely.

  1. Linked Custom Reports enable users to go straight to details of interest.
  2. Links to recently visited places allow users to return to previous work with 1 click.
New design of Home page

When navigating from the home page, users can bypass filters entirely.

  1. Linked Custom Reports enable users to go straight to details of interest.
  2. Links to recently visited places allow users to return to previous work with 1 click.
Home page to Detail view flow on mobile

Conclusion

Users now had several ways to navigate without filtering. Changes to the IA limit the need for cross navigation, helping users maintain a sense of place. Visible results while filtering, breadcrumbs, and icons, all provide context for users. Finally, the addition of tokens and the redesign of the filters should make them easier to use. Not bad for 6 weeks work!

Among my final deliverables for Smart BMS were visual mocks and an 83 screen Invision prototype. The team is currently busy developing new components. Soon, my designs will guide the next iteration of the app.