Mariana Manrique

One Azets

The Project

Azets is an international financial advisory group. Their services range from accounting to payroll to audits and digital solutions. They have presence in 7 different countries. One of the first points of contact with their customers is their website. The objective of the project was to move the content management system (CMS) platform from Umbraco to Optimizely. With this overhaul, they hired me to re-design their website to improve their UX and “freshen up” their UI. The re-design would also be applied to all their countries’ websites (11 in total) to get a cohesive and coherent design.

"We want to consolidate the UI and improve UX along the way."

- Marketing department at Azets.

The Users

There’s three main groups of users in this project. The private users, and the corporations that are looking for a financial service or advisor, and the people looking to join the company. Each group has their unique flows with different points of entry.

The Product

The company had around 11 websites, this included a global website, websites for the Nordics, Baltics, Ireland, and UK countries. These 11 websites all had different designs and information architecture. The new product would unite these websites under a common architecture and layout, share component patterns and overall UI design. Optimizely works with “blocks” so Azets can build future pages as needed. The blocks are used as templates where the content can be modified but the design is maintained. The flexibility of content is necessary to account for the different markets, for the regions.

Screenshot of the previous design of azets Sweden.
  • Previous design of azets.se (Sweden).
Screenshot of the previous design of azets UK.
  • Previous design of azets.co.uk (United Kingdom).

The Team

Illustration depicting one character.
  • One Project Manager
Illustration depicting one character.
  • One Marketing Lead
Illustration depicting one character.
  • One Tech Lead
Illustration depicting four characters.
  • Branding Team
Illustration depicting three characters.
  • Three Fullstack Developers
Illustration depicting one character.
  • One UI/UX Designer (Me)

The Process

This project started with a meeting with the marketing lead, the PM, and the PO. In the meeting, they explained and shared their expectations and perceived needs. We also went through the roadmap, the first step was to implement the changes in the UK and Ireland websites, followed by the Nordics.



I started with the mapping of the websites, so I could find the components and features that the websites had in common. With this I could compare their different patterns, and know which ones were essential, and which ones could be changed or integrated in other features so the redesign would work for every country.

image of the breakdown of the websites. It goes from websites, to pages, to blocks used.
  • Summary of the breakdown of the websites.

We then held workshops with the different country teams. Four different workshops where we covered user personas, expectations, pain points, essential functions, and areas of opportunity. Some regions also had web analytics, which they shared, this made easier to pinpoint existing patterns that were not used or confusing to the user. After the workshop I analysed the information and with the steering group, decided on the key pages, blocks and functions to develop. A priority list was defined and I could start the Figma work.

image of the structure of the website.
  • Website structure.
Screenshot of the block components in Figma.
  • Screenshot of some of the block components and their variants.

In general the develop stage of my design process for this project was: Design three different medium fidelity wireframes for the specific “block”, elements, or component to develop. Get feedback from dev team and management. Iterate and adjust, confirm changes and create a high fidelity prototype. This happened for each page until we had all the pages for the new website. Here are some of the changes made in the main page to give it a fresher look and make it more dynamic.

Screenshot of the website's start page, with an annotation saying: Changed carrousel into a hero banner. Removes distracting movement + uselessness.
Screenshot of the website's start page, with the flyout menu out with an annotation saying: Nav menu is not active on hover anymore but on click according to WCAG.
  • One teaser block with animation.
  • Three teaser block with animation

Once we had an high fidelity prototype of the website I had 5 different showcases, with the country teams and the corporate leaders. From their feedback a final iteration was made and I delivered the design to the development team.

  • Prototype of the website's start page.
  • Prototype of the website's careers page.
  • Prototype of the website's news & insights page.

Lessons Learned

Know all the cooks

Late into this project a branding team and graphic designers were added. Which came with challenges regarding branding over accessibility, as well as feedback about the UI design. The branding team was involved just before the first showcase, so we had to reach a compromise fast about the accessibility issues. We reached an understanding and thanks to the use of tokens and components, most of the changes were fast to implement.

Streamlined communication is important

It is essential to ensure that everyone on a team is aligned. In this project, our messages would sometimes get lost or “diluted” as they passed from person to person. Specially considering we were working with slightly different time zones. It’s crucial to have clear, direct channels of communication..