VEKA

BACK

  for just the key information follow the yellow text.

One central portal to give services and value to Veka’s clients, the biggest window manufacturer in the world.

vekagroupportal.co.uk

 

General Info

client name // VEKA

starting year // 2018

role // Lead Product Designer

responsibilities // Overseeing the full product lifecycle from discovery to live. Hands-on work in discovery and design phase and leading work on testing and development planning. 

Constraints & timeline

Use Veka’s strict existing branding guideline.

 

Client

VEKA is the biggest window manufacturer in the world, founded in 1967 in Germany as a manufacturer of shutters, it currently operates its own extrusion facilities in twelve countries. They have a huge client base of fabricators and installers. 

Brief

As a value-added service to clients, Veka provides clients with access to a variety of different applications. Each of them with its own URL, username and password, which made it a challenge for the clients to access and get value from. This fragmentation made their client unhappy and the feedback obviously bad, they so required a solution.

Plan

Because the key point of the required solution was related to the existing application, I have planned to study and understand them to identify similarities (and so create simpler solutions) and also to identify the key applications to be used in the first version (choosing between the most used). All this information were to be gathered in the discovery phase. That would then be followed by a functionality discovery to define the tools hierarchy and structure of the solutions, to be then translated in a full prototype, to be then tested and developed.

Discovery

To create a solution I always start from the why so from understanding the key areas as much as I can. I do this at the beginning of every project during the discovery phase.

Discovery / existing applications, goals and users

To understand the existing applications and their different added value for the users, guided by Veka’s team, I used and tested all of them. I also reviewed and studied them together with the developer manager to understand differences and similarities to then be able to create a model. I also reviewed the general feedback already given to VEKA by their users.

/ JTBD /

I identified JTBD in the ‘locate’ and ‘prepare’ steps of the job mapping process.

/ JTBD Statements /

  • When I am doing my job I want to find easily all the information I need so I can be more efficient focusing on the job itself.
  • When I am preparing for a job I want to effortlessly choose and track the material I need so I can save time and energy.

To understand the business goal I focused first on the users’ JTBD and their related pain points, knowing that a resolution of the user pain points would have solved also most of the business pain points, first of all, the lost value.

To understand the users, I have used again the JTBD together with existing analytics and the business’ knowledge.

/ initial discovery results /

    • Goals: simplify user flow (being them resellers or installers) by using the available apps
    • The apps revealed to be divided into those that allowed being re-skinned and others that didn’t 
    • I identified the need for an extra tool to manage their digital assets
    • The need for a centralised platform with SSO was identified 
    • I identified 5 main apps to be used for the initial version (including the DAM)

Discovery / functionalities

To understand the functionalities needed for a centralised platform I studied, together with the stakeholders, their tasks, both existing and new (generated by having a centralised platform). This obviously didn’t consider any standard features such as those related to member actions (signup, login, password recovery etc) or to the standard website management.

By studying the different users I identified that each kind of user had specific access to a set of applications, so I had to make it easy to assign apps to users. 

By understanding their workflow I found also the need for a Digital Asset Management, for both their team and their customers.

Because I was designing a new solution, and this meant some time for staff and users to get used to it, I also found the need for both the support team and the management team to be able to impersonate users, to easily see the issue and provide a path to go forward.

/ functionalities discovery results /

    • I identified the main task for the users in doing their job (that being resellers or installers) by accessing the apps provided by Veka, so by simplifying the access to them they were able to complete more easily their job and Veka were able to have less work required to support resellers and installers.
    • I identified the need for managing digital assets by creating a structure and so being able to use them and share them
    • I identified the need for an impersonation functionality to allow support teams to easily help users.

Discovery / wireframe

With all this information and knowledge gathered from users, stakeholders and research I was able to structure the first wireframe using the main functions defined and one app for each kind. I then used this wireframes, presented on an interactive interface using Invision, to validate the concept with the developers first and VEKA’s stakeholders after. 

I also used this low fidelity prototype for internal usability testing and user testing (using a user testing group organised together with the client) to validate the assumptions made during discovery. After a few amends, I proceeded to the high fidelity prototype phase.

Prototype

VEKA had an existing and strict brand identity to follow. To translate the product structure to an intuitive and flexible UI I used the main brand shape (“the diamond”) as a basic element. Considering that the client requested to have just a desktop web app, I created a landing dashboard based on a diamond shape grid, and then app pages templates, for those apps that allowed re-skinning and header/footer navigation for those apps that didn’t.

The main structure of the landing page is populated by diamond-shaped titles (buttons) to direct the users to their specific available apps. The specific app pages all allowed users to navigate back to the landing page or to other main pages such as contact. On top of this app pages, I designed the news page, contact page and event page as extra points of contact of the company with the users.

Interesting to point-out is that the diamond-shaped grid resembles a view through a window and so it connects with the core VEKA’s product.

The plan was to create a portal with SSO (single sign-on) so I structured the solution to have just one login point. SSO obviously was designed to solve the main “job” of the user, easily accessing these apps to do their job and so get value.

This interactive prototype was first reviewed together with the developer manager, then tested internally and after feedback and related amends. It was then tested by the previous testing group and after another round of feedback and amends was signoff for development by the stakeholders.

Development

The development started with the full front-end, during this I worked closely with the developers, doing also full testing throughout, to support them in achieving the vision tested in the prototype and agreed with the client. The back-end development, being mostly composed of multiple integrations with third-party apps, required a stronger effort in defining and naming solution for the specific apps, even if based on the initial knowledge the templated were obviously able to accommodate this app up to a certain level which again required different solution to achieve a final cohesive experience for the user.

The final product, when ready, was fully validated by a final internal and user testing on the devices and browsers supported.

Post live achievements

It was designed and live within a month. Users were delighted to have all the applications in one central area, requests for help with forgotten passwords did reduce dramatically of over 90%.

As a result of the success of the portal, we integrated even more applications and, on client request, I created a mobile version too.

The project was also chosen to represent the company at the WIREHIVE 100 for best digital transformation.

Related projects

Buckinghamshire Fire & Rescue Service

A brand new WCAG complying website to simply share safety information and latest updates about the work of the Buckinghamshire Fire & Rescue Service.

Local Government and Social Care Ombudsman

A 7 phases project to simplify the citizen’s experience in complaining about a public authority.

NBC Sports

A new live portal and tool for NBC Sports International to share and promote their titles and create instantly a custom PDF presentation.