Application Portal

Overview

Over the years, digital processes have proven to be easier to maintain, more accurate, and saves people time. This portal addresses the above by transforming what was a complex paper process to one digital place.

Role

UX/UI Designer

Duration

3 months

To comply with my non-disclosure agreement, I have omitted confidential information. These designs are a reinterpretation of the original and views shared are my own.

Problem

The client sought to digitize their export and import application, registration, licensing, and permitting process. The old process of paper filing came with errors and incompleteness that prolonged the process even more. Overall, the goal was to improve the application experience and productivity through digitization.

Solution

The client chose to go with Salesforce as the primary business support tool for the customer facing staff to manage applications and communication.

At the applicant level, a customer portal is built and designed for applicants to easily view, update, and correct any pending applications.

At the customer facing level, the client’s staff is able to manage and respond to applicants quickly and address any errors from the applications.

Role and Responsibility

I joined the project while it was still in progress. The look and feel and design system for the customer portal had started but needed continued work. I was tasked with designing the portal and the application detail pages while improving and adding new components to the design system.

Since the customer portal was built with Salesforce, the design library was heavily based on the Lightning Design System. It was important to improve the existing design system while making sure the portal and detail pages felt custom to applicants.

User Flow

The user flow process involved thinking through how applicants would navigate to Application Detail pages where the most crucial user tasks can be made. It was decided that there would be multiple ways to get to different applications based on different aspects such as type, keywords, status, most recent, etc. A panel to navigate users to the most used filters is also included on the portal landing and My Activity pages.

popup image

Portal Landing

After signing in, applicants arrive at the portal landing page with the highlighted activity accessible at the top. Navigation  allows for a quick filtered list of actions required, applications under review, or a view of all activity.

popup image

Activity All in One Place

Once on the Activity page, applicants can quickly scan and view applications, registrations, licenses, and permits. Each card provides a snapshot of the applicant name, status, date relevant to the submission, and expiration. When compared to paper filing, having a page to view all applications greatly improved time efficiency.

Applicants are also able to take action by selecting to either renew or view a draft. Selecting any of the actions would then lead them to the application detail page to view, edit, and/or add more information.

Filtering

When viewing All Activity, the list can get extensive. To increase efficiency, applicants are able to select filters to narrow their search down further.

popup image
popup image

Application in Detail

The manual process of filing and checking for errors are automated to make sure applicants are completing all required fields. Information captured is then viewable on the detail page, making it fast and easy for applicants to scan, download, and correct information.

Clear Action Alerts

One of the major pain points from the customer facing staff was the inability to alert applicants of the next step. With the alert banner and the table list of required actions at the top, applicants are immediately informed of required corrections or action items.

In addition, applications may have pending reviews but do not require action from the applicant. Since reviews occur when a monetary order is submitted, this status is vital in letting applicants know where their export or import is in the process.

Multiple Permits and Letters

Applications had multiple permits and letters for exports and imports. Tabbed view allows for applicants to check which permit requires renewal and also the ability to view different letters that were submitted with the application.

popup image

Key Takeaways

I worked with a lead designer and development team to create and implement the designs. I believe that digitizing the process has had a positive impact on the application and management experience.

Over the few months, I became very familiar with Salesforce Community and the Lightning Design System. I was faced with a few limitations when it came to customizing native components but was able to adjust to maintain a portal that was both simple and easy to use.