nxt - Showcase Customer Portal of VSHN

showcase vshn portal

VSHN supports software developers with automated testing, deployment and scaling of their applications and running them on any infrastructure. We supported VSHN with the relaunch of their customer portal. In addition to the redesign, we streamlined the functionality and improved the user experience for the customers.

Initial Position

The first commit of the VSHN customer portal was on May 19^th, 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.

Results

Fake It Till You Make It

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

Unification of The User Interface

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.

The First Impression

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.

Dashboard

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.

Create New Ticket

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.

Cooperation With VSHN

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).