Case Study: The Perfect UX Handoff

What makes for a perfect UX handoff? In my experience, the perfect handoff is a combination of prototypes, annotated pdfs, conversation and more.

THE PROJECT

Title of Project: Link Realtors to Prospects in GoGo LO Mobile App

Definition: This story required that our sales team – the loan consultants – could easily link up their realtors and their clients inside the GoGo LO mobile app.

Sounds easy enough, yet we kept discovering opportunities and pitfalls as the design unfurled.

OPPORTUNITY #1 – Subscribe them, too

The new flow that I needed to design involved conducting a search through the database to find the realtor that the prospect (customer) was working with – then to link that realtor to that prospect in the loan consultant’s database. During the linking interaction, we would take that moment to include other engagement services we provide, such as “hey,while you link them, take a moment to subscribe them to a newsletter as well”.

Multiple options for an additional interaction in the flow of linking a realtor

Here is a video of the search-to-select flow, including the opportunity to choose from our extra engagement options.

OPPORTUNITY #2 – Search with James

One concern the development team had was that our customers might find duplicates – how could they tell which James Smith was the correct one? I communicated with the web team and learned that we already had a similar functionality in our web application that included realtor photos and other details that would help identify the correct James Smith. Having that knowledge allowed me to improve the user experience by reducing moments of doubt for our user, and thus increasing the speed and accuracy of the user’s interaction with this search flow.

An early iteration exploring the search-to-link interaction was much improved by communicating with the web applications team.

OPPORTUNITY #3 – Saving the Results

The user needs to save the results of their search, with a UI affirmation that the process has successfully been completed. At this point, I saw an opportunity to  leverage the iOS pattern of using a table row with a label, a field and a disclosure indicator. Once the user’s search-to-link process has been completed, their default “None Yet” message gets replaced – and if they’ve made a mistake or the linked realtor changes, they can clear the results and re-do their search-to-link action. (This was an opportunity because it afforded me the chance to improve the UX of our current select-and-save pattern. See the image in Challenges, below.)

Leveraging an iOS pattern to lighten the cognitive load.

CHALLENGES

CHALLENGE #1 – Pushing My UI Pattern

When I began designing, I was faced with a screen that did not use the UI pattern for saving data that I was interested in using. This presented the challenge that I would need to request that we refactor the UI in order to accommodate my pattern.

To solve my problem, I completed 3 designs – including 1 that followed the current implementation pattern. Additionally, I explored the entire problem – which included additional screens that needed to leverage the same pattern. When the project was viewed at a wholistic level, it became apparent that my desired pattern was a better solution than the current UI solution.

Displaying before and after helps stakeholders and developers appreciate the work, and assess the scope.

The image above reflects how the select-and-save pattern was 1) improved upon, and 2) leveraged on an additional screen in the flow. Great UX design is all about managing a user’s cognitive load; creating and leveraging familiar patterns is an optimal way to accomplish this. The user’s get to not think about the interface because it’s familiar, so they can concentrate on the task they need to accomplish instead.

RESULTS

The final sign off meeting took place in a large conference room, filled with developers and stake holders. I presented my solutions as a story, leveraging a slide deck to do so. I started off simply, by displaying the MVP – the 2-page search interaction. By the end, I showed a slide that put all the screens together, highlighting the need for a unified design to tie the small interactions together – and that’s when we all felt a collective sense of “yes, that all makes sense now.”

Conclusively, there was some struggle along the way. But by the time we hit the last slide, there’d been weeks of collective research, prototyping and discussion. Even though nobody had seen the high level, wholistic view I was presenting, the leads for the dev team and stakeholders had been part of the struggle to get there. Thus, the whole UX process felt like a shared adventure, and a shared success as everybody nodded in appreciation of the handoff.