A major international retail corporation needed to modernize the process for onboarding general vendors and contractors who perform work for them. Their existing process required a lot of manual work through spreadsheets, email, third party software, and phone communication to fully onboard a vendor, taking 3-4 months total.
By creating a new interactive experience, our team simplified and modernized the onboarding process for new vendors and corporate sponsors. The new application provides visibility at every step, offers excellent service to vendors, and makes the business easy to work with as the world’s most convenient retailer.
For our requirements session, I wrote and assembled a presentation consisting of 90 questions across user, business, and technical requirements.
To start this project, our team held three working sessions with the client to understand their existing onboarding processes. To prepare, I wrote and assembled a presentation consisting of 90 questions across user, business, and technical requirements to help guide the conversation. With input from our group, I organized the presentation into different sections: Current Experience, Pain Points, Personas, Business Requirements, User Requirements, Metrics, Future State, and Technical Requirements.
As UX Designer, I wanted to gain a holistic understanding of the many people, systems, and services in place that contribute to the overall onboarding experience. Our team wanted to understand all of the actors and personas involved, their pain points, and what happens at specific interactions throughout the process.
The first thing I created from our discovery sessions was a service blueprint to map out and communicate the existing process. The service blueprint depicts the vendor’s journey, sponsor actions, technology involved, evidence, backstage actions, supporting processes, and regulations. Compared to a traditional blueprint, I also added pain points for specific areas. The blueprint is organized into three phases over a duration of 3–4 months. The partner software company we collaborated with created a process flow for the backend processes.
This is awesome! We have nothing like this today in our organization.
The discovery sessions were very fruitful. We learned so much about the people, departments, technology, and processes involved throughout every onboarding step. In a few pages, I outlined our findings from the working sessions to document current state, UX goals, pain points, success metrics, wins, and design requirements.
Talking to stakeholders only gives UX designers one view. By interviewing vendors who had recently gone through onboarding, I gained insight into the current experience.
Our discovery sessions were excellent at understanding how the sponsor and corporate teams work together internally. To dig deeper, I conducted user interviews with new vendors to learn their perspective on the existing process.
I created a presentation of about 20 questions to help focus and guide our conversation organically. Using this information, I created two key personas.
The Onboarding Vendor and Onboarding Sponsor are the two primary user personas.
This application was the second of three connected applications we designed for the company. Using the personas I developed from the first application as a reference point, this round of user interviews focused on two new personas specific to onboarding.
After gathering and analyzing notes from our working sessions and user interviews, I crafted two key personas for the application: Onboarding Vendor and Onboarding Sponsor.
This was a great tool to document their backgrounds, goals, and frustrations. When presenting wireframes and designs, I referenced these throughout the project.
To document core requirements and assist our Solution Architect, I created a feature map outlining the different sections of content to account for in the portal. Using the feature map, the Solution Architect began writing user stories and readying technical requirements. Feature maps are used to account for the high-level experience we are building for the client.
Using the feature map as a reference, I created some low fidelity sketches with InVision Freehand to depict a possible onboarding flow. The Solution Architect and I met to review and work together to make a few minor iterations to the sketches before moving into the interactive wireframing phase.
Using InVision Freehand, I created a series of rough sketches to collaborate with our Solution Architect. We talked through various platform functionality and design possibilities.
Based on the low fidelity sketches, I created interactive wireframes to show the entire onboarding user flow and process to completion for a vendor. These wireframes featured annotations to communicate and document design functionality.
The experience begins with a welcoming email message containing the vendor’s temporary log in details. Upon log in, the user is greeted with a welcome message and their onboarding to-dos. Each item shows a status of whether it’s not done, in progress, or complete. An overall percentage calculator is featured to encourage timely completion. At the bottom of the page there is a small feature about what to expect when working with the corporation.
After the wireframes were complete, we found out the digital document signature feature would not be incorporated due to licensing. Going paperless and eliminating the need for users to print, sign, and upload copies of their documents would have gone a long way for usability and user efficiency. In fact, one user interviewee mentioned his favorite systems are those where he can digitally sign.
There was every intention of conducting usability testing on these wireframes, however the development schedule was aggressive and meeting with users was cut. Since this application was part of a series, usability testing had already been conducted on a connected system, which was helpful insight to have as a baseline but wish I had the opportunity to do more.
If a sponsor would like to pursue partnership, an email invitation is triggered to begin the process of submitting information.
These wireframes featured annotations to communicate and document design functionality to stakeholders and platform engineers.
The landing page of the application for a user with to-dos in progress.
Document viewer functionality was developed for displaying agreements and contracts.
Various forms were built to collect information. Using a multi-step design, I organized lengthy information into smaller sections for the user.
When a vendor is approved, their state and status changes in the application with a few more items for them to complete the process. Corresponding notifications are sent to support sponsor and vendor communication.
The landing page shows the current to-dos, state, stage, and messages for the vendor.
After a few edits were made to the wireframes, I created an interactive UI design prototype to show how the onboarding portal works. The design uses the corporation’s existing branding and was designed to match another connected interface.
During development, I worked with our platform engineers to ensure quality production.
To see this design in action, watch the videos below demonstrating prototypes for desktop and mobile.
I just wanted to share some positive feedback about Jamie. Aside from her phenomenal work, she is very clear and a great communicator which has been extremely beneficial in the demos to understand the development that has been performed. I’m happy she’s part of the team.
I am beyond impressed with this work! You are helping us change our business and relationships. Thank you!
This is absolutely incredible and will completely change the way we do business.