01

SERVICEMASTER®NATIVE APP

UX RESEARCH, WIREFRAMES, UX + UI DESIGN

 

Specializing in disaster restoration, ServiceMaster® Recovery provides rapid response recovery following a major natural trauma. In the race towards digital integration at the onset of the pandemic, its sales and marketing team invested in a weather alert and information mobile app to better serve an engage their commercial clients. 

SRM_Flying iPhone X Mockups.png

The Project Goal and Design Challenge

 

The intended value and functionality of the SRM app was distilled down to two primary mandates:

 

1. Tailored weather content and notifications for potentially effected businesses by severe weather

2. A one tap emergency service for clients impacted by severe weather damage

Understanding the product goals behind the initiative, my role was to incorporate the UX strategy to produce hi-fidelity designs that aid and satisfy the targeted audience. In addition to crafting the visual language to align with the clients brand, the scope of the project also called for establishing a scalable initial design system to help level set teams for future iterations post handoff.

The Journey Map & Wireframes

Initially the client had broken down the screen count and put together some basic wires in Balsamic to showcase the overall UX strategy and journey breakdown. Having inherited the wires, I was tasked with defining the UI as well as elevate usability with a UX audit of the IA at a macro level.

For me, the combination of journey mapping and building wires in tandem is a helpful way to better visualize the navigation and determine all the elements driving the experience.  Hierarchy, component structures, accessibility, and interactive content are all discovered during this phase.

SRM Wire Flow.png

The Design Library

Once the wireframes got the green light, the design phase was two-fold. Define UI coherence while simultaneously initializing an inventory of components for future development. The scope for design was a quick turn, and handoff was going to drop fast, so the UI and systematizing the UI had to happen in concert.

As each component was created they were immediately organized into a library. And atomically, structure by structure, style by style, the design language and patterns developed into a sharable design system. Come handoff, this was the essential single "source of truth" for all concurring work steams to source from.

SRM Design System.png

The Design Rationale

 

Core-needs first. The intent was a minimal architecture simplified down to 3 main tiles for streamlining access to essential content. And the focus of navigation was in the context of an immediate and obvious "life-line" service.  The overall product was to enable the user to quickly accomplish these two critical goals: Always be informed of the weather conditions that might effect my business, and easily reach my SRM representative if it does.

Fast performance. Quick access to primary functions and lightweight, scalable assets for speedy screen loading was key to fast access.

Purposeful brand presence. The visual design strives to balance a bold continuity with a clean contrast of accessible UI elements. Being intentional about where the SRM brand is present helps direct the focus on a users immediate needs with limited distraction. 

Built for evolution. The design system is devoted to the flexibility of UI patterns and designed for continual product growth. Future-friendly structures and primary components were made with aforethought to easily "lift and shift" IA for future iterations.

Hi-FI MOCKs.png

Proposed for Phase II

Like so often with an aggressive timeline, some of the fun stuff was politely downgraded to the ever familiar "maybe a version 2 thing." Micro-interactions and any fancy UI were de-prioritized. So consequently even key interactions (truly important ones IMHO)–floating input labels and progressive assistive prompts–didn't make the Phase I launch.

But probably the most exciting teased functionality was the provision of a modal navigation drawer. Though a secondary navigation and its destinations were not in scope, mocking up the aspirational feature demonstrated not only its value, but the functionary potential of the app itself. As the features of the product expand, so would the necessity to organize a navigational hierarchy. Inspired by Google Materials use of a scrim, this is what I proposed.

SRM_Drawer.png

Outcomes and Take Away

With a lot riding on this initial launch, the first benchmark of success was aiding the client in demonstrating the exponential value of this product to all internal stakeholders. Now available on OS and Android, it's become a quantitative rallying point as a crucial step towards their business goals of a greater digital reach to further extend and boost their services.

 

The development and implementation of an official SRM design system equipped the client for further projects to maintain product consistency and accelerate time to market. For both designer and developers, the design library can now be leveraged for further development as the product and user base grows.

SRM Prototype 3.gif
Free PSD Mockup iPhone 11 Pro Max_CROPPE