top of page

Information architecture

Macbook Air (2022).png

Information Architecture revamp

A case study on how we redesigned and optimized the information architecture at Bayzat, resulting in a significant improvement in the User experience

Cover.png
CS-Impact.png

Project details

About Bayzat

Bayzat simplifies work life with automated HR, payroll, employee benefits and insurance.

Problem in short

Bayzat's navigation became overwhelming with too many items, making it difficult for users to find what they needed. The redesign aimed to simplify and organize the navigation to improve usability.

Impact

The new information architecture significantly improved user experience: navigation paths for core tasks were 31% faster, users discovered 13% more core features, and 80% of users expressed satisfaction with the new IA.

My role

Led the project, overseeing activities from Research to GTM.

Team size

  • 10 Designers (Including 2 DS members)

  • 8 FE engineers 

  • 6 Marketing, Account managers, Support

Target users

  • Employees 

  • HR, Finance Managers 

Timeline

​2 months (Mid 2023)​

People who led this project

Wayne portrait

Wayne Braganza

Project lead and acting PM - Responsible for overall project success

Jiri.jpeg

JiÅ™í

FE lead - Responsible for Frontend activities

Uthmaan.png

Uthmaan

Design system lead - Responsible for Design system deliverables

Sean.png

Sean

GTM lead - Responsible for GTM plan and deliverables

Justin.png

Justin

Customer Support lead - Responsible for customer support deliverables

Taronish.png

Taronish

Marketing lead - Responsible for Marketing deliverables

Problem

Cluttered and Confusing Navigation

​As Bayzat expanded, our navigation grew cluttered and challenging for users to navigate. 

Old navigation gif.gif
Causes.png

How we improved the IA

Evaluating our current IA and setting baseline

This involved gathering user feedback, analyzing usage data, and conducting tree testing, usability testing, and analytics. This allowed us to identify specific areas where the navigation could be improved, such as its lack of feature categorization.

Maze tree test_edited.jpg

Improving the Information architecture (IA)

Categorizing our features into logical groups

Tree structure.webp
Categorising.png

Comparing new IA options to baseline (A/B/C testing)

Finding the best performing IA

Task success rate.png
Task success rate tooltip.png

Choosing the right layout for the IA

We explored both top and side navigation, but ultimately decided on side navigation because it gave us more space to display our navigation items.

Top vs side navigation.png

Exploring the interaction design piece

We explored both top and side navigation, but ultimately decided on side navigation because it gave us more space to display our navigation items.

Interaction priece.png

Refining the User Interface (UI)

A sneak peek of some of the UI decisions

The UI for the new IA

Testing the UI

Ui testing_edited.jpg

Testing the waters with a Beta launch 

Releasing a beta and learning from users

Objective.png

Impact

CS-Impact.png

How I ran this project

Things that helped me run this project

Below are some of the examples of things I did to make sure this project runs smoothly  

Asssigning responsibilities.png
  • Grey LinkedIn Icon
  • Grey Facebook Icon
  • Instagram

© 2024 All rights reserved. – Designed and coded by Wayne Braganza

bottom of page