EXOS Valuation Redesign: Streamlined Order Management

     

9 MIN READ

First launched in 2017, EXOS Valuation enables real-estate appraisers to manage their work schedules, establish their own fees, and automate administrative tasks. In 2020, our team redesigned the application, delivering accessible, robust, and efficient vendor experiences, and expanding from an internal tool to a SaaS platform with multi-tenant capability.

Jul 2020 – Feb 2021

Raghavendra K.(Graphic Designer), Rocky W.(UX Designer), Jinyi Y. (UX Designer)

Adobe XD, Whimsical.io, Miro

Individual        Group

Enterprise        Consumer

Conceptual     Visual

Executive Summary

Problem

The company’s current Appraiser Application required improvements in fixing accessibility flaws, reducing time on tasks, onboarding third-party servicers, and updating the look and feel.

Solution

Refreshed the app UI to meet the WCAG 2.1 AA standards. Reorganized the information architecture. Introduced new features and the multi-tenancy framework to the application.

My Role

Partnered with 2 other designers under a cross-function agile team, I owned the whole order management workflow, and the entailed user interfaces.

* * *

Redesign Overview

UI Mockups
Click to view the full-size image

1. Background

1.1 EXOS Valuation App (2017)

EXOS Valuation was first launched in 2017 and had been used by both in-house and individual appraisers who engaged with the company’s Valuation line of business. Along with the growth in scale and functionality, the team discovered a handful of design flaws that had led to a less-than-ideal user experience. The old framework did not have the scalability to onboard third-party servicers, and the visual look was a bit outdated.

Original EXOS Valuation App

1.2 Context

Who?

Appraiser Demographic

According to zippia.com, the average age of an employed real-estate appraiser in the United States is 50 years old. 32.0% of all appraisers are women, while 62.9% are men.

Such data, on one hand, required us to be mindful of the demographic’s needs and wants. On the other hand, we would want to welcome more women and young professionals to enter the industry – this is one of the company’s long-term commitments and requires joint efforts. As designers, we do our part by creating an inclusive, easy-to-use experience that allows everyone to comfortably conduct their business.

Average age

50.2

Gender ratio
63% – Male
32% – Female

Where?

In the Field

Although typically based in an office, a real-estate appraiser spends a significant amount of time out in the field driving around and inspecting properties. On a regular work day, an appraiser has 2-4 inspections on average. Sometimes there can be 10+ if only doing exterior inspections. Their diverse, constantly-changing work environment imposes challenges to the application’s robustness and ease of use.

When?

Shifting to Flex Schedule

Many appraisers follow a regular 9-5 work schedule, while the nature of the job does not require fixed hours as long as they coordinate with the customer and complete the assignment on time. With an algorithm-driven order assignment system in place, the company is able to accommodate flexible and customizable work schedules for appraisers.

Schedule management

1.3 UX Audit

With an established understanding of the context: who, where, and when are we redesigning for, we then conducted a UX audit on the current Valuation app, focusing on the information architecture and user interfaces.

IA Overview
Existing Screens Audit

Major Usability Issues Identified

Accessibility issues

Non-Accessible Pattern

Accessibility was not taken into consideration in the original design. The color combinations did not provide enough contrast, and some interactive components were too close to each other.

Unintuitive Navigation

Unintuitive Navigation

Bottom nav items somewhat overlapped with each other, as 3 of them were just different statuses of orders. Other important features were buried in the hamburger menu.

A hard to use drop-down action list

Hard-to-Use Action Menu

All the order-related actions complied in a long dropdown list. The display was too compact and hard to select on touchscreens. Frequently-used options were buried together with secondary ones.

2. Identify Goals & Requirements

2.1 Stakeholder & User Journey Mapping

Stakeholder map

Stakeholder Map

Identify all involved parties and manages their expectations.

User Journey Map

Focused on end-users, determine their actions, media, related pain points, and opportunities.

User journey map

2.2 Personas

While getting excited about reimagining the brand new EXOS Valuation experience, we were also aware of the common pitfall of a redesign project – getting too ambitious and building the experience solely based on what stakeholders want while throwing users off. Therefore, it was crucial for us designers to emphasize with and advocate for the end-users, i.e. individual appraisers, throughout the process. To ensure that, we took a user-centered approach and created two personas reflecting the results of desktop research and user interviews.

Paul's picture

Paul, 56

Experienced

Paul has been working as a real estate appraiser for over 30 years. As a veteran in the field, he knows every nut and bolt and has established his own work style and routine. Paul is a beloved husband, father, and soon a grandfather – he enjoys spending time with his family as well as on his own hobbies.

Open to Change

For many years, Paul would use paper calendars to manage his work schedule and submit appraisal reports through mail or fax. Now he’s gradually shifting to paperless, digitized solutions which, on one hand, is to accommodate the preferences of today’s young customers. On the other hand, he was pleased to find out that these tools had saved him a huge amount of time on administrative tasks, allowing him to focus more on the appraisal itself.

Hailey's picture

Hailey, 26

Passionate

After graduating from business school, Hailey decided to enter the field of real estate and become an appraiser. She recently finished her 18-month training program and passed the AQB (Appraiser Qualifications Board) exam. She looks forward to officially working as a certified real estate appraiser.

Tech-savvy

Hailey is a detail-oriented person. She enjoys analytic thinking and problem-solving, which she believes, have made her a good suit for the job. As a millennial, she fully embraces digitization and automation enabled by modern technology. She’d leverage them as much as she can in the work to complete orders efficiently. In her spare time, she makes vlogs about her life and work and shares them on social media.

2.3 Goal Alignment

After we gathered and summarized the stakeholder expectations, UX audit result, user context, and potential opportunities/pain points, we evaluated and distilled them into prioritized and actionable UX goals.

The executive, product owner, appraiser manager, and developer lead describing their goals.

Main Goals

  • Accessibility: fix major usability issues and meet the WCAG 2.1 AA requirements.
  • Efficiency: reduce time spent on tasks by surfacing critical actions, and eliminating unnecessary steps.
  • Growth: design for the multi-tenant SaaS framework to onboard and accommodate third-party servicers.
  • Branding: create a simple, futuristic visual design, while intentionally leaving the screens “white-labeled”.

Additional Goals

  • Define mobile design standards for future projects.
  • Establish a remote collaboration workflow for product design & development.

3. Redesign

3.1 Design Process

There were 3 major function modules within the Valuation app: Schedule Management, Order Management, and Performance Review. I was responsible for redesigning the Order Management module.

Order Management was the most heavily and frequently used module in the app, where appraisers view, accept, provide updates, report issues, check-in/out, etc. for the order. The efficiency and robustness of these critical features have a direct impact on their productivity.

Human Interface Guidelines & Material Design

Comply with Native Guidelines

The development team had decided to rewrite the application as Xamarin Native for near-native performance. Therefore, we referred to Apple’s Human Interface Guidelines and Google’s Material Design, making sure that the design utilizes native components and comply with iOS’s and Android’s guidelines.

Collaborative brainstorming with Miro

Facilitating Remote Collaboration

As the product team shifted to fully remote during the pandemic, we explored different online collaboration and whiteboarding tools, such as Miro, Whimsical, and MURAL, to facilitate brainstorming, visualizing workflows, and communicating the preliminary design with stakeholders.

Visual iterations of the app interface

Iterative Prototyping

Working on an agile team, we focused on one to several user stories each sprint and iterated rapidly from low to high fidelity. We also explored various visual directions to make sure we meet the stakeholder expectations.

UI Mocks on Zeplin

UI Review & Handoff with Zeplin

The team used Zeplin for design QA and handoff. I was assigned to be the Zeplin administrator of the team. I managed all access permissions and maintained the 6 folders created under the project.

3.2 Deliverables

Interactive Prototype

Check out the interactive prototype created in Adobe XD:

https://xd.adobe.com/view/7f73fb4d-5002-4472-a8aa-c5fe440c7fa8-2a20/

New Orders

Before

Unclear visual hierarchy; Irregular spacing; Header took too much space; Users had to navigate to secondary pages to take further actions.

After

Adjusted the information hierarchy and highlighted important/time-sensitive information; Added the call-to-action button up to the front to reduce extra clicks.

All Orders

Before

Users were not able to filter the order list. Order statuses not obvious.

After

Enabled order filtering by different criteria with multi-tenant capability.

Order Details

Before

Long scrolling view which we got complaints about (as appraisers were usually multitasking); All the order-related actions crammed into a drop-down list that was hard to reach and tap with fingers.

After

Redesigned the layout so that users can get a nice overview of the order at a glance, without having to scroll much. Order-related actions are categorized and spread out based on context.

Differentiate Milestones and Statuses

In the existing app, some of the critical order milestones were hidden or not properly emphasized and eventually led to extra phone calls and blockers in the process. The ambiguity between milestones and statuses also caused confusion for both end-users and even within the product team. We reviewed all milestones and statuses and established clear UX specs to make sure they are timely prompted and visually distinguished.

Milestones

Handling Exceptions

As emphasized earlier, security and robustness were of high importance as the app is used for dynamic business scenarios that involve large amounts of transactions and private property data. For Order Management alone, we determined over 60 possible edge cases. We designed the fail-safe trail for each of them, and make sure when necessary, let the application “fail gracefully”.

Error messages

Order Reschedule

Previously, if an appraiser wished to reschedule an order, they needed to email/call their manager for approval, which cost delay in turn time and extra human labor. To address this, we came up with the reschedule workflow that enables users to initiate the request from the app and get auto approval when certain conditions are met.

Reschedule UI

Onboarding Flow

To get the most out of the optimized experiences, the application requires certain permissions (biometric authentication, location, notifications, calendar, etc.). To make sure users feel comfortable about giving these permissions, we created the onboarding flow with illustrations to demonstrate the values and benefits. We also designed for alternative paths to still provide usabilities when permits are not granted.

Onboarding UI

4. Takeaways

1) Defend the user: do not be afraid to disagree

On a cross-function team, everyone naturally speaks for their own interest: some want easy implementation, some want to make the product profitable, some don’t want their established process to be changed, etc. They are all doing their job and conflicts are quite normal. As UX designers, by definition, it is our very job to speak up for the end-users when we find out a decision can potentially hurt their experience, especially when they are not able to engage in day-to-day product discussions. If we don’t, nobody else is obligated to.

2) Aim for global optimum

We all want things to be good, cheap, and fast, while in practice, tradeoffs are often needed. Many times people only hold one piece of the big picture and get stuck in local optimization. As designers and coordinators, it’s important for us to communicate our visions and concerns, at the same time listen to all other parties. With transparency and proper evaluation, the team can eventually work together towards the best we can offer for the time being.