UI/UX Design

Most of my work contains sensitive information intended only to be viewed by my employer, its subsidiaries, and/or partners. The following project can be viewed publicly on the company website.

Supplier Onboarding Portal

This project was unveiled during our first 24 hour company Hackathon in December 2020 and jump-started my UI/UX design career.

One of our developers, Woody, helped bring my vision to life and the final product was released in April 2021.

Backstory

When I was the supervisor of the SAP Vendor Master Data team, I wanted to do something to improve the process of onboarding new suppliers after living through this experience daily for 4 years as a Data Analyst. My team set up multiple suppliers daily and the majority of the documents we received were either missing, incomplete, or filled out incorrectly. We spent at least half our time responding to these request everyday, listing in detail everything that was missing or needed to be corrected in order to comply with the company’s policy requirements. The request initiators also had to spend more time redoing and resubmitting the requests.

The request documents were separate PDF files stored in multiple locations on our internal SharePoint site and on the company’s website. My goal was to bring them together in a seamless online form with field requirements that ensured all the necessary information was entered and formatted correctly.

Business Value

  • Forms are electronically delivered to a secure internal drive folder with limited access instead of via email to a shared inbox, better protecting our suppliers’ sensitive information
  • Removes 6 sections from the Supplier Support page by moving the request documents into a process flow with electronic forms
  • Eliminates confusion as to which request forms need to be completed based on the supplier’s type, location, entity they’re doing business with, and preferred payment method
  • Requests are processed more quickly, as the volume of incomplete requests is greatly reduced
  • Reduces risk of using incorrect forms for the request type (i.e. new supplier request vs. existing supplier change request, non-production supplier vs. production material supplier, etc.)
  • Suppliers are able to initiate the request process vs. sending them the PDF files/links to complete and return

Approach

1. Organized ideas and created personas in Miro

This was my first time using Miro, so I was just using the post-its at that point, but hey, it worked.

2. Sketched designs with pen and paper

Sometimes I like to sketch things out by hand, as it feels less permanent and more open to be creative instead of starting out digitally where the design already looks like the final product.

3. Created mock-up in Adobe XD

This was also my first time using XD and I learned it on the fly as I created my mockup. I was instructed to interrupt one of our vendor sponsors in a meeting to ask how to link the artboards together to create the prototype, since we had limited time for the hackathon.  Thankfully, it was very simple and took less than 30 seconds of their time.

Final Product

Supplier candidates are provided a list of the details they need to provide so they have the opportunity to gather this information before starting the application process. Then, they choose their own adventure by determining if they will be a non-production or production supplier.

Future suppliers enter their email address and will receive an email with a unique code that is tied to their application. They can also use this code to retrieve the data they already entered if they need to stop while completing the application.

Supplier candidates that already started filling out their application can pick up where they left off by entering the code they received via email. Suppliers completing the form for the first time would select the option to create a new application.

Address details are entered. Required fields are shown in red and option fields are green. A message below the field will appear if it’s not completed and the supplier candidate will not be able to proceed to the next page. This ensures the Vendor Data team receives all the necessary details to set up the supplier.

Address verification was implemented to provide the most complete, accurate address information.

Supplier candidates enter their contact information and choose their preferred payment method.

Suppliers enter their bank details if they’re located outside of the United States and will be paid by wire transfer or if they are located in the US and prefer to be paid by ACH. They are informed we don’t store their bank details temporarily for security purposes, so they will need to re-enter it if they stop completing the application.

If a US supplier candidate wishes to be paid by credit card, they are provided with the information on this program and are required to acknowledge they have read it after filling in their information.

Finally, suppliers are able to go back and change any information they just entered or download a copy of it for their records. The last step is to upload their tax certificate copy and acknowledge our supplier code of conduct before submitting their application.

Features

  • Email is sent directly to the supplier candidate with a unique submission code that can be used to edit a saved form in progress
  • Error messages are displayed in real time, not after the form is submitted
  • Ability to return to the previous page to edit information