Overview of the Employee Mobility Portal

There is an increasing number of mobile and IoT devices available and active large companies. The Calero Employee Mobility Portal provides a simple and accessible way for employees, managers, and system administrators to procure and manage the usage around these devices. The project is derived from a legacy portal and is being implemented along with several fortune 50 companies worldwide.

Project Goal

The Employee Mobility Portal had to be built on modern technology and redesigned to meet ideal UI and UX standards. This portal also needed to be responsive and accessible to people with video/audio impairments. As the UX Lead on this project, I needed to make sure everything that was designed met the requirements from executive members of the Calero team, current, and future clients. The most important aspect of my role on this project was to advocate for the best possible UX and to create a delightful experience for all users.

Phase One

The executive leadership team set up a week-long session during which UX, Product Management, and senior engineering team members examined key areas for improvement and time boxed how long it would take to develop. As the representative for the UX team, I took a key role in identifying key technologies that would allow for the best user experience while being responsive and accessible.

Landing Page

The user’s first impression of the old platform is generally one of confusion. It’s unclear which action they should take.
The main actions on the page aren’t specific enough to guide the user down a particular path. They also mean different things in different parts of the world.
The information displayed on pending requests doesn’t give the user any helpful feedback.
Clunky UI buttons are persistent and don’t give the user many indications of their functionality.
Main navigation is subdued and often times hindered the users ability to perform an action.

Usage Charts

Outdated technology only allows for limited styling and types of graphing.
There are no options for exporting or sharing graphs making them difficult to use and consume by management.

Requests

Open requests are forced into a single column making it difficult to track for users who have more than 10.
Icons give no context to what they do.
Most users access the portal very infrequently so this column is usually empty making over 2/3 of the page dead space.

Approvals

A majority of users don’t have the proper permissions to performa actions on this page but it’s still visible.
For users who are ordering lots of devices, this column can get very long forcing the assign delegate button past the fold.
This poorly styled and defined button isn’t immediately noticed by users and creates a lot of confusion

Help Desk

This mass of empty space could be better used for tacking and acting upon open tickets.
This doesn’t prompt the user to take action on a specific device or service.
This takes the user out of the system to a separate documentaion system.
This opens up a third party chat that doesn’t work.

Shopping Experience

Icon gives no context to functionality.
System information can be difficult to read without using ‘friendly’ names.
No visual cue to direct users to pick a color and add the device to the cart.

Phase Two

After key areas for improvement were identified it was up to the UX team to begin wireframing and mocking up new potential layouts.

Landing Page

After several user feedback sessions, I was able to identify changes to the landing page that would increase usability.

Critical actions were brought onto individual device cards instead of haing to select an action, then a device. This allows for certain fields to be pre-populated and reduces confusion.
Requests and approvals can be identified in a notification. This gives the user some information while consolidating requests to their specific pages.
Other key workflows were put into buckets and made accessible directly on the landing page.
Device details were still accessible, even though key information was pulled out onto the landing page.
Having a device-centric layout meant that users could easily make changes to their current inventory without having to navigate through several layers of UI.

Shopping Experience

I streamlined the shopping experience by changing the information hierarchy and layout. Key features include a responsive layout that is accessible on all screen sizes, visible shopping cart, and new catalog structure.