Fleet Manager Portal
Fleet Solutions is an eDriving program that offers online driver’s training to fleet companies. Each package includes a series of customized courses and access to the Fleet Manager Portal, where managers (admins) can supervise the learning progression of their team. Through this product, they can assign courses to their employees, check on their status, purchase new courses, order driving records, and print reports.
Oliver is a fleet manager who oversees 112 delivery drivers. He is 55 years old and expects everything to be done efficiently. His typical day in the office consists of multiple phone calls with his team and vendors. He’s in front of his computer most of the day coordinating delivery routes and schedules. To ensure the safety of his drivers, he has to make sure they are up to standard with the rules of the road. As he is a very busy individual, he is frustrated that he has to reach out to individual employees to check their learning progress. He wishes that everything can be done easier and at a glance.
The existing portal can be optimized in many ways to improve the user experience. As a challenge, I want to continue iterating the design of this product to showcase my thought process. I must note that this is now a personal project and not paid for by eDriving. Because of the scale of this product, each section is divided into phases. This particular post will focus on the following goals:
- Add a simple Message Center to establish convenient communication between the manager and drivers. This can reduce the number of calls Oliver receives throughout the day.
- Optimize the layout for quicker interactions. Task functions should be intuitive and easy from using common design patterns. Instead of spending time learning to use the portal, Oliver can focus on his important tasks.
- Add more informative feedback when an action is taken place. Oliver doesn’t have to guess second if the email is sent.
- Because this app is mostly used on office computers, desktop UI is the main focus. However, UI elements should be designed with a mobile app in mind for future possibilities.
Dashboard Iteration Mockup
The new dashboard is designed around helping the user focus on his tasks. The top header and footer frame the interface, directing attention to the central action area.
All task features are now grouped into a side toolbar for quick access. With our eyes naturally drawn towards the left side of the screen, the user can easily find the task he wishes to complete. The toolbar will be available on every screen of the interface.
Besides the toolbar, task features are also presented as cards on the dashboard. With the consistent style of icons and titles, the user naturally understands the multiple ways to access his tools quickly.
Dashboard notifications are prominent and visible when users log in. A notification appears over a specific feature on the toolbar to indicate it needs attention. In this example, the user has a new employee message. Another notification in the form of an inline hint is presented on the Employees feature card to inform them of a new message.
A large greeting with the user’s first name welcomes him. Seeing his name on the dashboard conveys that this is his own personal workspace, an experience tailored to him.
Ways to access the shopping cart should be easily identifiable but at the same time subtle. While the primary goal of this product is employee course management, the secondary goal is to sell course products. The current positions of the shopping carts have great potential. The 1st shopping cart is located conventionally on the upper right corner of the dashboard, where people are used to. The 2nd shopping cart is a feature on the toolbar. Being the last item on the list, it is subtle but still available when needed.
Employee Default Screen Mockup
When the user enters the Employees feature (either through the toolbar or the dashboard card), he will arrive on the default screen. The action area is a feed showing employee course activities. The user can get an update of his team at a glance.
On the left side of the action, the area is sub-level tasks under the Employees feature. They are Message Center, Employees Status, and Edit Employee. Under each sub-level task are components grouped to that specific task. For now, they are collapsed in an accordion menu. A view of the expanded accordion menu is available in the next mockup.
Another inline hint under “Message Center” notifies the user there is a new message waiting. At the top of the activities feed, a highlighted prompt offers a snippet of the user’s unread message. They can also access the message through the “read full message” link.
Message Center Inbox Mockup
“Send a Message” Button:
With Fitts’ law in mind, the “Send a Message” button clearly stands out from the rest of the menu. The user can conveniently write a message to his employees. The content of the button text clearly communicates to him what it does.
A breadcrumb style title is located consistently on-screen to let the user know where he is. Right now, he is in his inbox under the message center. The action area of the inbox is consists of a search bar to quickly find an email, a column sort by alphabetical order, another column sort by date, and a list of incoming messages. The unread message is bolded to set apart from reading messages.
Components of Sub-level Tasks:
When the Message Center accordion menu is expanded, a list of related components is displayed. These components are more like directories that organize the messages. They are Inbox, Drafts, Sent, Archived, and Deleted.
The previous notification is now located next to the Inbox link to indicate there’s a new message.
Message Center “Send a Message” Function
Once the user clicks on the “Send a Message” button, the action area becomes the message form where he can write. To, Fwd, CC, and Bcc fields are autocomplete enabled for convenience. The text field is simple with basic text formatting functions. The user also has the option of adding attachments to the message. When he is done writing, he can choose from 3 available actions: “Send,” which sends the message to the recipient, to “Save Draft,” which moves the in-progress message into the “Drafts” directory, or “Cancel,” which returns users to the Inbox default screen without saving.
Inbox Message Presentation Mockup
Since the user is a busybody who doesn’t have time to learn new functionalities, designing an intuitive communications tool will help him save time. The message presentation should be clean and readable. The content of the message is organized in a hierarchy for fast scanning. After the user reads the message, he is offered 3 simple actions: to “Reply,” “Archive,” or “Delete” the message.
Notifications are finally turned off once the user enters into the message presentation of the unread message.
Inbox Reply Form Mockup
When the user chooses to reply to a message, he will be in the reply form. The functions of this form are similar to the message form demonstrated earlier. The only differences are: recipient and subject fields are prefilled corresponding to the previous message, and the user can change reply “To:” original recipient to “Fwd:” to a new recipient.
Inbox Sent Action Feedback Modal Mockup
Once the user hits “Send,” an action feedback modal will confirm that the message is sent successfully. This way, there’s no second-guessing if the action happened. A message will also let the user know they can retrieve the sent message in the “Sent” directory. There are multiple ways to exit the modal panel. The user can click the “X” icon or the CTA “Got it, thanks!” He can also click anywhere off the modal panel to escape. Upon exit, he will be sent back to the Inbox default screen.