Microsoft Global Mobility

Lead Suspect Management

UX/UI Product Design Visual Design

Crafting a service for the workers and their families who go beyond their own borders.

banner14

01 -

Project Overview

Microsoft commissioned our services to develop a new application to handle the new world of remote work over international borders. Our team started from a concept, took it to a fully designed and planned product, and prepared it to be built to scale.

For this project, my roles were to make and manage the project file, plan the layout of the design system, create a chatbot for user assistance, and build a profile and reward system that incentives users to keep using the product.

🛠️ Tools Used
Figma Mural
👨‍💻 Roles
User Experience Visual Design Design Systems
⏲️ Timeline
4 Months, Summer 2022

Problems

We needed to figure out how users can work abroad. This included dealing with complicated issues such as booking flights and filing taxes internationally. Every step of the process had to be accounted for to make sure that the product was fully thought-out and met the client's expectations.

Goals

🌎 Make an end-to-end international experience and pitch it to our client for it to reach full production.

🦮 Take initiative on leadership opportunities to update the product.

02 -

White-Boarding

As a team, we decided to start planning out what the site structure would look like in post-its on Mural. 

We spent this phase of the project figuring out how parts would interact with one another. We also made a site map to facilitate the scaling of the project.

whitebording1

03 -

Design Systems

I reviewed Microsoft Fluent Design System to understand how the product should look. Then, I made a style sheet to assist with asset creation.

libraries
color
Screen Shot 2023-05-02 at 8.05 1
type
elevation

Based on the style guide, I built a component library matching Microsoft's visual style that fits our needs. The library covered all aspects of the design from buttons to card layout. However, before we could incorporate any of this system, we needed to wireframe the app.

nav
buttons
avatar_cards
profile_cards2
dropdown
cards_summary

04 -

Home/Trips

The home screen is designed to keep users on task by making the current tasks in need of completion front and center. 

The work trips are represented by the number of tasks left to complete along with their assigned trip advisors who could answer any difficult questions.

02-D-Mobility_Home Page-Current Assignment
01-D-Mobility_Home Page-No Assignment
34-D-Mobility_Hybrid_Trips Landing Page
01-D-Mobility_Business Trip_Homepage

The trip pages are divided into six sections (Overview, Onboarding, Travel, Destination, Financial, and Tax) to ensure that all the steps of international travel are accounted for. To complete a step, users may have to move through the process of uploading documents such as copies of passports.

XL 1.01 – MS Mobility_Home
11.2 -D-Mobility_Assignment_Trips_Onboarding_US non-immigrant VISA_Drop Down 3

05 -

Help Center

One aspect that we needed to work on was the AI Chatbot. As the application will be covering a lot of complicated topics such as international taxes and travel, we needed a simple way to ask users questions.

I made a simple flow with blocks to plan out the functions we felt were necessary for the AI Chatbot. Some of the screens we needed to include were live chat with the AI bot, suggested questions to get a user started, writing to an operator, and estimated wait time.

help_flow

When drafting wireframes, I decided that the boxes should be of a consistent height, and the content should magnetize to either the top or the bottom of the card. This approach also allowed for information to be at the top so that user interaction always stays at the bottom.

help_wf2_flow
help_wf1_flow

Once my senior and I were happy with the wireframes, I added visual stylings from the component library to the design system.

Support Chat
support chat_Help Center
support chat_FAQ_Transition Relationships
Support chat_help center_search
Support Chat-1
live_chat_Help Center
faq_Help_Center3
reply_Help Center
01-D-Mobility_Home Page-No Assignment

06 -

Profile/Rewards

Next, I worked on the profile states and the process of uploading documents for users who are in a new destination for an extended amount of time.

The big problem I had to solve was that the system was originally designed for users who may be traveling alone and not for those with families. My aim was to change the file upload process to make one profile capable of holding the information of many.

Original Design

XL – MS Mobility_Onboarding_Profile-Landing
XL – MS Mobility_Onboarding_Profile-Landing-4
XL – MS Mobility_Onboarding_Profile-Landing-5

The first part of my process was changing the flow. I changed the flow from a checklist of uploaded documents to a series of folders that could contain multiple copies of the same documents for different family members.

XL – MS Mobility_Onboarding_Profile-Landing-2
XL – MS Mobility_Onboarding_Profile-Landing-1
XL – MS Mobility_Onboarding_Profile-Landing-3

The options to add more users to a trip, upload specific documents for multiple users, and use drop-down style menus brought the product closer to the users' needs.

10-D-Mobility_Business Trip_Profile_Overview_Master Documents 3
14-D-Mobility_Business Trip_Profile_Overview_Trips Documents_Trip Selected
18-D-Mobility_Business Trip_Profile_Overview_Preferences_Flight Preferences
24-D-Mobility_Business Trip_Profile_Overview_Emergency Contacts

I also mocked up a rewards page that was meant to incentivize users to keep using the service by offering gift cards to companies that would like to collaborate with Microsoft.

25-D-Mobility_Business Trip_Profile_Rewards
26-D-Mobility_Business Trip_Profile_Rewards_Redeem Points
27-D-Mobility_Business Trip_Profile_Rewards_Starbucks Gift Card

07 -

Housing Request

The last portion of the process I worked on was finding housing. We needed to include a feature that let users find hotels or apartments. 

This feature was requested as finding housing overseas can be difficult. A housing market page would generate possible housing units for users based on factors such as locations, price ranges, and durations of stay.

43-Housing_Request_Form_01
44-Housing_Request_Form_02
46-Housing_Request_Form_04-1
47-Housing_Request_Form_04-2
48-Housing_Request_Form_05-1
49-Housing_Request_Form_05-2
50-Housing_Request_Form_06

08 -

Conclusion

We had a productive feedback session with Microsoft for the work we did for Global Mobility. The team from Microsoft we worked with is currently in the year-long process of showcasing the pitch to higher-ups. If approved, the project will go into full production.

Micro Interactions

I decided that I wanted to have more sliding motions in the game as opposed to taps. This adds a greater level of player interaction. It also gives the player a greater eye candy.

💸 If signed, the contract would bring my then-employer over $20 Million

>$20m

Gains

When I was building out the file and design systems, I took leadership to ensure that everyone was ready to work when the full team was brought on.

I learned more about building a product from the ground up while following the client's branding. This was, by far, the most prestigious client I have ever worked with, so I learned to design for the best in our industry.

"John delivered solid work and thought through the design patterns presented [and was] responsible for exploring and expanding our design patterns. While working on creating an asset library for both mobile and desktop, I observed a high level of competence [from John for] the tools used. John took the initiative [...] to educate others on the project.”

Ian Robinson: Senior and Project Manager

Check Out More 👇

Check Out More 👇

lead_suspect_management-half1

Lead Suspect Management

global_mobility-half1

Global Mobility

buz1-half2

Buz Email Registration

meta-half1

Metaverse Initiative

nect-half1

NECT

renders-half1

Weekly Renders

Lets Chat!

Lets Chat!

johnkeefedesign@gmail.com

johnkeefedesign@gmail.com

© 2024 John Keefe
 

li