New Product Design: Admin Portal

Project Summary

A customer portal is desired for impersonation of the customers’ screen while the sales team discusses issues with their Loyalty accounts. Currently, the customer and Loyalty portals do not exist, so this is a new concept for the business.

Business Role

The Business goal is to make two identical portals, one for the customer support for and one for the Loyalty sales team. Both implemented at the same time.

The goal is to keep the two admin login screens the same for both portals. Having the design be the same will help with adaptability from the internal sales team.

UX Role

UX/UI focused on information architecture, visual and interaction design. The need to find a balance between the API team, developers and insight into how the internal sales team operates is crucial.

The project required working closely with:

  • Product Owner
  • Project Manager
  • Business Analyst
  • Sales Team

The steps by which the user (sales representative) takes is vital because of the APIs identified through Salesforce, thus determining what information displays and how much, how the data is retrieved impacts the interaction design decisions and expectations from the end-user.

UX Discovery & Insights

The portal is responsive and needs to be clearly understood by internal sales representatives and companies.

The project requires several API notifications in response to user interactions and communication for the workflow.

Design Intent

Because this is something entirely new for the organization, the mockups represent all the scenarios based on the business owners and business analyst requirements.

Knowing that there may be steps added or missed, making rapid iterations of the design was crucial; this way, a proposed idea was always in front of the internal sales team to review.

Because the impersonation screen is yellow, part of the brand’s color, we decided to make the customer portal blue different from the end-user.

This approach eliminates confusion when the salespersons logged in as the business partner.

Workflows created in an interactive prototype made it much easier to find flaws in the design with buy-in from end-users.

Additional user testing is recommended in later iterations to learn if the UI works continue to work for the business.


Due to the business not knowing exactly how Salesforce pulls information, it is challenging to understand how the content is structured and what error messages are needed by the API team.

The UI functionality is challenging to the API team and developers, and responsive design is challenging due to the amount of information required for selection during the impersonation process (including error handeling).


The first round of iterations is a success, and continued feedback from the sales team allows for future UI enhancements, thus the roadmap.

Interaction with the Salesforce team workflow will continue to grow as UX methodology matures within the organization.

The customer portal enhances workplace productivity and helps the sales team support their business partners; on the desktop and mobile devices.

Below is an example of the prototype walkthrough:

  • Enter your user name (predefined)
  • Enter your password (predefined)
  • Sign in (password or user name does not match)
  • Try again…. Enter your user name
  • Enter your password
  • Sign in (user does not have permission to access)
  • Try again…. Enter your user name
  • Enter your password
  • Sign in
  • Check “Company name”
  • Click the search box (predefined)(hit enter on keyboard to enter search criteria)
  • Select Jordan Transport Inc.
  • Select Customer, User 5
  • Enter Admin Session
  • Exit Admin Session
  • Check company Name
  • Click the search box (predefined)
  • Receive an error
  • Click in search box again to continue typing (predefined)
  • Click America Transport Inc
  • Select Customer, User 5
  • Enter session
  • Exit session
  • Click the search box for account number (predefined)
  • Select account number shown with company name
  • Select User 5
  • Enter session
  • Exit session
  • Click the search box (for another account number – predefined)
  • Receive an error (no customers associated with account)
  • Clear search
  • Log out