From analog to digital in a sprint

Alvaro Torrens
7 min readMar 15, 2021

A product design (UX/UI) process

Context:

MC is a company that provides financial and insurance services and real estate management. This company is working with manual processes and operations, therefore the website maintained the same structure for 15 years, without many updates.

The team:

Product Manager, Scrum Master, Product Designer (🙋🏽), Dev ops team.

The challenge:

To adapt to market updates, position itself against the competition with a more attractive value proposition, and, improve the user experience. So they started this website redesign process, in terms of look and feel and functionalities.

The 4 main pain points that we seek to solve from the digitization of their service platform:

  1. Important processes were analog, backed up by stationery (a.k.a memos and handwritten invoices).
  2. Crowded headquarters and a collapsed call center. As there were no digital channels to carry out procedures, users from all over the country had to travel to the headquarters to carry out any query or procedure.
  3. Slow and complex services for users, which is reflected in low levels of customer satisfaction. (Manual processes = higher% of errors)
  4. Contactability and user data management issues. Outdated information from their users was preventing them to reach out to get paid. This generates a loss of income for MC ($$$)
Timeline

Stage 01 Discover:

A research to unify them all

As being a company with a diverse portfolio of services offered to a very specific niche of clients, they find it necessary to host all their businesses on the same digital platform.

Interviews:

The first step to address this challenge was to understand the company’s business model and, the ramification of its offering, That’s why we decided to dive deeply through desk research and interviews with stakeholders and users.

Step 1. Interviews with Internal Stakeholders: to understand the value proposition and the structure of its business areas, and is aligned with their concerns, expectations, needs, and vision of the product.

Step 2. Interviews with clients: to understand their relationship with the company, services, pain points, and expectations. This is crucial to identify how their needs should be translated into the digital platform.

Duration: 2 weeks for a total of 18 in-depth interviews. (8 unit managers, 4 customer service officials, and 6 service users)

Current sitemap / information architecture

To build an inventory of content to be incorporated in the redesign. This activity allowed us to set the foundation and scope of the platform.

Doing a sitemap combined with a content inventory gave us a good foundation to understand the scope of the product and, a map of what we needed to research.

Canvas — Workshop

A key element to start a redesign process is the alignment of the company’s key stakeholders. Since they lead the different business units that will coexist in the digital platform. The workshop is built under the lens of 2 methods: Lean UX Canvas by Jeff Gothelf and Lean Inception by Paulo Caroli.

The result:
This activity created a bridge between the different business units, aligning their vision, cross-cutting needs, and expectations about the product.

  • Collaboration and empathy between the different business units.
  • Definition of priorities and envision the new digital platform.
  • Definition of agreements, roles, and responsibilities throughout the project.
  • Creation of project roadmap and timeframe
Workshops before Pandemic

Stage 02 Define:

Many businesses in one place

After having a general idea of ​​the company, its business units, its clients, and agreements regarding the priorities, needs, and pains of the business, we had enough information to begin to outline the product.

For this we did 3 main activities:

Card Sorting:

We carried out this activity with stakeholders and users of the platform. This activity helped us to reorganize all the content and create a new site map that made more sense for both the business and the user of the product.
With this new structure, we ensure fast access to sections identified as a priority. Sections as “virtual branch” and “loans” need to be always at hand and just a few clicks away.

User persona / User Journey

Finally, with the information we collected from the interviews, we were able to define three types of platform users (Personas) and the user journeys for each product that MC offers.

This conceptual visualization of the users guided us in the creation of the product, also providing, to the key stakeholders of the business, an updated vision of their clients and map the different moments and interactions with the company.

The new sitemap / personas / user journeys

Stage 03 Prototype:

An infinite prototype to have a common vision

This phase was key to making the new digital platform proposal tangible to the different business leaders. Since its relationship with technology was not very fluid, the prototype was helpful to transmit the new experience.

The prototype contained the entire product, unifying all the flows, so the stakeholders could navigate more easily. This made the iteration process and design discussions more precise and clear.

The final prototype had more than 500 connections

Usability test

During the test, we asked platform users to complete some tasks within the most critical flows (business units with the highest traffic)

Some of the tasks included in the usability test:

  • Login.
  • Updating of personal data.
  • Loan application / contracting insurance.
  • Update the details of an insurance beneficiary.
  • Loan simulator.
  • View the status of a pending request.
  • Pay a loan fee.
Loan application flow.

Validation criteria:

  • Whether the user ends the task or not.
  • Detect user difficulties for navigation.
  • Time to complete the task.
  • Appreciation of the effort while using the platform.

What we learn from users

In general, we had a very positive reception of the prototype

Compared to the platform they were used to users perceived significant improvements, both in the design aspect and, in the navigation. However, the test showed us some aspects for improvement.

What we need to improve After Testing

Affordance on login:

The login was critical within the platform since the private section is where the user accesses most of the functionalities. After the test, we iterate the access and gave it more affordance to make the login more evident.

Improve the hierarchy of the elements for better reading:

The preview of the simulation was very important to the users. Since it allows them to understand under what conditions they can take out a loan or insurance.
Thanks to the feedback from the test users, we identify the most relevant information, to redesign the component considering a new hierarchy.

Component upgrade:

In the tested proposal, the navigation between the services was designed under the concept of XL buttons. For the business, it was relevant for users to know the full range of services offered at MC. During the usability test, we observed that some users identified the button as a non-interactive icon. For this, we adjusted the color, elevation, and iconography.

Shitty moments and awesome moments

Because in imperfection we find great learnings

💩Shitty moments

1.Introducing digital experiences in companies with high resistance to change means preaching the value of design many times: I learned that our role as designers of digital experiences is to have the ability to transmit concepts tangibly, communicate clearly, highlighting the impact of the transformation at a business level.

2.Update all iterations in a gigantic prototype: As the prototype was the best way we found to communicate to stakeholders the design process, keeping the prototype updated with each iteration was a headache due to the magnitude of the project. The learning here was to use a design system and maintain everything in a component so the workflow becomes faster and any change will automatically update across the platform.

3.Slow access to information: The systems where the information was housed were very old and had many access restrictions. This generated delays in the implementation of the project and unexpected changes within the design of the product, due to having many technological dependencies.

✨ Awesome things that happened

1.The change of experience generates a large-scale impact: The development of this product has more than 90,000 beneficiaries. Once this digital platform is implemented, the impact will be reflected on a large scale.

2.One digital branch for all users: Clients who lived outside the capital city would no longer have to travel to do their paperwork in person at the office.

3.The starting point for a deep digital transformation: For the implementation of this product, the company was forced to update all its systems, which was the starting point to start a digital transformation process.

It just takes a little piece to start moving to create a big impact

Stage 04 Deliver

What we accomplished

Relevant numbers of the impact of this redesign

This is project is currently in development, this work was done between March of 2020 and July of 2020.

If you want to see a more graphic version of this, go to my Behance

Thanks for watching & reading.
Alv.

--

--

Alvaro Torrens

UX / UI Designer// Digital product designer // Illustrator