Most organizations have large scale operations, thus a lot of employees. We had to assume that there are hundreds or thousands of employees commuting daily to and from their workplace. As such, we needed to design an intuitive interface where we provided an excellent overview of two primary actions - Adding and removing users and Renewing commuting cards.
On top of this, it's an e-Commerce site for B2B transactions which demanded a checkout to be designed as well. Adding a new user (and attaching a card) would be the equivalent of adding an item to cart on your favourite shopping site. Renewing a card would be treated the same way. Since business' normally pay by invoice and this was no exception, we didn't need to integrate a payment system.
Giving customers a good overview
During our workshops we identified a few key points that were important when administrating employees of a company, and the importance of having an overview of those things.
One major aspect of the interface is the ability to see when a card was running out and needed to be renewed. To achieve this we created a progress bar that changed color as it decreased with time; further highlighting that something needed to be done the closed it got to zero. Companies also had the option of of setting up auto-renewal if needed.
From the same screen we wanted admins to be able to to add, remove or edit employees directly without a page refresh. If they edit an employee, it is also possible to remove the commuting card which would change the visuals of the progress bar.
A specific page for card renewals
To reduce the amount of noise in one view we separated the renewal action to another tab. The idea is that on this page only the cards that a) demanded action of renewal the upcoming weeks and b) were not scheduled for auto renewal were listed, independent on which user it belonged to. The primary call to action here is to renew, but you can also cancel a card by deciding not to renew one (which is the equivalent of editing a user and unchecking the card option on the tab listing employees).
Deciding not to renew or cancel cards would send out notifications that an action needed to be taken, but the card would still be cancelled (albeit still shown in the lists).
Mobile and responsive adaptations
Mobile proved to be a bigger challenge here since most elemets were essential to the purpose of the system, but rethinking the concepts made us realize that we can still provide the same excellent overview.
The main view where we list employees is clean and minimalistic. We display icons that indicates if the employee has a card or not, and if you want to see more details or edit someone you simply click on them and do this on the next pages.
For renewal of cards we'd want to show the progress bar attached to each card directly on the page along with the date the card is expiring, but we still only list cards following the same conditions as on desktop. Clicking to renew one card would take the admin to the employee view with an additional box at the top for quick renewal actions.
Clicking on a user in the employee view would display the renewal box as well if the user needed to have their card renewed. So in essence, apart from the different designs, listing employees and renewal of cards leads to the same page.
Possibility to buy other tickets than commuting cards
Västtrafik has a rather large amount of different tickets compared to other companies in the same field, so to give admins the options of ordering tickets and cards from a list of options instead of doing so by directly attaching it to an employee we designed a intuitive category page listing the different products to each category.
Items are then added to card and handled the same way by checking out. The only difference being that the admin needs to then attach a ticket or card to an employee (which was something that was out of scope).
The page is divided by type (categories) and each category can have a number of products. Orders are not added to cart on category level, so one would need to expand the category and interact with the actual products to make a purchase.
At the bottom we also included a map that shows the different zones for the commuting cards.
We worked together with another firm in Gothenburg which created the original visual guidelines for Västtrafik but we experimented with using the signature blue color on elements we wanted to be seen. Thus, surrounding large scale elements were given a darker, more desaturated, color.
In the end, Västtrafik Business Portal is a different type of e-commerce site than what we're used to since it's targeted to other business' and not the end consumer in the same way. We learned a lot working with Västtrafik on this which will provide valuable knowledge in future projects.