15.08.2019, Michael Gerber
The first commit of the VSHN customer portal was on May 19th, 2016. The portal has grown steadily ever since. Many functions were added, but the portal itself was always kept in Beta.
Tobias Brunner, Head of DevOps and Partner at VSHN, has asked nxt to implement a facelift of the portal in order to bring it out of Beta.
The portal combines many functions that depend on other systems, such as Jira, Odoo and OpenShift clusters. In order to work on the web application outside of the VSHN-internal infrastructure, these surrounding systems had to be mocked. The customer portal is based on the Play Framework.
In order to support VSHN as quickly as possible, we decided to store the mock data of the individual surrounding systems as YAML files. An example for LDAP looks like this:
dc=ch:
dc=vshn:
ou=users:
uid=sc: &sc
uid: sc
givenName: Sean
sn: Connery
mail: [email protected]
memberOf:
- cn=role admin
- cn=role user
uid=dc:
<<: *sc
uid: dc
givenName: Daniel
sn: Craig
mail: [email protected]
memberOf:
- cn=role user
As part of the facelift, we applied a redesigned to the whole interface. In addition, various user experience improvements were made during the adjustment of the individual pages. Users now work with the individual functions even more efficiently.
There is no second chance for a first impression. That’s why the login page – the entrance to the portal – has been improved in a playful way. The VSHN eye’s pupil tracks the user’s input and the eye closes while the password is entered. This shows that VSHN values security very highly.
The dashboard – with the various widgets – clearly shows the new, visually more appealing look of the customer portal. In addition, all tables have been standardised and search and export functionalities have been integrated.
We unified all forms in the entire application. For the individual input elements, such as text input, we created new, reusable components. We used these components in all the forms and were therefore able to remove a lot of duplicated code. When creating a ticket, the description field supports the Jira Markup Language. This was working already for quite some time. Now the new toolbar allows easy access to common functions such as making a text bold.
Working with VSHN was very pleasant and we were able to focus on the improvements in their customer portal. The agile and iterative way of working allowed us to deliver new features to VSHN’s customers as soon as these features were ready, and usually within days. VSHN responded very fast to any questions we had via an internal chat, and we always had a competent contact person (even in spite of holiday absences).
