Divided in two different redesign moments bundled into one, the first wave of this project involved taking the proposal of a redesign created by a previous team and adapting it to a series of time and budgetary constraints in order to render it feasible and submit it for development. The second redesign modified key functionalities, changing the information architecture of the app itself.

The current design

The client’s app consists of two simple functional elements: a banner, a box with the most important functions (such as recharge of credit) and a slider with the most used indicators in the form of large widgets, which includes further functionalities in the 3-dots. The footer allows to go to other sections of the app.

Within the scope of this project, only the homepage would be modified: Novità (News), Offerte (Offers) and Winday would remain untouched. It’s important to note here that Winday constitutes an entertainment app, and so, it’s an app-whithin-an-app in that it has almost no connection with the products or services on offer on the rest of the app. We will come back to this detail later on.

First redesign: The starting point

An independent team (that i did not participate in) 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 form the current design.

The most important functional modifications that they produced were a stack-of-cards component that would contain all the products and services that were currently accessible trough the app, as well as products not yet available on the app and probably not yet acquired by the customer. This catered to the client’s need to expans it’s products and services portfolio and have them direcly availanle on the app.

On the top of the app’s homepage the team proposed substituting the choice of phone number with a profile componet. 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 according to the card selected in the stack.

On the UI side, the completely overhauled the look and feel, proposing a dark mode UI as standard and used colors that had been established in the extended brand palette but never used, to give the cards and the banners below them a color-coding that would connect them. 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.

Adapting to a budget

I was tasked with analysing this redesign within the context of the current app and its connection with each single functionality it would activate or call. I was also made aware that it would 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 fesability of certain functionalities, but then, mostly, by elliminating new components or modifying them in order to make use of existing components in the design system (DS).

The stack-of-cards element, central to the previous team’s proposal would be implemented despite being a completely new component, just not with 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 dedicated banners could apparently be produced, despite both design of the component and the illustrations being completely new.

On the UI side, the dark mode was quickly dismissed as there was one in the works elsewhere (a different dark mode) with an uncertain launch date.

After several analysis and conversations with the stakeholders, I was ready for an UI adaptation of the dark-mode concept into the current brand’s UI. I kept the strong, previously unused colors. Since they intended to create color-coding of what where to all effect and purposes entire economic categories of the client’s portfolio, I spoke to stakeholders in branding and marketing to see if they had other suggestions as to using specific colors to represent the categories (even if just for the app).

First adaptation

The first resulting layout contained all of the proposed modified functions, the stack-of-cards with it’s annexed banners at the bottom (made with illustrations instead of the usual photographic banners), the profile system on top, etc. This proposal mostly converted the look and feel to UI elements that already existed in the DS, with the exception of ex-novo elements like the stack-of-cards itself and the lower banners.

This led to more in-depth conversations with IT and the stakeholders, that were envisioning everything that needed to be possible (and how much it would cost to implement) for the app to function properly as they were handed the prototypes for the new app in high-definition, final UI.

Upon their further consideration, the stack-of-cards component fell out of favor being substituted by a system that would be easier to build from the existing elements of the DS, an series of stacked accordions. It also became evident that the app would not be able to know what card (or accordion) was selected in the stack, and so the lower banners could not be card-specific. They were dismissed.

Substituting the choice of a phone number 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 on a separate timeline. From this moment on, our design would assume the functionality to remain as-is.

The next series of iteration refined this 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 inexistent stack-of-cards components and the commercial categories that the customer would navigate were both easily discoverable and straightforward in their offer. as in previous iterations, they would allow to both view and customize current setting in the case of services already acquired, as well as purchase new services in any instance in which the customer did not yet own the service.

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

Second redesign: The new information architecture

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

In the meantime the client was undergoing an important expansion of its services: moving away from a purely telco offer and including the energy (providing electricty and gas to households) and the newly unveiled insurance products, and from the top of the branding strategy a deep shift was becoming evident: the move away from being simply a telco provider needed to be more emphatic.

A new input arrived: the new products could not be relegated to secondary choices, but would be cardinal to the commercial offer. Three new categories would chatacterize the clients portfolio, one containing the entirety of the telco protfolio, and the other two being energy and insurance. All telco products would therefore be found inside a larger Telco container. The layout of the portfolio needed to show this better.

This required creating sections with the same visual weight, in the same space, and to separate them in novel ways. I called for a first phase of discovery that correctly suited the new needs of the project.

In this discovery phase I did not only analyze competitors, but also completetely different products apps that held together very diverging functionalities. I also dived into trending visuals and UI, in order to also take the opportunity to refresh the look and feel of the project still within the now very known budgetary constraints.

The main question was how to best mix different sections, distinct not only in their content and offer as they already were before but also, possibly, in their branding and look and feel. This is where Winday comes back to mind. The best choice would have probably been by creating sections reachable through buttons in app navigation bar. Through the new discovery work, the closest examples did so as well. Unfortunately, this possibility was out of scope.

Furthermore, why not simply have separate apps for separate categories of the portfolio? Again budgeting reasons pressed. The new services provided where recent endeavours (energy) or were even being launched at the time of the deign work (insruances) so few clients had subscribed to these services and it was not even clear whether the service offer would succeed (each a delving into a new market). The client did not yet want to go on an all out redesign before knowing whether the investment would pay off and the new services would be a success (only then earning their place in the higher echelons of the information architecture).

What I produced then were different levels of distinction between these three main topics, taking increasingly more space and weight. But I also had the distinct feeling we had lost one of the most important elements of the original redesign: a fresh new visual impact.

This would clearly not be achievable anymore through a dark mode, or the use of new, more impactful colors. But we could still make use of their distinctive visual design used in the banners. Following our current path, my last proposal was bolder, visually heavier and more more impact-oriented.

This last proposal was a success among the stakeholders, it prompted the rehash of widget-like component in the cards, instead of stylizing them as lists, and also allowed us to the getting rid of both extra information that was not well defined commercially, and unnecessary decorations that had become legacy elements from previous proposals.

Prototype work

Most of the conversations we had with stakeholders, especially stakeholders that were less exposed to preliminary layouts and design work in general, were conducted making use of UI-ready prototypes like the one shown below in order to provide the closest possible experience to the final look and feel of the proposals.
NOTE: The prototype may take a minute to load. Visible only to logged Guest users.