IBM

Global Insurance Website Localisation and Revamp

Agile

UI Design

Overview

During my time at IBM iX, I had the wonderful opportunity to lead the design of a website revamp and localisation project. To accomplish this, my team works closely with product and content owners from the client's side to create and propose new designs for the localised website.My work is under NDA, so please reach out to me for more details.

Team

IBM iX

Timeline

5 months (6 sprints)

Tools and skills

Figma, Agile methodologies, JIRA, Design workshop with content owners, AEM

My role

Lead UI Designer

• Led the design of 10+ page clusters and 500+ subpages for three languages and mobile and desktop views.
• Customised three components and two UX flows for HK site
• Provided detailed design guidelines for developers and reduced clarification communication by 50%

Lead Business Analyst

• Hosted 40+ deep-dive workshops to communicate with 50+ product and content owners to review the new design and collect additional requirements.
• Created 300+ user stories and conducted UI QA for 400+ subpages for mobile and desktop and in three languages.

Lesson Learned

The team successfully rolled out 500+ pages in phase one on Nov 2022 (after I left the team). Looking back at the whole process, I learned a lot about effectively utilising design system components to create designs quickly, communicating my design efficiently with multiple stakeholders, and working within a multidisciplinary team.

Designing for both mobile and web

While the focus of the revamp is the website, I initially overlooked the mobile view at the start of the project, which created extra development time. In response, I have created style guidelines for both desktop and mobile views while streamlining the BA QA process for checking both views.

Working with developers

Translating our design details into technical requirements, such as paddings, fonts, and components, was a challenge. To solve this, I worked with the design team to provide the necessary information in the user story and created a guide for developers to choose the right padding for different layouts. This approach was effective and saved time in communication, resulting in fewer defects raised during the QA process.

Broader team-wise enabling

The design team communicated UI requirements to the tech team using exported images with labelled components, which was less efficient than using Figma files directly. If doing the project again, I would enable the development team to check UI requirements using Figma, eliminating the need for manual export and labelling, and further reducing communication costs.