Interface refresh of touch-screen ATM & CDM kiosks
Case Study
Let's get started 🚀
Context
RHB Bank is embarking on a project to install new kiosks with touch-screen functionality. This initiative presented an opportunity for the RHB's Infra Excellence team to redesign the kiosk's interface after 25 years. RHB's Experience Design team was approached by the Infra team for collaboration on this endeavor, and being a Senior Designer in the team, I volunteered to take on the project as the sole designer.
The Scope
The project's scope involved redesigning the interface with minimal changes to the technical infrastructure. The new kiosk, equipped with touch-screens, supports Windows-based software. Adhering to regulatory conditions, a physical numeric keypad is required for PIN entry and any numeric input.
Timeline
5 weeks overall for this project:
1 week for research.
2 weeks for interface design, animations and testing.
2 weeks for stakeholders presentations, approvals and handoff.
My Role
Interface design
Prototyping
Testing
Animations
Transitions
Stakeholders approval
Tools
UI Design, Prototyping
UX Research & Workshops
UI Animations
Handoff
The Crew
PG, Head of Experience Design
Shehryar, Senior UI Designer
Jacq, Section Head of UI Design
Elly Marina, Head of Sales Ops
Zaki, Team Lead at Infra team
Syafiq, Specialist at Infra team
Zainor, Specialist at Infra team
Nurhayati, Group Brand Marketing
Design Process 💡
Evaluate the current experience
With 25 years of use by Malaysians, the existing kiosks are deeply ingrained in muscle memory. Collaborating with the Infra team, I assessed the current experience, flows, and service listings, ensuring a thoughtful arrangement for familiarity.
Explore the new kiosks
Given testing units, I explored functionalities of the new Windows-based kiosk. Leveraging the software capabilities, I implemented Lottie JSON animations for visual cues, guiding users to take the right action.
Design for accessibility
Designing for inclusivity, we ensured accessible touch targets, typography, and colors for ATMs and CDMs. Crucial for ease of use by people of all backgrounds and abilities, especially older individuals.
Test it in real-environment
I created prototypes for all services, testing them with the Infra team on these testing units. This helped me to evaluate the new interface and animations in various lighting conditions, leading to necessary improvements for enhanced accessibility.
Approval presentations and hand-off
Following successful testing with the Infra team, I showcased the prototypes to various teams, including Sales Ops, Retail Banking, and Group Marketing for approval. Once approved, I provided the vendor with UI screens, component specifications, animations, and prototypes for implementation.
Evaluate the current experience
With 25 years of use by Malaysians, the existing kiosks are deeply ingrained in muscle memory. Collaborating with the Infra team, I assessed the current experience, flows, and service listings, ensuring a thoughtful arrangement for familiarity.
Explore the new kiosks
Given testing units, I explored functionalities of the new Windows-based kiosk. Leveraging the software capabilities, I implemented Lottie JSON animations for visual cues, guiding users to take the right action.
Design for accessibility
Designing for inclusivity, we ensured accessible touch targets, typography, and colors for ATMs and CDMs. Crucial for ease of use by people of all backgrounds and abilities, especially older individuals.
Test it in real-environment
I generated prototypes for all services, testing them with the Infra team on these testing units. This helped me to evaluate the new interface and animations in various lighting conditions, leading to necessary improvements for enhanced accessibility.
Approval presentations and hand-off
Following successful testing with the Infra team, I showcased the prototypes to various teams, including Sales Ops, Retail Banking, and Group Marketing for approval. Once approved, I provided the vendor with UI screens, component specifications, animations, and prototypes for implementation.
evaluate
Current Interface
This interface works on kiosks with 4 physical buttons on each sides, displaying up to 8 options.
There is a physical numeric keypad for input with yellow button for clearing, green for confirming, and red for card ejection.
Stakeholder's feedback
Years of use has created familiarity and muscle memory, strong reasons to maintain the current workflow.
Outdated interface conflicts with our bank's modern image for banking.
Type scale lacks standardisation. Using capital letters with excessive kerning on service menu hampers readability.
As per our recent re-branding, the diamond symbol can't be used alone. It must accompany RHB letters in the logo.
evaluate
Current Flow
The current user flow revealed one-way journey limitation.
Past data showed customers check balance first, but one-way journey forces user to restart the session for withdrawals, a frequently reported experience issue.
evaluate
Draft for stakeholder's feedback
I added a button to allow user perform another transaction without re-inserting the card after the current service has been successfully executed.
Additionally, I modernised controls with opacity and shadows, and introduced unique icons for each service for easier recognition. The services were arranged vertically for an F-shaped reading pattern.
Stakeholder's feedback
Controls exhibit modern design, and the touch interaction (pressed state) mimics the sensation of pressing a physical button.
The insert card animation guides users to insert the correct side, while the numeric keyboard animation prompts users when to utilise the physical numeric keyboard.
Screen transitions indicate progress in the user's journey, moving seamlessly from one stage to the next.
Utilizing the RHB brand color for the background enhances brand recognition, contributing to a cohesive visual identity.
While listing services vertically is intuitive, there's concern about a potential learning curve, especially for older individuals who are accustomed to the Z-shaped layout for decades.
Opting for country flags in language selection is a questionable decision. Using the China flag for Mandarin may raise concerns of discrimination.
The controls, background color and typography may appeal to Gen Y and Z, but older people may experience accessibility issues.
While using Windows icons may enhance system performance and simplify developer handoff, they lack the ability to contribute to brand recognition.
accessibility
addressing Accessibility
An interface may be visually appealing and intuitive, but its effectiveness diminishes if a learning curve is present.
Addressing accessibility issues was my top most priority in response to stakeholder feedback, given that these kiosks are intended for general public use. Consequently, I arranged my accessibility priorities into four categories:
Guidance
To give visual cues to guide users on which side of the card to insert and when to use physical numeric keypad for input.
Colors
To use high-contrasting colours that meet AAA rating in WCAG guidelines while also aligning with brand colours and maintaining visual appeal.
Touch Targets
To ensure touch targets are sufficiently large to click on the desired action, preventing accidental presses of the wrong button.
Typography
To implement a typescale that is easily readable for both younger and older individuals.
Guidance
Leveraging the Windows-based platform, I designed 2 Lottie animations - one guiding users on the correct card insertion side, and the other prompting them when to use the physical numeric keypad for input.
Colors & Touch Targets
I utilised colours with ample contrast to qualify for AAA ratings as per WCAG guidelines. I also designed controls of sufficient size to ensure users press the intended button with ease.
Typography
I maintained the current use of a minimum font size of 36px to ensure optimal readability for a broad user range, including older individuals. Using the 1.333 - Perfect Fourth typography ratio as a reference, I applied 48px font size for instructions and 36px font size for options.
Final Result 🎉
Reverted back to Z-shaped reading pattern for service listing to ensure a seamless experience without a learning curve. Additionally, preserved the service order to support muscle memory, such as placing balance enquiry at the bottom right on the first page of ATM services menu.
Eliminated country flag icons for language selection and crafted new icons for all services in the ATM and CDM menu, ensuring alignment with RHB brand colors and guidelines.
Implemented accessible controls featuring larger touch targets following Hick's law, using a high-contrast background for excellent text readability in various lighting conditions, and consistent typography styles in sentence case and title case for easy reading by individuals with short-sightedness issues.
Old vs New
With branded icons, guided animations, and accessible controls, background, and typography, the new interface brings a brand-new experience with a smooth transition from a design that has been in use for over two decades.
Icons
Unique icons for each service, they enable customers to swiftly recognize services in a list. These icons incorporate RHB brand colors and match the style used in RHB online and mobile banking.
implement
Showcase to stakeholders
After successfully testing the final result on testing units, I presented the prototypes to Sales Ops, Retail Banking, and Group Marketing for approval.
The standout feature, impressing the stakeholders the most, was PERFORM ANOTHER TRANSACTION button after successful execution of a service. This feature required minimal technological changes yet significantly enhancing the customer experience.
implement
Handoff to developers
For a smooth handoff, I used EightShapes plugin to prepare a specification document outlining component properties, states, and layout specifications.
The finalised UI screens were uploaded to Zeplin, with each screen tagged to its respective flow for clarity. Additionally, I provided all animations in Lottie JSON format and icons in SVG format to facilitate seamless implementation without compromising system performance.
What I learnt!
Reflecting on the UI design project, it was a journey of exploration and collaboration. Delving into user behavior provided valuable insights, shaping the design to align seamlessly with their expectations. Exploring kiosk machine software capabilities opened avenues for proposing innovative features, including animations that could enhance the overall user experience.
Collaborating closely with the Infra team was instrumental in testing prototypes and iterating for testing accessibility. All credits to the Infra team, and to the guidance of my ED team's Head and Section throughout the project.
Interface refresh of touch-screen ATM & CDM kiosks
Case Study
Let's get started 🚀
Context
RHB Bank is embarking on a project to install new kiosks with touch-screen functionality. This initiative presented an opportunity for the RHB's Infra Excellence team to redesign the kiosk's interface after 25 years. RHB's Experience Design team was approached by the Infra team for collaboration on this endeavor, and being a Senior Designer in the team, I volunteered to take on the project as the sole designer.
The Scope
The project's scope involved redesigning the interface with minimal changes to the technical infrastructure. The new kiosk, equipped with touch-screens, supports Windows-based software. Adhering to regulatory conditions, a physical numeric keypad is required for PIN entry and any numeric input.
Timeline
5 weeks overall for this project:
1 week for research.
2 weeks for interface design, animations and testing.
2 weeks for stakeholders presentations, approvals and handoff.
My Role
Interface design
Prototyping
Testing
Animations
Transitions
Stakeholders approval
Tools
UI Design, Prototyping
UX Research & Workshops
UI Animations
Handoff
The Crew
PG, Head of Experience Design
Shehryar, Senior UI Designer
Jacq, Section Head of UI Design
Elly Marina, Head of Sales Ops
Zaki, Team Lead at Infra team
Syafiq, Specialist at Infra team
Zainor, Specialist at Infra team
Nurhayati, Group Brand Marketing
Design Process 💡
Evaluate the current experience
With 25 years of use by Malaysians, the existing kiosks are deeply ingrained in muscle memory. Collaborating with the Infra team, I assessed the current experience, flows, and service listings, ensuring a thoughtful arrangement for familiarity.
Explore the new kiosks
Given testing units, I explored functionalities of the new Windows-based kiosk. Leveraging the software capabilities, I implemented Lottie JSON animations for visual cues, guiding users to take the right action.
Design for accessibility
Designing for inclusivity, we ensured accessible touch targets, typography, and colors for ATMs and CDMs. Crucial for ease of use by people of all backgrounds and abilities, especially older individuals.
Test it in real-environment
I created prototypes for all services, testing them with the Infra team on these testing units. This helped me to evaluate the new interface and animations in various lighting conditions, leading to necessary improvements for enhanced accessibility.
Approval presentations and hand-off
Following successful testing with the Infra team, I showcased the prototypes to various teams, including Sales Ops, Retail Banking, and Group Marketing for approval. Once approved, I provided the vendor with UI screens, component specifications, animations, and prototypes for implementation.
Evaluate the current experience
With 25 years of use by Malaysians, the existing kiosks are deeply ingrained in muscle memory. Collaborating with the Infra team, I assessed the current experience, flows, and service listings, ensuring a thoughtful arrangement for familiarity.
Explore the new kiosks
Given testing units, I explored functionalities of the new Windows-based kiosk. Leveraging the software capabilities, I implemented Lottie JSON animations for visual cues, guiding users to take the right action.
Design for accessibility
Designing for inclusivity, we ensured accessible touch targets, typography, and colors for ATMs and CDMs. Crucial for ease of use by people of all backgrounds and abilities, especially older individuals.
Test it in real-environment
I generated prototypes for all services, testing them with the Infra team on these testing units. This helped me to evaluate the new interface and animations in various lighting conditions, leading to necessary improvements for enhanced accessibility.
Approval presentations and hand-off
Following successful testing with the Infra team, I showcased the prototypes to various teams, including Sales Ops, Retail Banking, and Group Marketing for approval. Once approved, I provided the vendor with UI screens, component specifications, animations, and prototypes for implementation.
evaluate
Current Interface
This interface works on kiosks with 4 physical buttons on each sides, displaying up to 8 options.
There is a physical numeric keypad for input with yellow button for clearing, green for confirming, and red for card ejection.
Stakeholder's feedback
Years of use has created familiarity and muscle memory, strong reasons to maintain the current workflow.
Outdated interface conflicts with our bank's modern image for banking.
Type scale lacks standardisation. Using capital letters with excessive kerning on service menu hampers readability.
As per our recent re-branding, the diamond symbol can't be used alone. It must accompany RHB letters in the logo.
evaluate
Current Flow
The current user flow revealed one-way journey limitation.
Past data showed customers check balance first, but one-way journey forces user to restart the session for withdrawals, a frequently reported experience issue.
evaluate
Draft for stakeholder's feedback
I added a button to allow user perform another transaction without re-inserting the card after the current service has been successfully executed.
Additionally, I modernised controls with opacity and shadows, and introduced unique icons for each service for easier recognition. The services were arranged vertically for an F-shaped reading pattern.
Stakeholder's feedback
Controls exhibit modern design, and the touch interaction (pressed state) mimics the sensation of pressing a physical button.
The insert card animation guides users to insert the correct side, while the numeric keyboard animation prompts users when to utilise the physical numeric keyboard.
Screen transitions indicate progress in the user's journey, moving seamlessly from one stage to the next.
Utilizing the RHB brand color for the background enhances brand recognition, contributing to a cohesive visual identity.
While listing services vertically is intuitive, there's concern about a potential learning curve, especially for older individuals who are accustomed to the Z-shaped layout for decades.
Opting for country flags in language selection is a questionable decision. Using the China flag for Mandarin may raise concerns of discrimination.
The controls, background color and typography may appeal to Gen Y and Z, but older people may experience accessibility issues.
While using Windows icons may enhance system performance and simplify developer handoff, they lack the ability to contribute to brand recognition.
accessibility
addressing Accessibility
An interface may be visually appealing and intuitive, but its effectiveness diminishes if a learning curve is present.
Addressing accessibility issues was my top most priority in response to stakeholder feedback, given that these kiosks are intended for general public use. Consequently, I arranged my accessibility priorities into four categories:
Guidance
To give visual cues to guide users on which side of the card to insert and when to use physical numeric keypad for input.
Colors
To use high-contrasting colours that meet AAA rating in WCAG guidelines while also aligning with brand colours and maintaining visual appeal.
Touch Targets
To ensure touch targets are sufficiently large to click on the desired action, preventing accidental presses of the wrong button.
Typography
To implement a typescale that is easily readable for both younger and older individuals.
Guidance
Leveraging the Windows-based platform, I designed 2 Lottie animations - one guiding users on the correct card insertion side, and the other prompting them when to use the physical numeric keypad for input.
Colors & Touch Targets
I utilised colours with ample contrast to qualify for AAA ratings as per WCAG guidelines. I also designed controls of sufficient size to ensure users press the intended button with ease.
Typography
I maintained the current use of a minimum font size of 36px to ensure optimal readability for a broad user range, including older individuals. Using the 1.333 - Perfect Fourth typography ratio as a reference, I applied 48px font size for instructions and 36px font size for options.
Final Result 🎉
Reverted back to Z-shaped reading pattern for service listing to ensure a seamless experience without a learning curve. Additionally, preserved the service order to support muscle memory, such as placing balance enquiry at the bottom right on the first page of ATM services menu.
Eliminated country flag icons for language selection and crafted new icons for all services in the ATM and CDM menu, ensuring alignment with RHB brand colors and guidelines.
Implemented accessible controls featuring larger touch targets following Hick's law, using a high-contrast background for excellent text readability in various lighting conditions, and consistent typography styles in sentence case and title case for easy reading by individuals with short-sightedness issues.
Old vs New
With branded icons, guided animations, and accessible controls, background, and typography, the new interface brings a brand-new experience with a smooth transition from a design that has been in use for over two decades.
Icons
Unique icons for each service, they enable customers to swiftly recognize services in a list. These icons incorporate RHB brand colors and match the style used in RHB online and mobile banking.
implement
Showcase to stakeholders
After successfully testing the final result on testing units, I presented the prototypes to Sales Ops, Retail Banking, and Group Marketing for approval.
The standout feature, impressing the stakeholders the most, was PERFORM ANOTHER TRANSACTION button after successful execution of a service. This feature required minimal technological changes yet significantly enhancing the customer experience.
implement
Handoff to developers
For a smooth handoff, I used EightShapes plugin to prepare a specification document outlining component properties, states, and layout specifications.
The finalised UI screens were uploaded to Zeplin, with each screen tagged to its respective flow for clarity. Additionally, I provided all animations in Lottie JSON format and icons in SVG format to facilitate seamless implementation without compromising system performance.
What I learnt!
Reflecting on the UI design project, it was a journey of exploration and collaboration. Delving into user behavior provided valuable insights, shaping the design to align seamlessly with their expectations. Exploring kiosk machine software capabilities opened avenues for proposing innovative features, including animations that could enhance the overall user experience.
Collaborating closely with the Infra team was instrumental in testing prototypes and iterating for testing accessibility. All credits to the Infra team, and to the guidance of my ED team's Head and Section throughout the project.
Interface refresh of touch-screen ATM & CDM kiosks
Case Study
Let's get started 🚀
Context
RHB Bank is embarking on a project to install new kiosks with touch-screen functionality. This initiative presented an opportunity for the RHB's Infra Excellence team to redesign the kiosk's interface after 25 years. RHB's Experience Design team was approached by the Infra team for collaboration on this endeavor, and being a Senior Designer in the team, I volunteered to take on the project as the sole designer.
The Scope
The project's scope involved redesigning the interface with minimal changes to the technical infrastructure. The new kiosk, equipped with touch-screens, supports Windows-based software. Adhering to regulatory conditions, a physical numeric keypad is required for PIN entry and any numeric input.
Timeline
5 weeks overall for this project:
1 week for research.
2 weeks for interface design, animations and testing.
2 weeks for stakeholders presentations, approvals and handoff.
My Role
Interface design
Prototyping
Testing
Animations
Transitions
Stakeholders approval
Tools
UI Design, Prototyping
UX Research & Workshops
UI Animations
Handoff
The Crew
PG, Head of Experience Design
Shehryar, Senior UI Designer
Jacq, Section Head of UI Design
Elly Marina, Head of Sales Ops
Zaki, Team Lead at Infra team
Syafiq, Specialist at Infra team
Zainor, Specialist at Infra team
Nurhayati, Group Brand Marketing
Design Process 💡
Evaluate the current experience
With 25 years of use by Malaysians, the existing kiosks are deeply ingrained in muscle memory. Collaborating with the Infra team, I assessed the current experience, flows, and service listings, ensuring a thoughtful arrangement for familiarity.
Explore the new kiosks
Given testing units, I explored functionalities of the new Windows-based kiosk. Leveraging the software capabilities, I implemented Lottie JSON animations for visual cues, guiding users to take the right action.
Design for accessibility
Designing for inclusivity, we ensured accessible touch targets, typography, and colors for ATMs and CDMs. Crucial for ease of use by people of all backgrounds and abilities, especially older individuals.
Test it in real-environment
I created prototypes for all services, testing them with the Infra team on these testing units. This helped me to evaluate the new interface and animations in various lighting conditions, leading to necessary improvements for enhanced accessibility.
Approval presentations and hand-off
Following successful testing with the Infra team, I showcased the prototypes to various teams, including Sales Ops, Retail Banking, and Group Marketing for approval. Once approved, I provided the vendor with UI screens, component specifications, animations, and prototypes for implementation.
Evaluate the current experience
With 25 years of use by Malaysians, the existing kiosks are deeply ingrained in muscle memory. Collaborating with the Infra team, I assessed the current experience, flows, and service listings, ensuring a thoughtful arrangement for familiarity.
Explore the new kiosks
Given testing units, I explored functionalities of the new Windows-based kiosk. Leveraging the software capabilities, I implemented Lottie JSON animations for visual cues, guiding users to take the right action.
Design for accessibility
Designing for inclusivity, we ensured accessible touch targets, typography, and colors for ATMs and CDMs. Crucial for ease of use by people of all backgrounds and abilities, especially older individuals.
Test it in real-environment
I generated prototypes for all services, testing them with the Infra team on these testing units. This helped me to evaluate the new interface and animations in various lighting conditions, leading to necessary improvements for enhanced accessibility.
Approval presentations and hand-off
Following successful testing with the Infra team, I showcased the prototypes to various teams, including Sales Ops, Retail Banking, and Group Marketing for approval. Once approved, I provided the vendor with UI screens, component specifications, animations, and prototypes for implementation.
evaluate
Current Interface
This interface works on kiosks with 4 physical buttons on each sides, displaying up to 8 options.
There is a physical numeric keypad for input with yellow button for clearing, green for confirming, and red for card ejection.
Stakeholder's feedback
Years of use has created familiarity and muscle memory, strong reasons to maintain the current workflow.
Outdated interface conflicts with our bank's modern image for banking.
Type scale lacks standardisation. Using capital letters with excessive kerning on service menu hampers readability.
As per our recent re-branding, the diamond symbol can't be used alone. It must accompany RHB letters in the logo.
evaluate
Current Flow
The current user flow revealed one-way journey limitation.
Past data showed customers check balance first, but one-way journey forces user to restart the session for withdrawals, a frequently reported experience issue.
evaluate
Draft for stakeholder's feedback
I added a button to allow user perform another transaction without re-inserting the card after the current service has been successfully executed.
Additionally, I modernised controls with opacity and shadows, and introduced unique icons for each service for easier recognition. The services were arranged vertically for an F-shaped reading pattern.
Stakeholder's feedback
Controls exhibit modern design, and the touch interaction (pressed state) mimics the sensation of pressing a physical button.
The insert card animation guides users to insert the correct side, while the numeric keyboard animation prompts users when to utilise the physical numeric keyboard.
Screen transitions indicate progress in the user's journey, moving seamlessly from one stage to the next.
Utilizing the RHB brand color for the background enhances brand recognition, contributing to a cohesive visual identity.
While listing services vertically is intuitive, there's concern about a potential learning curve, especially for older individuals who are accustomed to the Z-shaped layout for decades.
Opting for country flags in language selection is a questionable decision. Using the China flag for Mandarin may raise concerns of discrimination.
The controls, background color and typography may appeal to Gen Y and Z, but older people may experience accessibility issues.
While using Windows icons may enhance system performance and simplify developer handoff, they lack the ability to contribute to brand recognition.
accessibility
addressing Accessibility
An interface may be visually appealing and intuitive, but its effectiveness diminishes if a learning curve is present.
Addressing accessibility issues was my top most priority in response to stakeholder feedback, given that these kiosks are intended for general public use. Consequently, I arranged my accessibility priorities into four categories:
Guidance
To give visual cues to guide users on which side of the card to insert and when to use physical numeric keypad for input.
Colors
To use high-contrasting colours that meet AAA rating in WCAG guidelines while also aligning with brand colours and maintaining visual appeal.
Touch Targets
To ensure touch targets are sufficiently large to click on the desired action, preventing accidental presses of the wrong button.
Typography
To implement a typescale that is easily readable for both younger and older individuals.
Guidance
Leveraging the Windows-based platform, I designed 2 Lottie animations - one guiding users on the correct card insertion side, and the other prompting them when to use the physical numeric keypad for input.
Colors & Touch Targets
I utilised colours with ample contrast to qualify for AAA ratings as per WCAG guidelines. I also designed controls of sufficient size to ensure users press the intended button with ease.
Typography
I maintained the current use of a minimum font size of 36px to ensure optimal readability for a broad user range, including older individuals. Using the 1.333 - Perfect Fourth typography ratio as a reference, I applied 48px font size for instructions and 36px font size for options.
Final Result 🎉
Reverted back to Z-shaped reading pattern for service listing to ensure a seamless experience without a learning curve. Additionally, preserved the service order to support muscle memory, such as placing balance enquiry at the bottom right on the first page of ATM services menu.
Eliminated country flag icons for language selection and crafted new icons for all services in the ATM and CDM menu, ensuring alignment with RHB brand colors and guidelines.
Implemented accessible controls featuring larger touch targets following Hick's law, using a high-contrast background for excellent text readability in various lighting conditions, and consistent typography styles in sentence case and title case for easy reading by individuals with short-sightedness issues.
Old vs New
With branded icons, guided animations, and accessible controls, background, and typography, the new interface brings a brand-new experience with a smooth transition from a design that has been in use for over two decades.
Icons
Unique icons for each service, they enable customers to swiftly recognize services in a list. These icons incorporate RHB brand colors and match the style used in RHB online and mobile banking.
implement
Showcase to stakeholders
After successfully testing the final result on testing units, I presented the prototypes to Sales Ops, Retail Banking, and Group Marketing for approval.
The standout feature, impressing the stakeholders the most, was PERFORM ANOTHER TRANSACTION button after successful execution of a service. This feature required minimal technological changes yet significantly enhancing the customer experience.
implement
Handoff to developers
For a smooth handoff, I used EightShapes plugin to prepare a specification document outlining component properties, states, and layout specifications.
The finalised UI screens were uploaded to Zeplin, with each screen tagged to its respective flow for clarity. Additionally, I provided all animations in Lottie JSON format and icons in SVG format to facilitate seamless implementation without compromising system performance.
What I learnt!
Reflecting on the UI design project, it was a journey of exploration and collaboration. Delving into user behavior provided valuable insights, shaping the design to align seamlessly with their expectations. Exploring kiosk machine software capabilities opened avenues for proposing innovative features, including animations that could enhance the overall user experience.
Collaborating closely with the Infra team was instrumental in testing prototypes and iterating for testing accessibility. All credits to the Infra team, and to the guidance of my ED team's Head and Section throughout the project.
Designed and Developed by Shehryar Ahmad.
Last Updated: 1 Dec, 2023
Disclaimer: The inclusion of logos, brands, companies, and software names in this portfolio is solely for the purpose of showcasing design skills and work experience. It does not imply endorsement, partnership, or an attempt to secure work on behalf of the respective entities. All trademarks and logos belong to their respective owners.
Designed and Developed by Shehryar Ahmad.
Last Updated: 1 Dec, 2023
Disclaimer: The inclusion of logos, brands, companies, and software names in this portfolio is solely for the purpose of showcasing design skills and work experience. It does not imply endorsement, partnership, or an attempt to secure work on behalf of the respective entities. All trademarks and logos belong to their respective owners.
Designed and Developed by Shehryar Ahmad.
Last Updated: 1 Dec, 2023
Disclaimer: The inclusion of logos, brands, companies, and software names in this portfolio is solely for the purpose of showcasing design skills and work experience. It does not imply endorsement, partnership, or an attempt to secure work on behalf of the respective entities. All trademarks and logos belong to their respective owners.