B2B: Fleet Solutions – UI

Fleet Solutions is an eDriving program that offers online driver’s training to fleet companies. Each package includes of 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.

Persona Summary

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 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 on their learning progress. He wishes that everything can be done easier and at a glance.

Iteration Goals

Many aspects of the existing portal can be optimized for a better 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 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 feedbacks when an action is taken place. Oliver doesn’t have to second guess if the email was sent.
  • Because this app is mostly used on office computers, desktop UI is the main focus. However, UI elements should be designed with mobile app in mind for future possibilities.

Product Flow

Product flow with employees feature path highlighted

Dashboard Iteration Mockup

Dashboard Redesign Mockup

The Layout:
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.

Left Toolbar:
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, user can easily find the task he wishes to complete. Toolbar will be available on every screen of the interface.

Feature Cards:
Besides the toolbar, task features are also presented as cards on the dashboard. With consistent style of icons and titles, user naturally understands the multiple ways to quickly access his tools.

Notifications:
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.

Welcome Message:
A large greeting with 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.

Shopping Cart:
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

Employees Default Screen Mockup

Activities Feed:
When user enter 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. User can get an update of his team at a glance.

Sub-navigation:
On the left side of the action area are sub-level tasks under 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.

Message Notifications:
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 user’s unread message. They can also access the message through “read full message” link.

Message Center Inbox Mockup

Employees 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. User can conveniently write a message to his employees. The content of the button text clearly communicates to him what it does.

Inbox:
A breadcrumb style title is located consistently on screen to let user know where he is. Right now, he is in his inbox under message center. The action area of inbox is consist 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 read messages.

Components of Sub-level Tasks:
When the Message Center accordion menu is expanded, a list of related components are displayed. These components are more like directories that organize the messages. They are Inbox, Drafts, Sent, Archived, and Deleted.

Consistent Notification:
The previous notification is now located next to the Inbox link to indicate there’s a new message.

Message Center “Send a Message” Function

Message center "send a message" function mockup

Message Form:
Once 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. Text field is simple with basic text formatting functions. User also has the option of adding attachments to the message. When he is done writing, he can choose from 3 available actions: to “Send” which sends the message to recipient, to “Save Draft” which moves the in-progress message to the Drafts directory, or to “Cancel” which returns users to the Inbox default screen without saving.

Inbox Message Presentation Mockup

Message center inbox message presentation mockup

Message Presentation:
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.

Notification Off:
Notifications are finally turned off once user enters into message presentation of the unread message.

Inbox Reply Form Mockup

Inbox reply form mockup

Reply Form:
When user chooses to reply to a message, he will be in the reply form. The functions of this form is similar to the message form demonstrated earlier. The only differences are: recipient and subject fields are prefilled corresponding to the previous message and user can change reply “To:” original recipient to “Fwd:” to a new recipient.

Inbox Sent Action Feedback Modal Mockup

Inbox Sent Action Feedback Modal Mockup

Action Feedback:
Once user hits “Send”, an action feedback modal will confirm that the message was sent successfully. This way, theres no second guessing if the action was taken place. A message will also let user know, he can retrieve sent message in the “Sent” directory. There are multiple ways to exit modal panel. 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.

Wireframes of product

Wireframes and flow