One-Web
One-Web
One-Web
Modular web layouts for Worldline Switzerland
Modular web layouts for Worldline Switzerland
Modular web layouts for Worldline Switzerland
Client
Worldline
Services
UX & UI Design
Industry
Fintech
Date
February- April 2024
Worldline is a prominent company in payment and transactional services, providing payment technologies aimed at offering a smooth online shopping experience for various industries and modern merchants. It has a significant presence in Europe and operates in 50 countries globally, including Belgium, Germany, Switzerland, and Sweden.
Worldline is a prominent company in payment and transactional services, providing payment technologies aimed at offering a smooth online shopping experience for various industries and modern merchants. It has a significant presence in Europe and operates in 50 countries globally, including Belgium, Germany, Switzerland, and Sweden.
Overview
Overview
Overview
This case study outlines the creation of over 45+ modular layouts for Worldline’s Swiss branch website, designed for seasonal updates and optimized for both desktop and mobile devices, ensuring consistent and accessible design throughout. These optimizations enable Worldline Switzerland to save time by eliminating the need to create new layouts for future updates.
This case study outlines the creation of over 45+ modular layouts for Worldline’s Swiss branch website, designed for seasonal updates and optimized for both desktop and mobile devices, ensuring consistent and accessible design throughout. These optimizations enable Worldline Switzerland to save time by eliminating the need to create new layouts for future updates.
This case study outlines the creation of over 45+ modular layouts for Worldline’s Swiss branch website, designed for seasonal updates and optimized for both desktop and mobile devices, ensuring consistent and accessible design throughout. These optimizations enable Worldline Switzerland to save time by eliminating the need to create new layouts for future updates.
Starting point
Starting point
Starting point
Worldline's Swiss team wanted to modernize its website and make it more appealing while ensuring potential buyers could easily find all the important information in the payment terminal purchase section at a glance, helping them make their purchase easier.
Worldline's Swiss team wanted to modernize its website and make it more appealing while ensuring potential buyers could easily find all the important information in the payment terminal purchase section at a glance, helping them make their purchase easier.
Worldline's Swiss team wanted to modernize its website and make it more appealing while ensuring potential buyers could easily find all the important information in the payment terminal purchase section at a glance, helping them make their purchase easier.
Original version
First proposals
First proposals
First proposals
The team initially didn’t respond positively to the first proposals. Although they acknowledged that the designs fit the website and aligned with the brand’s image, they wanted something more 'disruptive' and different from what their own designers were creating. So, it was back to the drawing board.
The team initially didn’t respond positively to the first proposals. Although they acknowledged that the designs fit the website and aligned with the brand’s image, they wanted something more 'disruptive' and different from what their own designers were creating. So, it was back to the drawing board.
The team initially didn’t respond positively to the first proposals. Although they acknowledged that the designs fit the website and aligned with the brand’s image, they wanted something more 'disruptive' and different from what their own designers were creating. So, it was back to the drawing board.
One of the initial desktop proposals provided users with more detailed information about the conditions and fees associated with purchasing a device.
Another round of proposals
Another round of proposals
Another round of proposals
The team responded very positively to the next round of proposals. We prepared both desktop and mobile wireframes, allowing them to see how the designs would look on different devices. This proved very useful, as the team was able to give detailed feedback on what they liked and disliked about the proposals.
The team responded very positively to the next round of proposals. We prepared both desktop and mobile wireframes, allowing them to see how the designs would look on different devices. This proved very useful, as the team was able to give detailed feedback on what they liked and disliked about the proposals.
The team responded very positively to the next round of proposals. We prepared both desktop and mobile wireframes, allowing them to see how the designs would look on different devices. This proved very useful, as the team was able to give detailed feedback on what they liked and disliked about the proposals.
The next round of desktop proposals had a more playful design, using a ring in the brand's colors as the background and showcasing a hand to help buyers visualize how the device feels in use.
Mobile version of one of the latter proposals.
Tweaked proposals
Tweaked proposals
Tweaked proposals
I retained all the elements the team liked and created versions similar to those they favored during the second proposal presentation. By combining their favorite aspects from different proposals, I received strong approval for this approach.
I retained all the elements the team liked and created versions similar to those they favored during the second proposal presentation. By combining their favorite aspects from different proposals, I received strong approval for this approach.
I retained all the elements the team liked and created versions similar to those they favored during the second proposal presentation. By combining their favorite aspects from different proposals, I received strong approval for this approach.
The next round of revised proposals focused on helping buyers visualize the device in real life by using an actual image and incorporating more vibrant colors to create a lively feel.
Creating modular layouts
Creating modular layouts
Creating modular layouts
Following the team's positive reception of the latest proposals, which combined their favorite design elements, they requested multiple versions that integrated these aspects. This approach would allow them to create custom layouts for quarterly website updates independently.
Following the team's positive reception of the latest proposals, which combined their favorite design elements, they requested multiple versions that integrated these aspects. This approach would allow them to create custom layouts for quarterly website updates independently.
Following the team's positive reception of the latest proposals, which combined their favorite design elements, they requested multiple versions that integrated these aspects. This approach would allow them to create custom layouts for quarterly website updates independently.
The base desktop layout was finalized for the team to use as a foundation for future feature updates.
The base mobile layout was finalized for the team to use as a foundation for future feature updates.
Helping the team create their own versions
Helping the team create their own versions
Helping the team create their own versions
A guide was created to help the team easily mix and match colors and elements they liked. This guide ensured the website remained accessible and adhered to brand colors. It provided clear instructions and examples on combining elements while maintaining the right color contrasts for readability and accessibility.
A guide was created to help the team easily mix and match colors and elements they liked. This guide ensured the website remained accessible and adhered to brand colors. It provided clear instructions and examples on combining elements while maintaining the right color contrasts for readability and accessibility.
A guide was created to help the team easily mix and match colors and elements they liked. This guide ensured the website remained accessible and adhered to brand colors. It provided clear instructions and examples on combining elements while maintaining the right color contrasts for readability and accessibility.
A guide featuring brand color combinations was created to ensure text readability across different background colors.
