Our client, our consumers’ association, needed me to create a section for their customers, in their user profile, that kept them up to date with the Class Actions tha they were participating in with our client. Beyond updates, this section also needed to inform them of documents required of them or to take specific action to further Class Action.

Brief

Our client, Italy’s main consumers’ association, runs a series of Collective Actions (CA) throughout the year, legal battles, open for anyone to join, that deal with wrongdoing on the part of companies or public institutions which impact large numbers of consumers, and request compensation for all of them.

Unfortunately, these battles are often lengthy and impredictable in their duration, take place for the most part behind closed doors and through lengthy bureaucratic battles with almost no updates for long periods of time.

In my plotting of the Customer Journey making use of the information the client provided, there was a clear dip in interest/build-up of frustration on the part of the user just after the sign-up, when time would begin passing by without progress.

This interest or frustration varied according to the starting point of the users, being most present in the Persona “The Enthusiast”, which I focused on as it became clear it was the participant to the Class action most desirable to the client.

Team & resources

• UX Designer, Front-end Developer (Me)
• Complete library of UI assets

My roles were that of sole UX designer and Front-end Developer, such that after the design modifications were approved, it was also my responsibility to create the new items or modify existing ones in our libraries of code.

Process

Wireframe

A section within the user’s My Personal Area dashboards was required, where these complaints could be kept and reviewed by the user, and where it would be possible to receive updates about the progress of the Collective Action when there were any, or know of its progress in the absence of news.

I decided with the client to make the progress of the Collective Action evident through the use of graphic aids, as well as give the user relevant information and warnings about further action required on their part, such as providing missing paperwork or being reminded of upcoming deadlines.

The dashbord also needed to offer an interface to manage the evidentce that had been uploaded during adherence to the CA, such as documents and screenshots.

I proposed a list view, with every horizontal card subdivided in three sections. The first section would contain the relevant information of the CA and its featured image.

The second section would be for communication to the user, where colorful icons would indicate the progress of the CA, as well as warn them of possible needed action or upcoming dedalines, including the relevant links to execute the actions required.

The third section, below, would contain the lists of the uploaded documents.

The prototype

I created an MVP prototype in Axure RP in order to do quick internal testing with the initial possible visual layout and make sure the users found their way around and were able to perform the different tasks that we needed them to do. We tested with colleagues in the department with positive results.

The UI

The visual aspects for the final look and feel of the interface were developed in close adherence to the clients brand palette and style library. The icons are colorful and mainly purpose oriented, but are the only style that wass created ex-novo, outside of the already established style-guides of the client’s brand.

With this material ready, I handed it off to the development teams and followed their setting up in development environments to supervise the usabillity until the deployment of the final product to consumers.