DIGITAL LEASE RENEWAL

Volkswagen FS

DIGITAL LEASE RENEWAL

Improving the experience and redefining the design process

Improving the digital lease renewal experience and re-defining the design process

Improving the experience and redefining the design process

Group-7
WHEN

2019

 

 
WHERE

USEEDS°

 


FIELD

UX & UI, Design Processes

One of the most influential players in the car industry worldwide had developed a product to digitalize lease renewals for its brands, in different markets. The design process had been not ideal due to the decision for a desktop first approach and lack of consistency at UX and UI level. At the same time a new front-end library tool was being globally implemented, but the digital lease renewal team was not having the necessary cooperation with its team to ensure coordination and a smooth release.

I worked for five months at the client’s office with the digital renewal team as the only UX/UI designer. The team included 2 POs and 3 developers.

 

My tasks in details

  • Improvement of UX concept and interaction patterns, including making the experience responsive.
  • UI general improvement (design system conform and global front-end library compatible).
  • Definition and execution of the agile design process.
  • User test preparation (use case definition and prototyping).

The initial context

Here below are displayed the teams involved in the projects and the information they should exchange. The magenta arrows show the processes that initially were not functioning.

Group

Understanding the real challenges

I was hired to improve the general UX and UI designs and support the development of a multi-brand product launched on several markets simultaneously. Soon I realized that beside the existing design issues (general usability, responsiveness, style-guide conformity) another problem needed to be solved at a higher level. The company was implementing a new front-end library tool whose aim was to reduce in each product the design switch from one brand to the other through one click. This meant an efficiency improvement on the long term, but in the short term the front-end library was still being built.


THE INITIAL BLOCKER FOR THE PROJECT

A product like the digital lease renewal, with an imminent release, was risking to be unable to use this fundamental front-end tool because nobody was taking care that the components needed  were being designed, approved and developed on time. Much of the code done so far for the project was not front-end library conform but custom, which meant creating a huge design debt for the future. A lack of process was putting the project’s release and sustainability at risk.

Not all of the needed teams felt responsible for the project’s outcome, so the project was blocked.

The solution 

An effort to enable all of the necessary information exchanges on a regular basis was the solution to keep everybody informed and to make them feel responsible for the final result of the project.

 

THE NEW PROCESS

The timing  was based on 2 weeks sprints, with regular meetings involving the POs, the internal UX team and the new front-end library team for design reviews during the first week, and then with the internal development team during the second week.

The result

Through this agile process I was able to deliver all the assets planned after every sprint, after having confirmed their usability and brand conformity, while ensuring their development through the new front-end library tool.

Release date was respected for both brands planned for the product and this process became a cooperation routine between the Digital Renewal product team, the internal UX team, together with the front-end library team.

 Moreover the project became a reference inside the company on how to integrate the new front-end library in all the products.

The concept

The product aims to let the users find the exact car they are looking for at the condition they wish, before even going to the car dealer.

 The two main focal points in the concept are:

  • An informal yet focussed questionnaire collects the users’ preferences and allows the app to suggest specific products that are relevant for the clients.
  • The quick comparison between vehicles based on a card pattern helps the users make up their mind and understand what the better option could be for them.
  • A clear overview of the finance quote, including a calculation of the old car’s equity. The detailed table is made more applealing by a graphic chart representig all the data.

The match-maker questionnaire

DR-MVP-Matchmaker-Quest06

The cars comparison

comparison-1

Car suggestion's detail page

finance-quote

Usability improvement

DR_user-1

Some interaction patterns initially included in the project were not user-centered and not responsive, so changes had to happen in order to provide the best experience for the users.

My main goal was to empower the users by helping them speed up tasks completion and making them feel in control when using the product. I outlined overarching principles that served as compass throughout the redesign process:

  • Display information contextually and collapse infrequently-accessed elements: the screens were crammed with too many fields — this combined with no visual hierarchy unnecessarily added to a user’s cognitive load.
  • Create reusable components: this would make it easier for users to identify the same pieces of information anywhere in the app. This would also speed up development.
  • Reduce chance of errors and confusion: users were often unsure whether or not they had made changes. In the redesign, we needed to give users confidence when taking action.
mobiles

The multi-brand challange: managing multiple design systems

While making the designs brand conform I also had to ensure that they were compatible with the new front-end library. My process to takle these was the following:

  • I started with the key screens and analize every component, beginning with the newest or most complex ones, and check whether they existed in the current UI.
  • If they did exist I would check their staus for the front-end library development. In the case the components did not exist at all a development process had to start, based on my designs signed off by the internal UX team.
  • If the components existed in the UI and were already being developed for the new front-end library I would do a quality check and allign with the internal UX team.

The process was made systemic by our sprint’s schedule, in which the communication with both the internal UX team and the developers team for the new front-end library were essential.

I also had the chance to deep dive into the client’s existing design systems and learn a lot on the way they are structured and developed on multimple brands simultaneously.

The digital lease renewal challenge was a big one for the internal UX team too and the solution was to cooperate by demanding feedback from all responsible parties, on each single component. After the second sprint the process became speedy and really efficient.


Marina Caramagno   |   marina.caramagno@gmail.com   +49 15229235576