Divided into two different redesign stages, the first one involved taking a redesign proposal created by a previous team and adapting it to a series of time and budgetary constraints for its development. The second stage modified key functionalities, changing the information architecture of the app itself.

Team

I was the main and often only UX/UI Designer working on this project, but I had at times the participation of other UX/UI Designers and my Design Lead. I talked often with the developers for feasibility queries.

Starting design

The client’s app consists of two simple functional elements: a banner on top, a box with the most important functions (such as recharging of credit) and a collection of large gauge widgets that slide in order to navigate them. Lastly, a navbar in the footer of the app.

Within the scope of this project, header and navbar would not be modified; items on the navbar Novità (News), Offerte (Offers) and Winday would remain untouched.

First redesign: The starting point

An independent team (that I was not a part of) had been tasked to look into what functionalities could be added or improved, as well as producing a refresh of the UI, having been given the explicit capacity to depart entirely from the current design.

Needless to say, the most striking aspect of their proposal was a darkmode UI, but let us go over the functional modifications first to later discuss this in further detail.

The most important functional modifications that they introduced were a stack-of-cards component that would contain all the products and services that were currently accessible through the app, as well as products not yet acquired by the customer. This catered to our client’s need to expand its portfolio of products and services and have them directly available on the app.

On the top of the app’s homepage the team proposed substituting the choice of phone number with a profile component. Just below that would be the same banner as currently, but with an updated look and feel and a separation by categories to better indicate to the user what was being advertised.

Below the stack-of-cards component, they proposed visually simplified banners that would promote services in a manner directly related to the card selected in the stack.

On the UI side, the team completely overhauled the look and feel, proposing a darkmode UI as standard and used colors that had been established in the extended brand palette to give the cards and the banners below them a color-coding that would connect them to each other. Furthermore, the UI in general made a more modern use of background images and glassmorphism to give the entire app a fresh and distinctive feel.

Process: Adapting to a budget

I was tasked with analysing this redesign within the context of the current app at the time and its connection with each single functionality it would activate or call. I was also made aware that most modifications proposed would probably have to be greatly toned down in its ambitions due to very limiting budget constraints.

This would be achieved first and foremost by assessing the feasibility of certain functionalities, but then, mostly, by eliminating new components or modifying them in order to make use of existing components in the design system (DS).

At the beginning, the stack-of-cards element central to the proposal was approved by the stakeholders, despite being a completely new and complex component. I would not have the internal widget visualization of the elements but with a simpler list view, that was more akin to the components that already existed in the DS. Also its lower companion of banners connected to the cards would also be produced.

On the UI side, the darkmode was dismissed immediately as there was a different darkmode already in the works by a different team, but with an undefined launch date, such that we would proceed without considering the possibility of a darkmode at all.

After several analysis and conversations with stakeholders, I was ready for a UI adaptation of the darkmode concept into our current UI’s look and feel. I kept the bright, previously unused colors. Since these colors intended to be used to establish color-coding for entire economic categories of our client’s portfolio (mobile phones, fiber internet, etc), I also talked with colleagues at the branding and marketing departments to get their thoughts and see if they had other suggestions of colors to represent these categories (even if just in the context of the app).

First adaptation

The first resulting layout contained all of the proposed modified functions: the stack-of-cards widget with its annexed banners at the bottom (made with illustrations instead of the usual photographic banners), the profile system on top, etc. This proposal was almost exclusively limited to converting the look and feel of the darkmode UI to UI elements that already existed in the DS.

More in-depth conversations with IT and the stakeholders ensued. It became clear that they were properly determining feasibility and cost impact only as they were handed prototypes for the new app in high-resolution UI.

Thus upon further consideration, the stack-of-cards component fell out of favor and was substituted by a system that would be easier to build from the existing elements of the DS: a series of stacked accordions. It was also determined that the app would not be able to determine what card (or accordion) was selected in the stack, meaning that the banners shown below could not be card-specific. Because of this, these banners were dismissed entirely.

Substituting the choice of a phone number on top of the layout with a full-fledged profile system was something the client was interested in and wanted to research and implement thoroughly, such that this functionality was given to a secondary team to work on following a separate timeline. From this moment on, our design would assume the functionality to remain as-is.

The next series of iterations refined these core components better, establishing an adequate use of color for the categories and beginning to map the different functionalities that each accordion would afford. The accordions were a good compromise for the loss of the stack-of-cards components and the commercial categories that the customer would navigate were both easily discoverable and straightforward in their offer. As with previous iterations, they would allow the user to both view and customize current settings in the case of services already acquired, as well as offer to purchase new services in any case in which the customer did not yet own said service.

At this point I felt I was nearing the completion of the proposal phase of the project and would move on to surveying development by IT.

Second stage: A new information architecture

Further rounds of discussions happened among the stakeholders, allowing key concepts to crystallise further as I kept producing prototypes for them that provided an ever clearer view of what the final product would look like and how it would function.

In the meantime our client was undergoing an important expansion of its services, moving beyond the purely telco commercial offer and the home energy products that it had been providing for only a few years (electricity and gas for households). Our client announced it would venture into the insurance market, capitalizing on the household recognition of its brand.

It soon became clear that this would result in a deep new branding strategy. As a result, the entire commercial offer would be organized under three cardinal categories: one containing the entirety of the telco portfolio, the second one containing the home energy portfolio, and the third one encompassing the new insurance products.

According to this new architecture, all telco products would be found inside a larger semantic container and the layout must reflect this. This meant creating sections with the same visual weight, in the same space, and then separate them in novel ways.

I called for a first phase of discovery in order to better address new UI needs for this project, as the initial design would not be simply adapted, but at the same time completely new proposals were possible and thus fresh input would be very useful.

In this discovery phase I did not only analyze competitors, but also completely different categories of products, particularly looking for some that held together very diverging functionalities. I also dived into trending visual concepts and UI’s, in order to also take the opportunity to refresh the look and feel of the project, which I felt was receiving new functionalities, but not so much bold visuals.

The main question was how to best mix different sections, distinct not only in their content and commercial offer but also, possibly, in their branding and look and feel. Overall, the best choice would have probably been to have separate sections reachable through buttons in the navigation bar: the closest examples found during discovery did so as well. Unfortunately, this possibility had been out of scope since the beginning.

What I designed next were four different proposals, each with different levels of distinction between these 3 main categories. In each one, every topic took increasingly more space and weight to distinguish itself from the other 2 categories. But the last proposal did something more: it offered considerably increased levels of visual impact to go with each category.

This last proposal was a success among the stakeholders. It went beyond the use of a dark mode or new, more impactful colors, and instead suggested that each category be its own branding experience look and feel in functionalities. Following this path, my last proposal was bolder, visually heavier and much more impact-oriented.

At a last moment I was able to revive the widget-like component in the cards as had been originally proposed. Furthermore, in the case of the categories for which the client could possibly have acquired no products yet, I developed the concept of full visually impactful and colorful banners, resulting in an interface that is bold both in case of configuration navigation and even more so in the case of an “empty state”.