Admin Portal

Roles: UX Designer, Researcher, Interaction Designer, Content Writer, Presenter to Stakeholders

Skills: Research Process, Interviews, User Flows, Interaction Design, Wireframes, Mock-ups, Prototypes, Usability Testing, Software Development Life Cycle (SDLC)

Software: Sketch, Invision, Rally Software, Skype

Project Goals

  • Create a single web-based portal to administer several applications/websites.
  • Decrease onboarding time. It could take up to a month to get the users into the system with the correct access.
  • Manage permissions and roles for users, widgets, and applications

Resolution

  • Improved onboarding speed from 1 month to 3-4 days!
  • Scalable to allow for more applications.
  • Improved data validation to prevent bad data in the system.
  • Persona-based access.
  • Automated tasks.
  • User friendly.

Background Research

In order to understand the current state, I recorded a walk-thru of the various applications. The user needed to go into several systems to piece it all together for 1 user account.

I created a research plan. I interviewed users and stakeholders. We talked about the pros, cons, and wish list they had for this project. I met with users often and with the stakeholders weekly to get feedback on my wireframes. I also designed a card sort test that influenced the information architecture of the site.

Process Flow Chart

After I got to a certain point, a development team was assigned to the project. I met with them weekly to allow for questions and answers on both sides. A flow chart was created and shared with others on the project to get them up to speed and to help understand the users daily process. I shared my design patterns and files with the UX team so that they could be used by other projects in the future.

Company Organization

Tables (Pic 1)

I created a card sort test for the users and stakeholders to develop the categories for the company table. You can hover to quickly look at the domain URL & portals to determine if this is the correct company without visiting the individual profile page.

Filters and Columns (Pic 2)

Filters and columns allowed users to find results faster.  

Duplicates or Missing Data (Pic 3,4)  

Because we are combining 7 websites into 1, there was contradicting or duplicate data. In the past, when people couldn’t find something, they made a new profile because it was easier than visiting many applications. So, there were multiple profiles of the same company. In the prior design, they couldn’t delete them. This was a highly requested feature.

In order to prevent bad data in the new system, I designed the UI to have a “global search”. Behind the scenes, it was grabbing data from multiple websites.

The scenarios were:

A.        Add it as a new company but only after searching the database and selecting one of the options.

B.        Add a company into the portal which has not yet been imported.

C.        Update missing information for an existing company. This will alert them to what is missing so that it can be fixed. (Certain fields were mandatory but not all were needed to add it.) 

Profile Changes 

Adding a New Portal (Pic 5)

The profile information is displayed at the top of the page as read-only. The action buttons change depending on which portal is selected.  Active vs All was another way to compare. I kept scalability in mind when I designed elements in case more portals were added.

View, Remove, Add Widgets (No pic that I am allowed to show.)

Not knowing why something changed was a pain point for the users, especially if they get audited. I designed a modal to require a reason to add or remove users from widgets. The stakeholders liked the design and suggested that a Salesforce number would be required as well. They also had the ability to update in bulk.

Access Change (Pic 6)

Similar to the widget change, the user would need to provide a reason for the change. If “Suspend Access” is selected, that reason will show up so others can see it without having to look at the internal audit trail, which saves time.

User Profile 

Multi-Check & Access Radio Buttons (Pic 8, 9, 10 )

Internal employees could bulk update the user’s access by checking multiple users. (Pic 8)

Access: User gets automated access to widgets because it goes by the company domain name. For example, if Airline A gets Widget D, all users under that company get it by default.

Extra Access: Requires user-level access. Not everyone in the company can see this widget. (Pic 9)

Picture 10 shows the modal that requires a reason for auditing purposes.

Audit Trail (Pic 11)

Several filters, date range, and search were added to help narrow down the results. The old and new values showed the changes before and after. Also, the date modified and by whom were listed in the table. 

Product Launch

The Admin Portal had a successful launch!