UX/UI DESIGN
Updating Subscriber Center App - VIP Telecom
CHALLENGE
The VIP Subscriber Central App was outdated and needed a redesign to meet the needs of users and internal company workflows. The challenge was to build a new version with limited data analysis, a short timeframe, decision-making concentrated at the general directorate level (non-specialists), and with a reduced design and development team.
TOOLS
Figma, Miro, Adobe Creative, Jira Software
October 2022 to January 2023
TIME
Overview
UI/UX Designer, designing a mobile app for VIP brand, from conception to final prototype.
ROLE
About company
The VIP is a Brazilian brand of residential internet using fiber optic technology that serves an extensive region in the Metropolitan area of São Paulo city. VIP, along with eight other brands, constitutes the Alloha Fibra group, an independent company providing high-tech internet services throughout Brazil.
Design Process
Discover
The initial phase of the project focused on understanding the problem. Upon taking over the project, I learned that the company was in its initial stage of Design and Technology maturity. Therefore, I would be the first UX Designer to work within the product team. Consequently, I realized it was necessary to adapt certain processes to diagnose the main issue of the application and determine how to address it.
"The application is not being used by customers due to lack of updates and features that meet user needs." (Renato Fornazeiro - Systems Development Manager)
Understanding my starting point
🚩 Challenge: I was the first UX/UI Designer in the company. VIP was in its initial phase of Design maturity, and as a result, some processes needed to be adapted and revamped to meet the demand.
Investigating the problem with users reviews
Facing the issues presented by the Development team, I immersed myself in the product and utilized all available resources to investigate potential problems. Initially, I analyzed the app reviews in the store to understand the most common errors reported by users.
(from "[VIP] Reviews APP VIP "made by Figma)
Review lastest version
Moving forward, I sought to understand all the structures and processes of the latest released version of the application. Leveraging my knowledge of Nielsen's heuristics and graphic design principles, I analyzed both the visual design and the workflows of all functionalities, compiling a comprehensive report on the product.
(from "[VIP] Analysing APP VIP (old version)" made by Figma)
Taking notes and doing meetings... and meetings
"A VIP Development Team had the responsibility of building internal and external applications, catering to the demands of the end customers (B2C) as well as other business areas within the company (B2B).
For this reason, I participated in numerous meetings where I could listen to the needs of areas directly or indirectly related to users and the product we were updating. This was crucial because internal workflows would impact the creation of new features in the app, such as the Customer Service flow that would be redirected to the company's Support department.
During this process, I also collaborated closely with the Business Intelligence team. They provided us with data on the usage of the old App version, enabling us to make more informed decisions regarding the development of new functionalities."
(notes and drafts from my notebook)
🚩 Challenge: Adapting the Design Sprint process for a solo practitioner, as well as adjusting deliverables due to limited access to user behavior data.
Define
Diagnosis
After absorbing all the available knowledge to grasp my starting point, I organized all the ideas and solutions discussed to prioritize them in the Design Sprint. With the main goal of developing a new version for the application in mind, we selected the critical and fundamental points for the app updating.
(from "[VIP] Objectives APP VIP "made by Figjam)
🚩 Challenge: It was necessary to consider the foundation of Graphic/Visual Design simultaneously while contemplating the overhaul of the product's UX, as none of the active digital products adhered to the brand's visual identity rules.
Develop
In the development stage, I was able to prioritize all discussed and approved solutions from the definition phase to create a tangible prototype.
Building the structure
Before starting the screen prototyping, I mapped out all the flows and features that would be retained and created in the new version of the application. This provided an overall view of the work, allowing us to measure development time and delivery deadlines.
(from "[VIP] Fluxogram APP VIP "made by Figjam)
Styleguide
As mentioned earlier, it was necessary to create a style guide (which would later become the VIP Design System) to standardize and establish a consistent design for all visual components of the product, aligning with the brand's style.
You can check more details on how this material was constructed in 'Creating a Design System for the VIP brand'.
(from "[VIP] Styleguide APP VIP "made by Figma)
High Fidelity Prototype
With the approved base structure of the app, we moved towards the development of the high-fidelity prototype. The team decided to skip the wireframing stage as the flows followed a similar logic to the previous version, which was used to discuss changes in comparison. I utilized Figma to create all the screens, as well as the interaction for all the flows.
(from "[VIP] High Fidelity Prototype"made by Figma)
🚩 Challenge: Due to being a company in a technological experimentation phase, the power of veto and approval was highly concentrated in the company's general directorate. Our challenge as a product team was to present compelling arguments that supported our layout and functionality decisions, demonstrating how they could positively impact the user experience.
Delivery and Handoff
Handed off, but the work doesn't end there! With the final prototype ready, I began the handoff phase. During this stage, my focus was entirely on review and support, something crucial for ensuring the product is developed according to the proposed design.
I worked closely with Front-end developers, guiding them on the application of the style guide and engaging in discussions about design interactions. Additionally, based on the results of internal testing, we made rapid iterations to the prototype to address issues and enhance the user experience.
(screenshot from "[VIP] High Fidelity Prototype" made by Figma)
Learnings and outcomes
Learnings
Despite the significant challenges faced throughout all the sprints of the project, we gained fundamental insights that served as valuable data for future projects. This encompassed the development of new work methodologies and delivery approaches, as well as informing decisions regarding design and technology:
Many decisions were made based on the needs of our internal clients, serving the support, sales, and marketing channels. However, it would be crucial to test the application with end customers (B2C) through usability testing before moving on to more complex project phases;
Every project has its limitations, and joining a team with only one UX Designer is a significant challenge that requires flexibility and adaptation of processes;
My knowledge in Visual Design was crucial to bring a new understanding to the company about the importance of creating a Design System for the products and standardizing the visual identity to reinforce the brand's strength;
In the Handoff stage, I had a great experience working with front-end developers. I conducted various meetings that helped me understand how I could organize my workspace to facilitate the team's comprehension.
🏆️ The winner version!
Just like VIP, the other brands within the group were developing updates for the same application, catering to their regional demands. However, after presenting the application to the VIP board, we were informed that the Alloha group aimed to merge the Subscriber Central App for all company brands. Among the various versions, the new VIP version stood out and secured the first place.
This meant a lot for me and my entire team, as our efforts were not only recognized but also gained significant visibility within the Alloha group. It brought more motivation and gratification to the team."
Review and next steps...
Our team fulfilled the mission of creating a new version for the Subscriber Central App for VIP. However, with the merger of the applications, it was necessary to initiate the integration process.
In this way, the next steps of the project took on even greater proportions. In the integration challenge, the key developers and designers involved in the projects of each of the winning commercial brands had to join forces to present their products and kick off the integration process.
