From Legacy 1.0 to Innovation 2.0,
From Legacy 1.0 to Innovation 2.0,
From Legacy 1.0 to Innovation 2.0,
From Legacy 1.0 to Innovation 2.0,
I want to share my experience of managing and encouraging the team to complete
a project without a set deadline by constantly working on it for over two years,
and how I updated the service through numerous iterations.
I want to share my experience of managing and encouraging the team to complete a project without a set deadline by constantly working on it for over two years, and how I updated the service through numerous iterations.
I want to share my experience of managing and encouraging the team to complete a project without a set deadline by constantly working on it for over two years, and how I updated the service through numerous iterations.
I want to share my experience of managing and encouraging the team to complete a project without a set deadline by constantly working on it for over two years, and how I updated the service through numerous iterations.
Context of the Project
Context of the Project
This service integrates and manages business processes such as expense claims, electronic approvals, and attendance management based on ERP.
Additionally, it offers collaborative features including messaging, video conferencing, calendar management and cloud storage to enhance operational efficiency and strengthen inter-organisational collaboration.
This service integrates and manages business processes such as expense claims, electronic approvals, and attendance management based on ERP.
Additionally, it offers collaborative features including messaging, video conferencing, calendar management and cloud storage to enhance operational efficiency and strengthen inter-organisational collaboration.
This service integrates and manages business processes such as expense claims, electronic approvals, and attendance management based on ERP.
Additionally, it offers collaborative features including messaging, video conferencing, calendar management and cloud storage to enhance operational efficiency and strengthen inter-organisational collaboration.
This service integrates and manages business processes such as expense claims, electronic approvals, and attendance management based on ERP.
Additionally, it offers collaborative features including messaging, video conferencing, calendar management and cloud storage to enhance operational efficiency and strengthen inter-organisational collaboration.
The 1.0 web service had 22,400 enterprise users, had not been updated probably for over 4 years and needed a team to handle the launching of the new version. The team began planning updates a year before I joined.
The 1.0 web service had 22,400 enterprise users, had not been updated probably for over 4 years and needed a team to handle the launching of the new version. The team began planning updates a year before I joined.
Role
Role
Updated the interface of the existing 1.0 service to create the 2.0 service. Collaborated with 2 PMs, 2 content strategists, 4 engineers, and 4 product designers.
Updated the interface of the existing 1.0 service to create the 2.0 service. Collaborated with 2 PMs, 2 content strategists, 4 engineers, and 4 product designers.
July to November 2022 (5 months)
July to November 2022 (5 months)
Phase 1: Layout and Prototyping
Phase 1: Layout and Prototyping
Phase 1: Layout and Prototyping
Phase 1: Layout and Prototyping
December 2022 to June 2023 (7 months)
December 2022 to June 2023 (7 months)
Brand asset development
Brand asset development
Brand asset development
Brand asset development
October 2023 to February 2024 (5 months)
October 2023 to February 2024 (5 months)
Phase 2: Refinement and detailed visual
Phase 2: Refinement and detailed visual
Phase 2: Refinement and detailed visual
Phase 2: Refinement and detailed visual
February to July 2024 (6 months)
February to July 2024 (6 months)
Building the design system library
Building the design system library
Building the design system library
Building the design system library
The aforementioned service updates were handled in collaboration with other system updates, thus interrupted by their update schedule accordingly.
The aforementioned service updates were handled in collaboration with other system updates, thus interrupted by their update schedule accordingly.
The outcome
The outcome
Content UI Layout Redesign
Content UI Layout Redesign
Reduced navigation depth by over 50%,
helping users find what they need more efficiently.
Reduced navigation depth by over 50%, helping users find what they need more efficiently.
Reduced navigation depth by over 50%, helping users find what they need more efficiently.
Reduced navigation depth by over 50%, helping users find what they need more efficiently.
Updated widgets and header menus to quickly check alerts and prioritise the most frequently used functions for users, reducing duplicate tasks and measuring a decrease in user workload.
Updated widgets and header menus to quickly check alerts and prioritise the most frequently used functions for users, reducing duplicate tasks and measuring a decrease in user workload.
Deploying Visual Assets
Deploying Visual Assets
Saved over £124,000 by replacing celebrity modelling fees.
Saved over £124,000 by replacing celebrity modelling fees.
Saved over £124,000 by replacing celebrity modelling fees.
Introduced motion and 3D to enhance design quality and provide satisfying visual assets to be used across the entire brand, playing a crucial role in product launches.
Introduced motion and 3D to enhance design quality and provide satisfying visual assets to be used across the entire brand, playing a crucial role in product launches.
Design System Update
Design System Update
Streamlined workflows by over 40%, increasing internal designers' productivity.
Streamlined workflows by over 40%, increasing internal designers' productivity.
Streamlined workflows by over 40%, increasing internal designers' productivity.
Led proactive communication with the development team to enhance over 5 years of accumulated legacy components and establish a new design system.
Led proactive communication with the development team to enhance over 5 years of accumulated legacy components and establish a new design system.
Research and Findings
Research and Findings
Research and Findings
Research and Findings
Research
Research
The initial set of data included 2021 annual MAU figures and a few initial wireframes left by the predecessor.
The initial set of data included 2021 annual MAU figures and a few initial wireframes left by the predecessor.
To find current patterns needed to improve the product, I additionally conducted a competitive analysis from other companies and looked through our interviews with 6 users.
To find current patterns needed to improve the product, I additionally conducted a competitive analysis from other companies and looked through our interviews with 6 users.
Based on this data, I identified issues and established priority of improvement goals.
Based on this data, I identified issues and established priority of improvement goals.
Decreased engagement in collaboration tools
Decreased engagement in collaboration tools
Decreased engagement in collaboration tools
A decline in the usage frequency of collaboration features such as messaging, web storage, contacts and calendars was observed.
A decline in the usage frequency of collaboration features such as messaging, web storage, contacts and calendars was observed.
Observations from the monthly active user (MAU) statistics
Observations from the monthly active user (MAU) statistics
Expectations for frequently accessed features
Expectations for frequently accessed features
Expectations for frequently accessed features
The users of similar competitive products actively use frequently accessed menu functions.
The users of similar competitive products actively use frequently accessed menu functions.
The competitive analysis
The competitive analysis
Many decisions and moves frequently are required.
Many decisions and moves frequently are required.
Many decisions and moves frequently are required.
While all necessary services for work were available, the user reported the lack of personalising information on the home screen.
While all necessary services for work were available, the user reported the lack of personalising information on the home screen.
Feedback from interviews with users (VOC)
Feedback from interviews with users (VOC)
The initial wireframe
The initial wireframe
The initial wireframe
A few initial wireframes suggested customizable dashboard format to allow flexible configuration based on the user’s needs.
A few initial wireframes suggested customizable dashboard format to allow flexible configuration based on the user’s needs.
Findings
Findings
I identified significant disparities in the usage frequency of different services based on content categories.
I identified significant disparities in the usage frequency of different services based on content categories.
I identified significant disparities in the usage frequency of different services based on content categories.
Each user primarily used a few functions related to their work, while infrequently used the other services.
Each user primarily used a few functions related to their work, while infrequently used the other services.
Users had to access each service individually to perform their tasks.
Users had to access each service individually to perform their tasks.
Users had to access each service individually to perform their tasks.
The main screen functioned solely as a portal to navigate to specific services.
The main screen functioned solely as a portal to navigate to specific services.
The outdated main image failed to convey the core values of the brand and product effectively.
The outdated main image failed to convey the core values of the brand and product effectively.
The outdated main image failed to convey the core values of the brand and product effectively.
Visual updates to effectively communicate brand values to provide stability and assurance were required for the new 2.0 service.
Visual updates to effectively communicate brand values to provide stability and assurance were required for the new 2.0 service.
Based on the principles of consistency, continuity, context, and complementarity (4C), I have prioritised improving user satisfaction as our primary goal
Based on the principles of consistency, continuity, context, and complementarity (4C), I have prioritised improving user satisfaction as our primary goal
Based on the principles of consistency, continuity, context, and complementarity (4C), I have prioritised improving user satisfaction as our primary goal
Layout Enhancement
Layout Enhancement
Layout Enhancement
Layout Enhancement
Strengthen core functionalities and provide personalised settings to ensure users’ easy access to necessary work information.
Strengthen core functionalities and provide personalised settings to ensure users’ easy access to necessary work information.
Enhancing Content Connectivity
Enhancing Content Connectivity
Enhancing Content Connectivity
Enhancing Content Connectivity
Improve direct access from home to frequently used functions for tasks that need to be handled in real-time.
Improve direct access from home to frequently used functions for tasks that need to be handled in real-time.
Restoring Brand Recognition
Restoring Brand Recognition
Restoring Brand Recognition
Restoring Brand Recognition
Introduce visual assets to update existing designs and clearly communicate a professional and trustworthy brand identity.
Introduce visual assets to update existing designs and clearly communicate a professional and trustworthy brand identity.
Sorted and integrated design system
Sorted and integrated design system
Sorted and integrated design system
Sorted and integrated design system
Implement an integrated design system across up to 30 products to minimise user confusion and foster positive user experiences.
Implement an integrated design system across up to 30 products to minimise user confusion and foster positive user experiences.
How I Approach Solutions
How I Approach Solutions
How I Approach Solutions
How I Approach Solutions
Maintain layout, enhance functionality integration.
Maintain layout, enhance functionality integration.
To strengthen service-specific content, I selected key functionalities from each service. It was based on the hypothesis that if version 1.0’s core features effectively support users’ work, enhancing access to these features could be a viable solution.
To strengthen service-specific content, I selected key functionalities from each service. It was based on the hypothesis that if version 1.0’s core features effectively support users’ work, enhancing access to these features could be a viable solution.
To test this, I measured how deep these features are buried from the main screen and aimed to reduce the number of navigation levels required to access them.
To test this, I measured how deep these features are buried from the main screen and aimed to reduce the number of navigation levels required to access them.
Currently, users needed to navigate through at least 3 to 8 screens to access the frequently used features of each service.
Currently, users needed to navigate through at least 3 to 8 screens to access the frequently used features of each service.
Currently, users needed to navigate through at least 3 to 8 screens to access the frequently used features of each service.
In response to this issue, I sought to arrange widgets with key features from each service, into a single home screen.
In response to this issue, I sought to arrange widgets with key features from each service, into a single home screen.
Consideration of User Characteristics
Consideration of User Characteristics
The accountant, who has been using our flagship accounting management software for a long time,
uses the product in an auxiliary capacity.
The accountant, who has been using our flagship accounting management software for a long time,
uses the product in an auxiliary capacity.
We discovered that the current layout is functioning well without any major issues, and users can be surprised by any abrupt updates.
We discovered that the current layout is functioning well without any major issues, and users can be surprised by any abrupt updates.
Feedback from interviews with users (VOC)
Feedback from interviews with users (VOC)
At this stage, we have chosen to discontinue various layouts and instead focus on evolving the existing layout.
At this stage, we have chosen to discontinue various layouts and instead focus on evolving the existing layout.
At this stage, we have chosen to discontinue various layouts and instead focus on evolving the existing layout.
The existing layout
The existing layout
The rearranged layout based on the 1.0 service
The rearranged layout based on the 1.0 service
Enhanced Widget Functionality
Enhanced Widget Functionality
Calendar
Calendar
The calendar area has been expanded to allow users to view detailed schedules at a glance.
The calendar area has been expanded to allow users to view detailed schedules at a glance.
Schedule
Schedule
Added tabs for to-do list and video meetings, with a create button for instant scheduling.
Added tabs for to-do list and video meetings, with a create button for instant scheduling.
News
News
Redesigned thumbnail components and reduced the area to add a memo feature.
Redesigned thumbnail components and reduced the area to add a memo feature.
Timeline
Timeline
Added sections for user attendance management and holiday requests, along with tabs to view timelines by service.
Added sections for user attendance management and holiday requests, along with tabs to view timelines by service.
It stayed focused on the initial goal of creating a simple, standard design.
It stayed focused on the initial goal of creating a simple, standard design.
It stayed focused on the initial goal of creating a simple, standard design.
2.0's design is not visually complicated, even when it’s full of information and content.
2.0's design is not visually complicated, even when it’s full of information and content.
2.0's design is not visually complicated, even when it’s full of information and content.
Introduction of Header Modal for Universal Access
Introduction of Header Modal for Universal Access
Notifications
Notifications
Allows users to check notifications specific to each service based on organisation and team.
Allows users to check notifications specific to each service based on organisation and team.
Bookmarks
Bookmarks
Provides direct access to saved chat content, files, to-do, notes, and organisational charts.
Provides direct access to saved chat content, files, to-do, notes, and organisational charts.
Mentions
Mentions
Displays all instances where users have been mentioned by others.
Displays all instances where users have been mentioned by others.
File Repository
File Repository
Enables filtering and searching of files exchanged in conversations.
Enables filtering and searching of files exchanged in conversations.
Recent Visits Menu
Recent Visits Menu
Allows users to directly access recently visited services based on their timeline.
Allows users to directly access recently visited services based on their timeline.
Profile
Profile
Provides access to profile settings and guides.
Provides access to profile settings and guides.
Main Event Alerts
Main Event Alerts
Highlights incoming notifications in real-time, allowing users to promptly view and respond.
Highlights incoming notifications in real-time, allowing users to promptly view and respond.
Navigation Simplified by 50%
Navigation Simplified by 50%
This has resulted in a reduction of the depth of navigation, the users could efficiently find what they need within 1 to 3 levels of navigation.
This has resulted in a reduction of the depth of navigation, the users could efficiently find what they need within 1 to 3 levels of navigation.
This has resulted in a reduction of the depth of navigation, the users could efficiently find what they need within 1 to 3 levels of navigation.
View the next project
View the next project
View the next project
View the next project