You'll need a password
This stuff's a bit secret.
Don't have it?
If you have my CV, it's on there. Otherwise, why not drop me a message and I'd be happy to give it to you (unless you're a bit shady).
Buy page upsell module for smartphone retailer
Buy page upsell module for smartphone retailer
Buy page upsell module for smartphone retailer
Buy page upsell module for smartphone retailer
Buy page upsell module for smartphone retailer
Buy page upsell module for smartphone retailer
Website Functionality
Website Functionality
Website Functionality
Website Functionality
Website Functionality
Website Functionality
•
•
•
•
•
•
2024
2024
2024
2024
2024
2024
HMD’s Fusion device launched with a range of high-tech accessories, which called for bespoke UX treatment in key site areas.
HMD’s Fusion device launched with a range of high-tech accessories, which called for bespoke UX treatment in key site areas.
HMD’s Fusion device launched with a range of high-tech accessories, which called for bespoke UX treatment in key site areas.
HMD’s Fusion device launched with a range of high-tech accessories, which called for bespoke UX treatment in key site areas.
HMD’s Fusion device launched with a range of high-tech accessories, which called for bespoke UX treatment in key site areas.
HMD’s Fusion device launched with a range of high-tech accessories, which called for bespoke UX treatment in key site areas.
Context
In Autumn 2024, HMD launched the HMD Fusion smartphone, whose standout feature was compatibility with a range of “Smart Outfits” - high-tech cases that provided unique functionality. My role was to lead the deployment of all visual elements onto the website, which included tailored UX treatment to cater for the device's unique offering.
The challenge
We needed to ensure customers understood that Smart Outfits were more than just cases - they offered unique hardware and software enhancements thanks to their electrical connectivity. So, as well as highlighting their differences from standard cases, we focused on educating customers during the purchase journey to maximise the opportunity for upselling.
Please note: some of these Outfits never made it into production due to matters unrelated to the scope of this project.
Context
In Autumn 2024, HMD launched the HMD Fusion smartphone, whose standout feature was compatibility with a range of “Smart Outfits” - high-tech cases that provided unique functionality. My role was to lead the deployment of all visual elements onto the website, which included tailored UX treatment to cater for the device's unique offering.
The challenge
We needed to ensure customers understood that Smart Outfits were more than just cases - they offered unique hardware and software enhancements thanks to their electrical connectivity. So, as well as highlighting their differences from standard cases, we focused on educating customers during the purchase journey to maximise the opportunity for upselling.
Please note: some of these Outfits never made it into production due to matters unrelated to the scope of this project.
Context
In Autumn 2024, HMD launched the HMD Fusion smartphone, whose standout feature was compatibility with a range of “Smart Outfits” - high-tech cases that provided unique functionality. My role was to lead the deployment of all visual elements onto the website, which included tailored UX treatment to cater for the device's unique offering.
The challenge
We needed to ensure customers understood that Smart Outfits were more than just cases - they offered unique hardware and software enhancements thanks to their electrical connectivity. So, as well as highlighting their differences from standard cases, we focused on educating customers during the purchase journey to maximise the opportunity for upselling.
Please note: some of these Outfits never made it into production due to matters unrelated to the scope of this project.
Context
In Autumn 2024, HMD launched the HMD Fusion smartphone, whose standout feature was compatibility with a range of “Smart Outfits” - high-tech cases that provided unique functionality. My role was to lead the deployment of all visual elements onto the website, which included tailored UX treatment to cater for the device's unique offering.
The challenge
We needed to ensure customers understood that Smart Outfits were more than just cases - they offered unique hardware and software enhancements thanks to their electrical connectivity. So, as well as highlighting their differences from standard cases, we focused on educating customers during the purchase journey to maximise the opportunity for upselling.
Please note: some of these Outfits never made it into production due to matters unrelated to the scope of this project.
Context
In Autumn 2024, HMD launched the HMD Fusion smartphone, whose standout feature was compatibility with a range of “Smart Outfits” - high-tech cases that provided unique functionality. My role was to lead the deployment of all visual elements onto the website, which included tailored UX treatment to cater for the device's unique offering.
The challenge
We needed to ensure customers understood that Smart Outfits were more than just cases - they offered unique hardware and software enhancements thanks to their electrical connectivity. So, as well as highlighting their differences from standard cases, we focused on educating customers during the purchase journey to maximise the opportunity for upselling.
Please note: some of these Outfits never made it into production due to matters unrelated to the scope of this project.
Context
In Autumn 2024, HMD launched the HMD Fusion smartphone, whose standout feature was compatibility with a range of “Smart Outfits” - high-tech cases that provided unique functionality. My role was to lead the deployment of all visual elements onto the website, which included tailored UX treatment to cater for the device's unique offering.
The challenge
We needed to ensure customers understood that Smart Outfits were more than just cases - they offered unique hardware and software enhancements thanks to their electrical connectivity. So, as well as highlighting their differences from standard cases, we focused on educating customers during the purchase journey to maximise the opportunity for upselling.
Please note: some of these Outfits never made it into production due to matters unrelated to the scope of this project.
Deliverables
Deliverables
Deliverables
Deliverables
Deliverables
Deliverables
Buy page upsell module
Buy page upsell module
Buy page upsell module
Buy page upsell module
Buy page upsell module
Buy page upsell module
Category structure enhancements
Category structure enhancements
Category structure enhancements
Category structure enhancements
Category structure enhancements
Category structure enhancements
Bespoke customer journey strategy
Bespoke customer journey strategy
Bespoke customer journey strategy
Bespoke customer journey strategy
Bespoke customer journey strategy
Bespoke customer journey strategy
Enhanced buy-page content
Enhanced buy-page content
Enhanced buy-page content
Enhanced buy-page content
Enhanced buy-page content
Enhanced buy-page content
Kickoff and discovery
I worked closely with HMD’s Head of Digital Development and the web team to explore technical possibilities and limitations of any website modifications that may be required for launch.
A key point of discussion was that the existing accessories upsell module on the buy page might not do justice to these new high-tech accessories, in terms of position, prominence and content. This was echoed with a desire to create a new sub-category within the existing Accessories category structure, highlighting them as a unique offering.
A final aspect of the brief was to review and build the Product Page design, a draft visual of which had come from HMD's creative team.
Kickoff and discovery
I worked closely with HMD’s Head of Digital Development and the web team to explore technical possibilities and limitations of any website modifications that may be required for launch.
A key point of discussion was that the existing accessories upsell module on the buy page might not do justice to these new high-tech accessories, in terms of position, prominence and content. This was echoed with a desire to create a new sub-category within the existing Accessories category structure, highlighting them as a unique offering.
A final aspect of the brief was to review and build the Product Page design, a draft visual of which had come from HMD's creative team.
Kickoff and discovery
I worked closely with HMD’s Head of Digital Development and the web team to explore technical possibilities and limitations of any website modifications that may be required for launch.
A key point of discussion was that the existing accessories upsell module on the buy page might not do justice to these new high-tech accessories, in terms of position, prominence and content. This was echoed with a desire to create a new sub-category within the existing Accessories category structure, highlighting them as a unique offering.
A final aspect of the brief was to review and build the Product Page design, a draft visual of which had come from HMD's creative team.
Kickoff and discovery
I worked closely with HMD’s Head of Digital Development and the web team to explore technical possibilities and limitations of any website modifications that may be required for launch.
A key point of discussion was that the existing accessories upsell module on the buy page might not do justice to these new high-tech accessories, in terms of position, prominence and content. This was echoed with a desire to create a new sub-category within the existing Accessories category structure, highlighting them as a unique offering.
A final aspect of the brief was to review and build the Product Page design, a draft visual of which had come from HMD's creative team.
Kickoff and discovery
I worked closely with HMD’s Head of Digital Development and the web team to explore technical possibilities and limitations of any website modifications that may be required for launch.
A key point of discussion was that the existing accessories upsell module on the buy page might not do justice to these new high-tech accessories, in terms of position, prominence and content. This was echoed with a desire to create a new sub-category within the existing Accessories category structure, highlighting them as a unique offering.
A final aspect of the brief was to review and build the Product Page design, a draft visual of which had come from HMD's creative team.
Kickoff and discovery
I worked closely with HMD’s Head of Digital Development and the web team to explore technical possibilities and limitations of any website modifications that may be required for launch.
A key point of discussion was that the existing accessories upsell module on the buy page might not do justice to these new high-tech accessories, in terms of position, prominence and content. This was echoed with a desire to create a new sub-category within the existing Accessories category structure, highlighting them as a unique offering.
A final aspect of the brief was to review and build the Product Page design, a draft visual of which had come from HMD's creative team.
Research and insight
For the upsell module, I started by adding draft content to the existing Accessories module on the smartphone buy page. I quickly identified key issues: limited colour options and cramped text and image areas.
I reviewed the design system and existing components to see if anything could be utilised and adapted, focusing on colour selectors and text components like expandable drop-downs or pop-ups. I also researched how competitors (Apple, Google, Samsung) present their accessories within device buy pages.
When reviewing the Product Page design supplied by HMD's in-house team, I noticed a crucial gap: there was no clear explanation of how these Outfits worked. While their functionality was displayed, the absence of an explanation of the smart-pin connectivity risked the cases being seen as isolated gadgets, like the Flashy Outfit being mistaken for just a clip-on light without device integration.
Research and insight
For the upsell module, I started by adding draft content to the existing Accessories module on the smartphone buy page. I quickly identified key issues: limited colour options and cramped text and image areas.
I reviewed the design system and existing components to see if anything could be utilised and adapted, focusing on colour selectors and text components like expandable drop-downs or pop-ups. I also researched how competitors (Apple, Google, Samsung) present their accessories within device buy pages.
When reviewing the Product Page design supplied by HMD's in-house team, I noticed a crucial gap: there was no clear explanation of how these Outfits worked. While their functionality was displayed, the absence of an explanation of the smart-pin connectivity risked the cases being seen as isolated gadgets, like the Flashy Outfit being mistaken for just a clip-on light without device integration.
Research and insight
For the upsell module, I started by adding draft content to the existing Accessories module on the smartphone buy page. I quickly identified key issues: limited colour options and cramped text and image areas.
I reviewed the design system and existing components to see if anything could be utilised and adapted, focusing on colour selectors and text components like expandable drop-downs or pop-ups. I also researched how competitors (Apple, Google, Samsung) present their accessories within device buy pages.
When reviewing the Product Page design supplied by HMD's in-house team, I noticed a crucial gap: there was no clear explanation of how these Outfits worked. While their functionality was displayed, the absence of an explanation of the smart-pin connectivity risked the cases being seen as isolated gadgets, like the Flashy Outfit being mistaken for just a clip-on light without device integration.
Research and insight
For the upsell module, I started by adding draft content to the existing Accessories module on the smartphone buy page. I quickly identified key issues: limited colour options and cramped text and image areas.
I reviewed the design system and existing components to see if anything could be utilised and adapted, focusing on colour selectors and text components like expandable drop-downs or pop-ups. I also researched how competitors (Apple, Google, Samsung) present their accessories within device buy pages.
When reviewing the Product Page design supplied by HMD's in-house team, I noticed a crucial gap: there was no clear explanation of how these Outfits worked. While their functionality was displayed, the absence of an explanation of the smart-pin connectivity risked the cases being seen as isolated gadgets, like the Flashy Outfit being mistaken for just a clip-on light without device integration.
Research and insight
For the upsell module, I started by adding draft content to the existing Accessories module on the smartphone buy page. I quickly identified key issues: limited colour options and cramped text and image areas.
I reviewed the design system and existing components to see if anything could be utilised and adapted, focusing on colour selectors and text components like expandable drop-downs or pop-ups. I also researched how competitors (Apple, Google, Samsung) present their accessories within device buy pages.
When reviewing the Product Page design supplied by HMD's in-house team, I noticed a crucial gap: there was no clear explanation of how these Outfits worked. While their functionality was displayed, the absence of an explanation of the smart-pin connectivity risked the cases being seen as isolated gadgets, like the Flashy Outfit being mistaken for just a clip-on light without device integration.
Research and insight
For the upsell module, I started by adding draft content to the existing Accessories module on the smartphone buy page. I quickly identified key issues: limited colour options and cramped text and image areas.
I reviewed the design system and existing components to see if anything could be utilised and adapted, focusing on colour selectors and text components like expandable drop-downs or pop-ups. I also researched how competitors (Apple, Google, Samsung) present their accessories within device buy pages.
When reviewing the Product Page design supplied by HMD's in-house team, I noticed a crucial gap: there was no clear explanation of how these Outfits worked. While their functionality was displayed, the absence of an explanation of the smart-pin connectivity risked the cases being seen as isolated gadgets, like the Flashy Outfit being mistaken for just a clip-on light without device integration.
Solution strategy
After presenting my findings, the team and I devised our next steps. Ultimately, the Smart Outfits were unlike anything on the market, so they demanded a unique approach.
While the existing accessory upsell module was a good start, we devised to create a new, dedicated module designed with enhanced prominence and functionality in mind. It would include custom headers to drive KSP messaging, additional text and image areas and a colour selector.
Beyond the upsell module, I proposed an additional “Smart Pins” section on the Fusion product page. This section would comprehensively explain the Outfit connectivity and functionality through engaging visuals and concise, informative copy.
A new dedicated “Outfits” sub-category was to be created within the existing Accessories section, but I advocated to ensure these products also appeared under another existing sub-category, Protection, to maintain visibility - as this was where all other phone cases were located.
Solution strategy
After presenting my findings, the team and I devised our next steps. Ultimately, the Smart Outfits were unlike anything on the market, so they demanded a unique approach.
While the existing accessory upsell module was a good start, we devised to create a new, dedicated module designed with enhanced prominence and functionality in mind. It would include custom headers to drive KSP messaging, additional text and image areas and a colour selector.
Beyond the upsell module, I proposed an additional “Smart Pins” section on the Fusion product page. This section would comprehensively explain the Outfit connectivity and functionality through engaging visuals and concise, informative copy.
A new dedicated “Outfits” sub-category was to be created within the existing Accessories section, but I advocated to ensure these products also appeared under another existing sub-category, Protection, to maintain visibility - as this was where all other phone cases were located.
Solution strategy
After presenting my findings, the team and I devised our next steps. Ultimately, the Smart Outfits were unlike anything on the market, so they demanded a unique approach.
While the existing accessory upsell module was a good start, we devised to create a new, dedicated module designed with enhanced prominence and functionality in mind. It would include custom headers to drive KSP messaging, additional text and image areas and a colour selector.
Beyond the upsell module, I proposed an additional “Smart Pins” section on the Fusion product page. This section would comprehensively explain the Outfit connectivity and functionality through engaging visuals and concise, informative copy.
A new dedicated “Outfits” sub-category was to be created within the existing Accessories section, but I advocated to ensure these products also appeared under another existing sub-category, Protection, to maintain visibility - as this was where all other phone cases were located.
Solution strategy
After presenting my findings, the team and I devised our next steps. Ultimately, the Smart Outfits were unlike anything on the market, so they demanded a unique approach.
While the existing accessory upsell module was a good start, we devised to create a new, dedicated module designed with enhanced prominence and functionality in mind. It would include custom headers to drive KSP messaging, additional text and image areas and a colour selector.
Beyond the upsell module, I proposed an additional “Smart Pins” section on the Fusion product page. This section would comprehensively explain the Outfit connectivity and functionality through engaging visuals and concise, informative copy.
A new dedicated “Outfits” sub-category was to be created within the existing Accessories section, but I advocated to ensure these products also appeared under another existing sub-category, Protection, to maintain visibility - as this was where all other phone cases were located.
Solution strategy
After presenting my findings, the team and I devised our next steps. Ultimately, the Smart Outfits were unlike anything on the market, so they demanded a unique approach.
While the existing accessory upsell module was a good start, we devised to create a new, dedicated module designed with enhanced prominence and functionality in mind. It would include custom headers to drive KSP messaging, additional text and image areas and a colour selector.
Beyond the upsell module, I proposed an additional “Smart Pins” section on the Fusion product page. This section would comprehensively explain the Outfit connectivity and functionality through engaging visuals and concise, informative copy.
A new dedicated “Outfits” sub-category was to be created within the existing Accessories section, but I advocated to ensure these products also appeared under another existing sub-category, Protection, to maintain visibility - as this was where all other phone cases were located.
Solution strategy
After presenting my findings, the team and I devised our next steps. Ultimately, the Smart Outfits were unlike anything on the market, so they demanded a unique approach.
While the existing accessory upsell module was a good start, we devised to create a new, dedicated module designed with enhanced prominence and functionality in mind. It would include custom headers to drive KSP messaging, additional text and image areas and a colour selector.
Beyond the upsell module, I proposed an additional “Smart Pins” section on the Fusion product page. This section would comprehensively explain the Outfit connectivity and functionality through engaging visuals and concise, informative copy.
A new dedicated “Outfits” sub-category was to be created within the existing Accessories section, but I advocated to ensure these products also appeared under another existing sub-category, Protection, to maintain visibility - as this was where all other phone cases were located.
Initial module experimentation
I created several mock-ups for the new upsell module, experimenting with varying amounts of content inside the cards.
I needed to explore the idea of having additional information showing either as a pull-out drawer, a pop-up or even as an entirely different page, as currently that's how the Bundle functionality worked. This would entail a "more info" link which would launch the additional content.
I also explored module positioning and hierarchy on the Buy Page vs. the existing elements, balancing visual emphasis with intuitive browsing and purchase flow.
Initial module experimentation
I created several mock-ups for the new upsell module, experimenting with varying amounts of content inside the cards.
I needed to explore the idea of having additional information showing either as a pull-out drawer, a pop-up or even as an entirely different page, as currently that's how the Bundle functionality worked. This would entail a "more info" link which would launch the additional content.
I also explored module positioning and hierarchy on the Buy Page vs. the existing elements, balancing visual emphasis with intuitive browsing and purchase flow.
Initial module experimentation
I created several mock-ups for the new upsell module, experimenting with varying amounts of content inside the cards.
I needed to explore the idea of having additional information showing either as a pull-out drawer, a pop-up or even as an entirely different page, as currently that's how the Bundle functionality worked. This would entail a "more info" link which would launch the additional content.
I also explored module positioning and hierarchy on the Buy Page vs. the existing elements, balancing visual emphasis with intuitive browsing and purchase flow.
Initial module experimentation
I created several mock-ups for the new upsell module, experimenting with varying amounts of content inside the cards.
I needed to explore the idea of having additional information showing either as a pull-out drawer, a pop-up or even as an entirely different page, as currently that's how the Bundle functionality worked. This would entail a "more info" link which would launch the additional content.
I also explored module positioning and hierarchy on the Buy Page vs. the existing elements, balancing visual emphasis with intuitive browsing and purchase flow.
Initial module experimentation
I created several mock-ups for the new upsell module, experimenting with varying amounts of content inside the cards.
I needed to explore the idea of having additional information showing either as a pull-out drawer, a pop-up or even as an entirely different page, as currently that's how the Bundle functionality worked. This would entail a "more info" link which would launch the additional content.
I also explored module positioning and hierarchy on the Buy Page vs. the existing elements, balancing visual emphasis with intuitive browsing and purchase flow.
Refinement and prototyping
It was important to build high-fidelity prototypes of the modules in Figma, which would allow myself and stakeholders to test interactions and evaluate how intuitive and functional each design option was.
We eventually decided on a minimalist module which held additional content within a pull-out drawer. This gave the content room to breathe and didn't risk cluttering the page - as customers still needed to be able to buy the phone easily.
I experimented with several versions of the pull-out drawer including one which had an image gallery, but we stripped this back to a single image for simplicity.
Refinement and prototyping
It was important to build high-fidelity prototypes of the modules in Figma, which would allow myself and stakeholders to test interactions and evaluate how intuitive and functional each design option was.
We eventually decided on a minimalist module which held additional content within a pull-out drawer. This gave the content room to breathe and didn't risk cluttering the page - as customers still needed to be able to buy the phone easily.
I experimented with several versions of the pull-out drawer including one which had an image gallery, but we stripped this back to a single image for simplicity.
Refinement and prototyping
It was important to build high-fidelity prototypes of the modules in Figma, which would allow myself and stakeholders to test interactions and evaluate how intuitive and functional each design option was.
We eventually decided on a minimalist module which held additional content within a pull-out drawer. This gave the content room to breathe and didn't risk cluttering the page - as customers still needed to be able to buy the phone easily.
I experimented with several versions of the pull-out drawer including one which had an image gallery, but we stripped this back to a single image for simplicity.
Refinement and prototyping
It was important to build high-fidelity prototypes of the modules in Figma, which would allow myself and stakeholders to test interactions and evaluate how intuitive and functional each design option was.
We eventually decided on a minimalist module which held additional content within a pull-out drawer. This gave the content room to breathe and didn't risk cluttering the page - as customers still needed to be able to buy the phone easily.
I experimented with several versions of the pull-out drawer including one which had an image gallery, but we stripped this back to a single image for simplicity.
Refinement and prototyping
It was important to build high-fidelity prototypes of the modules in Figma, which would allow myself and stakeholders to test interactions and evaluate how intuitive and functional each design option was.
We eventually decided on a minimalist module which held additional content within a pull-out drawer. This gave the content room to breathe and didn't risk cluttering the page - as customers still needed to be able to buy the phone easily.
I experimented with several versions of the pull-out drawer including one which had an image gallery, but we stripped this back to a single image for simplicity.
Refinement and prototyping
It was important to build high-fidelity prototypes of the modules in Figma, which would allow myself and stakeholders to test interactions and evaluate how intuitive and functional each design option was.
We eventually decided on a minimalist module which held additional content within a pull-out drawer. This gave the content room to breathe and didn't risk cluttering the page - as customers still needed to be able to buy the phone easily.
I experimented with several versions of the pull-out drawer including one which had an image gallery, but we stripped this back to a single image for simplicity.
Handover
With the text content finalised and image compositions created, I handed the signed-off prototypes to the Development Team for implementation. I remained on-hand throughout the phased code rollout and reviewed the final builds for accuracy along the way.
Handover
With the text content finalised and image compositions created, I handed the signed-off prototypes to the Development Team for implementation. I remained on-hand throughout the phased code rollout and reviewed the final builds for accuracy along the way.
Handover
With the text content finalised and image compositions created, I handed the signed-off prototypes to the Development Team for implementation. I remained on-hand throughout the phased code rollout and reviewed the final builds for accuracy along the way.
Handover
With the text content finalised and image compositions created, I handed the signed-off prototypes to the Development Team for implementation. I remained on-hand throughout the phased code rollout and reviewed the final builds for accuracy along the way.
Handover
With the text content finalised and image compositions created, I handed the signed-off prototypes to the Development Team for implementation. I remained on-hand throughout the phased code rollout and reviewed the final builds for accuracy along the way.
Handover
With the text content finalised and image compositions created, I handed the signed-off prototypes to the Development Team for implementation. I remained on-hand throughout the phased code rollout and reviewed the final builds for accuracy along the way.
Outcome
The final result was a polished, engaging purchase journey that treated the Smart Outfits as the true flagship features that they were.
The enhanced product page explained the concept smoothly, the revised category structure ensured discovery and the buy page’s new module highlighted their individual capabilities and colour options.
Everything came together to clearly communicate the Smart Outfits’ value proposition while preserving a clean, intuitive customer experience.
UX takeaways
Introducing an unfamiliar product highlights the importance of layered communication. Within the constraints of the upsell module, even the header became a subtle education opportunity - delivering micro learning where space was tight.
Exploring multiple layout directions revealed that a pull-out drawer offered the best compromise between content and simplicity, with development being accelerated by modifying and re-using existing design-system components.
Outcome
The final result was a polished, engaging purchase journey that treated the Smart Outfits as the true flagship features that they were.
The enhanced product page explained the concept smoothly, the revised category structure ensured discovery and the buy page’s new module highlighted their individual capabilities and colour options.
Everything came together to clearly communicate the Smart Outfits’ value proposition while preserving a clean, intuitive customer experience.
UX takeaways
Introducing an unfamiliar product highlights the importance of layered communication. Within the constraints of the upsell module, even the header became a subtle education opportunity - delivering micro learning where space was tight.
Exploring multiple layout directions revealed that a pull-out drawer offered the best compromise between content and simplicity, with development being accelerated by modifying and re-using existing design-system components.
Outcome
The final result was a polished, engaging purchase journey that treated the Smart Outfits as the true flagship features that they were.
The enhanced product page explained the concept smoothly, the revised category structure ensured discovery and the buy page’s new module highlighted their individual capabilities and colour options.
Everything came together to clearly communicate the Smart Outfits’ value proposition while preserving a clean, intuitive customer experience.
UX takeaways
Introducing an unfamiliar product highlights the importance of layered communication. Within the constraints of the upsell module, even the header became a subtle education opportunity - delivering micro learning where space was tight.
Exploring multiple layout directions revealed that a pull-out drawer offered the best compromise between content and simplicity, with development being accelerated by modifying and re-using existing design-system components.
Outcome
The final result was a polished, engaging purchase journey that treated the Smart Outfits as the true flagship features that they were.
The enhanced product page explained the concept smoothly, the revised category structure ensured discovery and the buy page’s new module highlighted their individual capabilities and colour options.
Everything came together to clearly communicate the Smart Outfits’ value proposition while preserving a clean, intuitive customer experience.
UX takeaways
Introducing an unfamiliar product highlights the importance of layered communication. Within the constraints of the upsell module, even the header became a subtle education opportunity - delivering micro learning where space was tight.
Exploring multiple layout directions revealed that a pull-out drawer offered the best compromise between content and simplicity, with development being accelerated by modifying and re-using existing design-system components.
Outcome
The final result was a polished, engaging purchase journey that treated the Smart Outfits as the true flagship features that they were.
The enhanced product page explained the concept smoothly, the revised category structure ensured discovery and the buy page’s new module highlighted their individual capabilities and colour options.
Everything came together to clearly communicate the Smart Outfits’ value proposition while preserving a clean, intuitive customer experience.
UX takeaways
Introducing an unfamiliar product highlights the importance of layered communication. Within the constraints of the upsell module, even the header became a subtle education opportunity - delivering micro learning where space was tight.
Exploring multiple layout directions revealed that a pull-out drawer offered the best compromise between content and simplicity, with development being accelerated by modifying and re-using existing design-system components.
Outcome
The final result was a polished, engaging purchase journey that treated the Smart Outfits as the true flagship features that they were.
The enhanced product page explained the concept smoothly, the revised category structure ensured discovery and the buy page’s new module highlighted their individual capabilities and colour options.
Everything came together to clearly communicate the Smart Outfits’ value proposition while preserving a clean, intuitive customer experience.
UX takeaways
Introducing an unfamiliar product highlights the importance of layered communication. Within the constraints of the upsell module, even the header became a subtle education opportunity - delivering micro learning where space was tight.
Exploring multiple layout directions revealed that a pull-out drawer offered the best compromise between content and simplicity, with development being accelerated by modifying and re-using existing design-system components.
Skills
Skills
Skills
Skills
Skills
Skills
UX design
UX design
UX design
UX design
UX design
UX design
Product design
Product design
Product design
Product design
Product design
Product design
User journeys
User journeys
User journeys
User journeys
User journeys
User journeys
Wireframing
Wireframing
Wireframing
Wireframing
Wireframing
Wireframing
Prototyping
Prototyping
Prototyping
Prototyping
Prototyping
Prototyping
eCommerce
eCommerce
eCommerce
eCommerce
eCommerce
eCommerce
CMS management
CMS management
CMS management
CMS management
CMS management
CMS management
Branding
Branding
Branding
Branding
Branding
Branding
Disclaimer: Artwork, images and videos are included for context and decorative purposes only. I do not claim copyright for any included work created during employment. All products, brands and associated materials remain the property of their respective owners. These case studies are shared purely to showcase my design process and skillset, not to endorse any featured products or services.
Disclaimer: Artwork, images and videos are included for context and decorative purposes only. I do not claim copyright for any included work created during employment. All products, brands and associated materials remain the property of their respective owners. These case studies are shared purely to showcase my design process and skillset, not to endorse any featured products or services.
Disclaimer: Artwork, images and videos are included for context and decorative purposes only. I do not claim copyright for any included work created during employment. All products, brands and associated materials remain the property of their respective owners. These case studies are shared purely to showcase my design process and skillset, not to endorse any featured products or services.
Disclaimer: Artwork, images and videos are included for context and decorative purposes only. I do not claim copyright for any included work created during employment. All products, brands and associated materials remain the property of their respective owners. These case studies are shared purely to showcase my design process and skillset, not to endorse any featured products or services.
Disclaimer: Artwork, images and videos are included for context and decorative purposes only. I do not claim copyright for any included work created during employment. All products, brands and associated materials remain the property of their respective owners. These case studies are shared purely to showcase my design process and skillset, not to endorse any featured products or services.
Disclaimer: Artwork, images and videos are included for context and decorative purposes only. I do not claim copyright for any included work created during employment. All products, brands and associated materials remain the property of their respective owners. These case studies are shared purely to showcase my design process and skillset, not to endorse any featured products or services.
More web projects
More web projects
More web projects
More web projects
More web projects
More web projects
Website Design & Build
Website Design & Build
Website Design & Build
Website Design & Build
A streamlined experience for Dell's online resources
A streamlined experience for Dell's online resources
A streamlined experience for Dell's online resources
A streamlined experience for Dell's online resources
A streamlined experience for Dell's online resources
Dell needed an intuitive solution for guiding users to relevant Edge Technology assets based on industry, use case and knowledge level.
Dell needed an intuitive solution for guiding users to relevant Edge Technology assets based on industry, use case and knowledge level.
Dell needed an intuitive solution for guiding users to relevant Edge Technology assets based on industry, use case and knowledge level.
Dell needed an intuitive solution for guiding users to relevant Edge Technology assets based on industry, use case and knowledge level.
Wesite Content
Wesite Content
Wesite Content
Wesite Content
HMD Barça 3210 hero banner
HMD Barça 3210 hero banner
HMD Barça 3210 hero banner
HMD Barça 3210 hero banner
HMD Barça 3210 hero banner
An example promotional hero banner coded for each HMD product launch, with accompanying Product Page, email and supplementary artwork.
An example promotional hero banner coded for each HMD product launch, with accompanying Product Page, email and supplementary artwork.
An example promotional hero banner coded for each HMD product launch, with accompanying Product Page, email and supplementary artwork.
An example promotional hero banner coded for each HMD product launch, with accompanying Product Page, email and supplementary artwork.
Wesite Content
Wesite Content
Wesite Content
Wesite Content
Blacknut Gaming promotion
Blacknut Gaming promotion
Blacknut Gaming promotion
Blacknut Gaming promotion
Blacknut Gaming promotion
HMD partnered with gaming platform Blacknut to promote the launch of the Fusion Gaming Outfit, an accessory for their latest smartphone.
HMD partnered with gaming platform Blacknut to promote the launch of the Fusion Gaming Outfit, an accessory for their latest smartphone.
HMD partnered with gaming platform Blacknut to promote the launch of the Fusion Gaming Outfit, an accessory for their latest smartphone.
HMD partnered with gaming platform Blacknut to promote the launch of the Fusion Gaming Outfit, an accessory for their latest smartphone.
Wesite Content
Wesite Content
Wesite Content
Wesite Content
HEYDUDE brand launch artwork
HEYDUDE brand launch artwork
HEYDUDE brand launch artwork
HEYDUDE brand launch artwork
HEYDUDE brand launch artwork
After acquiring the brand, Crocs needed hero launch content to sit within their category structure, promoting HEYDUDE's introduction.
After acquiring the brand, Crocs needed hero launch content to sit within their category structure, promoting HEYDUDE's introduction.
After acquiring the brand, Crocs needed hero launch content to sit within their category structure, promoting HEYDUDE's introduction.
After acquiring the brand, Crocs needed hero launch content to sit within their category structure, promoting HEYDUDE's introduction.
Website Design & Build
A streamlined experience for Dell's online resources
A streamlined experience for Dell's online resources
Dell needed an intuitive solution for guiding users to relevant Edge Technology assets based on industry, use case and knowledge level.
Wesite Content
HMD Barça 3210 hero banner
HMD Barça 3210 hero banner
An example promotional hero banner coded for each HMD product launch, with accompanying Product Page, email and supplementary artwork.
Wesite Content
Blacknut Gaming promotion
Blacknut Gaming promotion
HMD partnered with gaming platform Blacknut to promote the launch of the Fusion Gaming Outfit, an accessory for their latest smartphone.
Wesite Content
HEYDUDE brand launch artwork
HEYDUDE brand launch artwork
After acquiring the brand, Crocs needed hero launch content to sit within their category structure, promoting HEYDUDE's introduction.
Website Design & Build
Rolling Barrel Bar website design
Rolling Barrel Bar website design
I built a bespoke WordPress site and expanded the branding for a mobile drinks events company, working around an existing logo and photography.
Wesite Content
15% discount sign-up offer
15% discount sign-up offer
Crocs needed to revitalise their sign-up journey, so I led the re-design of all touch points including landing page, emails and website pop-ups.
Website Design & Build
A streamlined experience for Dell's online resources
A streamlined experience for Dell's online resources
Dell needed an intuitive solution for guiding users to relevant Edge Technology assets based on industry, use case and knowledge level.
Wesite Content
HMD Barça 3210 hero banner
HMD Barça 3210 hero banner
An example promotional hero banner coded for each HMD product launch, with accompanying Product Page, email and supplementary artwork.
Wesite Content
Blacknut Gaming promotion
Blacknut Gaming promotion
HMD partnered with gaming platform Blacknut to promote the launch of the Fusion Gaming Outfit, an accessory for their latest smartphone.
Wesite Content
HEYDUDE brand launch artwork
HEYDUDE brand launch artwork
After acquiring the brand, Crocs needed hero launch content to sit within their category structure, promoting HEYDUDE's introduction.
Website Design & Build
Rolling Barrel Bar website design
Rolling Barrel Bar website design
I built a bespoke WordPress site and expanded the branding for a mobile drinks events company, working around an existing logo and photography.
Wesite Content
15% discount sign-up offer
15% discount sign-up offer
Crocs needed to revitalise their sign-up journey, so I led the re-design of all touch points including landing page, emails and website pop-ups.