Web Design System creation
Web Design System creation
Elevate the brand identity through web design to address marketing and sales business strategies.
Elevate the brand identity through web design to address marketing and sales business strategies.
Type
Type
Type
Web design system
Web design system
Web design system
Role
Role
Role
Role
UX/UI designer
UX/UI designer
UX/UI designer
Year
Year
Year
2022
2022
2022
Collaborators
Collaborator
Collaborator
Collaborator
Eszter Varga
Eszter Varga
Eszter Varga
(01)
Project overview
(01)
Project overview
(01)
Project overview
Crafting a compelling storytelling through web design
Crafting a compelling storytelling through web design
Crafting a compelling storytelling through web design
o9 Solutions is a cloud-based business management platform that delivers innovative supply chain planning solutions for global companies. Our role consisted of translating the brand identity into a web section library and a web design system to craft engaging digital journeys to convey the vision and showcase the benefits of the products through compelling storytelling.
o9 Solutions is a cloud-based business management platform that delivers innovative supply chain planning solutions for global companies. Our role consisted of translating the brand identity into a web section library and a web design system to craft engaging digital journeys to convey the vision and showcase the benefits of the products through compelling storytelling.
o9 Solutions is a cloud-based business management platform that delivers innovative supply chain planning solutions for global companies. Our role consisted of translating the brand identity into a web section library and a web design system to craft engaging digital journeys to convey the vision and showcase the benefits of the products through compelling storytelling.
(WHAT WE DID)
(WHAT WE DID)
(WHAT WE DID)
— Responsive design deliverables
— Art direction
— Web Design Patterns
— Web Design System
— Page templates
— Interaction design
— Copywriting guidelines
— Responsive design deliverables
— Art direction
— Web Design Patterns
— Web Design System
— Page templates
— Interaction design
— Copywriting guidelines
— Responsive design deliverables
— Art direction
— Web Design Patterns
— Web Design System
— Page templates
— Interaction design
— Copywriting guidelines
(02)
UX/UI design
(02)
The Goal
(02)
UX/UI design
(02)
UX/UI design
Building a design system for scale and flexibility
Building a design system for scale and flexibility
Building a design system for scale and flexibility
We initiated the development of a robust design system by incorporating a strong grid, spacing, and typography framework, as well as dark and light themes, facilitating the creation of flexible sections. Our emphasis relies on maintaining the right signal-to-noise ratio in design and content, focusing on essentials to ensure that the visual elements of the interface support the user's primary goals.
We initiated the development of a robust design system by incorporating a strong grid, spacing, and typography framework, as well as dark and light themes, facilitating the creation of flexible sections. Our emphasis relies on maintaining the right signal-to-noise ratio in design and content, focusing on essentials to ensure that the visual elements of the interface support the user's primary goals.
We initiated the development of a robust design system by incorporating a strong grid, spacing, and typography framework, as well as dark and light themes, facilitating the creation of flexible sections. Our emphasis relies on maintaining the right signal-to-noise ratio in design and content, focusing on essentials to ensure that the visual elements of the interface support the user's primary goals.
Furthermore, we unlocked page templates and a library in Figma to make it easy to build landing pages and content strategies for SEO purposes making the collaboration more efficient among the entire organisation.
Furthermore, we unlocked page templates and a library in Figma to make it easy to build landing pages and content strategies for SEO purposes making the collaboration more efficient among the entire organisation.
Furthermore, we unlocked page templates and a library in Figma to make it easy to build landing pages and content strategies for SEO purposes making the collaboration more efficient among the entire organisation.
(03)
Brand identity
(03)
Brand identity
(03)
Brand identity
A compelling visual product
A compelling visual product
A compelling visual product
While maintaining the beloved aspects of the original brand, we adapted it for a strong digital presence. Our strategic style decisions—prominent headings, impactful imagery for page structuring, and a well-defined grid—significantly elevate visual appeal and contribute to effectively communicating the brand's message.
While maintaining the beloved aspects of the original brand, we adapted it for a strong digital presence. Our strategic style decisions—prominent headings, impactful imagery for page structuring, and a well-defined grid—significantly elevate visual appeal and contribute to effectively communicating the brand's message.
While maintaining the beloved aspects of the original brand, we adapted it for a strong digital presence. Our strategic style decisions—prominent headings, impactful imagery for page structuring, and a well-defined grid—significantly elevate visual appeal and contribute to effectively communicating the brand's message.
This focus on clarity extends to the use of whitespace, allowing elements to breathe and preventing visual clutter for a clean and inviting interface. Furthermore, our commitment to adaptability ensures a seamless user experience across devices, and we've polished the UI elements with an art direction that activates the brand across all major touchpoints, simplifying the communication of our message and solutions.
This focus on clarity extends to the use of whitespace, allowing elements to breathe and preventing visual clutter for a clean and inviting interface. Furthermore, our commitment to adaptability ensures a seamless user experience across devices, and we've polished the UI elements with an art direction that activates the brand across all major touchpoints, simplifying the communication of our message and solutions.
This focus on clarity extends to the use of whitespace, allowing elements to breathe and preventing visual clutter for a clean and inviting interface. Furthermore, our commitment to adaptability ensures a seamless user experience across devices, and we've polished the UI elements with an art direction that activates the brand across all major touchpoints, simplifying the communication of our message and solutions.
(04)
Results
Driving Business Growth Through Website Optimization
In the initial three weeks after the launch, we witnessed significant positive outcomes. The lead generation increased by 28% and 46% conversion rate on the Platform tour CTA.
Moreover, there was a notable rise in overall visitors to the industry and solution pages featured on the homepage. User engagement also demonstrated positive trends, with an 11% increase in average time spent. Notably, case studies pages experienced a substantial surge of 70%, followed by a 34% increase on the "Request a Demo" page.
(04)
Results
Driving Business Growth Through Website Optimization
In the initial three weeks after the launch, we witnessed significant positive outcomes. The lead generation increased by 28% and 46% conversion rate on the Platform tour CTA.
Moreover, there was a notable rise in overall visitors to the industry and solution pages featured on the homepage. User engagement also demonstrated positive trends, with an 11% increase in average time spent. Notably, case studies pages experienced a substantial surge of 70%, followed by a 34% increase on the "Request a Demo" page.
(04)
Results
(04)
Results
Driving Business Growth Through Website Optimization
Driving Business Growth Through Website Optimization
In the initial three weeks after the launch, we witnessed significant positive outcomes. The lead generation increased by 28% and 46% conversion rate on the Platform tour CTA.
Moreover, there was a notable rise in overall visitors to the industry and solution pages featured on the homepage. User engagement also demonstrated positive trends, with an 11% increase in average time spent. Notably, case studies pages experienced a substantial surge of 70%, followed by a 34% increase on the "Request a Demo" page.
(05)
Learnings
(05)
Learnings
(05)
Learnings
Transforming the User Journey
Transforming the User Journey
Transforming the User Journey
Revamping the website’s look and feel was more than just a design refresh—it became a crucial piece of our brand awareness strategy. By creating clear guidelines, we empowered our teams to craft compelling stories for the web, making our messaging more cohesive and impactful.
Revamping the website’s look and feel was more than just a design refresh—it became a crucial piece of our brand awareness strategy. By creating clear guidelines, we empowered our teams to craft compelling stories for the web, making our messaging more cohesive and impactful.
Revamping the website’s look and feel was more than just a design refresh—it became a crucial piece of our brand awareness strategy. By creating clear guidelines, we empowered our teams to craft compelling stories for the web, making our messaging more cohesive and impactful.
Beyond the aesthetics, we saw real results. Our lead generation strategy gained traction across all regions, driving higher conversion rates globally. This wasn’t just about a new website; it was about building a stronger, more connected digital presence.
Beyond the aesthetics, we saw real results. Our lead generation strategy gained traction across all regions, driving higher conversion rates globally. This wasn’t just about a new website; it was about building a stronger, more connected digital presence.
Beyond the aesthetics, we saw real results. Our lead generation strategy gained traction across all regions, driving higher conversion rates globally. This wasn’t just about a new website; it was about building a stronger, more connected digital presence.