Back
e-commerce replatform
Role
Internal Design Lead
Team
Internal project team, Biglight and Astound Digital
Hobbycraft wished to migrate the e-commerce website to Salesforce Commerce Cloud, integrating the UK’s largest craft guide resource with product and implementing strategic personalisation for customers. Working alongside Biglight to design and Astound Digital to implement, I steered the UX/UI using a wealth of insight, and led the migration of all non-product content.
- E-commerce revenue +20% YOY
- Record-breaking £1mil+ revenue week during Black Friday
- 1,500+ pieces of crafting content integrated seamlessly alongside product
finished outcomes
problem statement
Legacy software meant that merchandising the e-commerce site was laborious and code-heavy, and with more than 23,000 products and 1,500 craft guides, browsing was an overwhelming experience for customers. A more powerful, flexible and feature-rich platform was required to meet evolving customer expectation around experience, using data insights to deliver ideas and products that cater to individual interests.
research
Initial analysis
Working with the team at Biglight, we set out to understand why our customers craft, what content they find useful and where they look for it, allowing the creation of a content strategy and framework. We used key insights gained from yeas of web traffic data via Google Analytics and Contentsquare, and ran customer focus groups to gather both quantitative and qualitative data on the existing experience. This helped us understand what we needed to protect or keep, whilst giving us the ability to identify opportunities to meet customer needs in a different way that wasn’t possible on the existing site.
solution
Give craft ideas the same weighting and experience as products, allowing them to be searchable and appear in both product lister and detail pages.
Using Contentsquare to analyse click rate of existing site homepage
design and implementation
Biglight UX/UI design collaboration
I worked closely with the UX and UI Designers at Biglight to produce a design system in Figma to support the integration of ideas and products. We added graphic elements that could be placed in components to reflect the playful nature of crafting, whilst adding necessary anchoring and consistency throughout the site.
Astound Digital implementation collaboration
Working remotely with our development team in Ukraine, I managed the fine-tuning of Salesforce Commerce Cloud components that would allow my team to easily merchandise the site. Agility was particularly important as we updated key assets on a daily basis in keeping with the fast-paced campaign trading calendar. We still required flexibility to be able to build standalone content pages within the constraints of the new design system.
Designs in Figma with dev notes created to ease implementation across teams
Ongoing feedback provided to the Biglight team between design reviews
migration
Non-product content
All customer information pages were rebuilt using our new components in Salesforce Commerce Cloud. This included key pages such as delivery information and contacting customer support. I took the opportunity to review all experiences to ensure information was communicated in a clear and consistent way across the site.
Examples of non-product content pages redesigned to incorporate the new design guidelines
Craft ideas
The task of migrating the Ideas blog was gargantuan. With over 1,500 posts to rebuild, I managed a team of ~20 colleagues who undertook this workload out of hours. Each piece of content was rebuilt using new components in Salesforce Commerce Cloud, with an additional requirement of tagging live product to ensure integration.
An Idea post with add to basket functionality for required products
business as usual
Design guidelines
I owned the integration of the new look and feel across all digital touch points. I distilled the complex design system into practical and transferrable set of design guidelines that could be shared across Digital and Marketing teams, and ran a series of workshops introducing these guidelines to open up conversation. I worked closely with contributors to develop asset libraries to utilise within Adobe software, Canva and RedEye email marketing platform for consistency.
Coaching
I ran regular drop-in sessions for team members to consult and sign off assets that utilised the new design guidelines, fostering a culture of sharing and development that enabled all team members to feel that they had voice and ownership of the digital creative direction.
Homepage and category asset examples, utilising badges and graphic elements.
Accessibility guidelines, displaying approved colour contrast combinations and touch target areas.
continuous improvement
Internal UX/UI design
All customer information pages were rebuilt using our new components in Salesforce Commerce Cloud. This included key pages such as delivery information and contacting customer support. I took the opportunity to review all experiences to ensure information was communicated in a clear and consistent way across the site.
Examples of A/B test designs: Guided selling, Product/Ideas switch, Social proof, Sticky add to basket
Back
e-commerce replatform
Role
Internal Design Lead
Team
Internal project team, Biglight and Astound Digital
Hobbycraft wished to migrate the e-commerce website to Salesforce Commerce Cloud, integrating the UK’s largest craft guide resource with product and implementing strategic personalisation for customers. Working alongside Biglight to design and Astound Digital to implement, I steered the UX/UI using a wealth of insight, and led the migration of all non-product content.
- E-commerce revenue +20% YOY
- Record-breaking £1mil+ revenue week during Black Friday
- 1,500+ pieces of crafting content integrated seamlessly alongside product
finished outcomes
problem statement
Legacy software meant that merchandising the e-commerce site was laborious and code-heavy, and with more than 23,000 products and 1,500 craft guides, browsing was an overwhelming experience for customers. A more powerful, flexible and feature-rich platform was required to meet evolving customer expectation around experience, using data insights to deliver ideas and products that cater to individual interests.
research
Initial analysis
Working with the team at Biglight, we set out to understand why our customers craft, what content they find useful and where they look for it, allowing the creation of a content strategy and framework. We used key insights gained from yeas of web traffic data via Google Analytics and Contentsquare, and ran customer focus groups to gather both quantitative and qualitative data on the existing experience. This helped us understand what we needed to protect or keep, whilst giving us the ability to identify opportunities to meet customer needs in a different way that wasn’t possible on the existing site.
solution
Give craft ideas the same weighting and experience as products, allowing them to be searchable and appear in both product lister and detail pages.
Using Contentsquare to analyse click rate of existing site homepage
design and implementation
Biglight UX/UI design collaboration
I worked closely with the UX and UI Designers at Biglight to produce a design system in Figma to support the integration of ideas and products. We added graphic elements that could be placed in components to reflect the playful nature of crafting, whilst adding necessary anchoring and consistency throughout the site.
Astound Digital implementation collaboration
Working remotely with our development team in Ukraine, I managed the fine-tuning of Salesforce Commerce Cloud components that would allow my team to easily merchandise the site. Agility was particularly important as we updated key assets on a daily basis in keeping with the fast-paced campaign trading calendar. We still required flexibility to be able to build standalone content pages within the constraints of the new design system.
Designs in Figma with dev notes created to ease implementation across teams
Ongoing feedback provided to the Biglight team between design reviews
migration
Non-product content
All customer information pages were rebuilt using our new components in Salesforce Commerce Cloud. This included key pages such as delivery information and contacting customer support. I took the opportunity to review all experiences to ensure information was communicated in a clear and consistent way across the site.
Examples of non-product content pages redesigned to incorporate the new design guidelines
Craft ideas
The task of migrating the Ideas blog was gargantuan. With over 1,500 posts to rebuild, I managed a team of ~20 colleagues who undertook this workload out of hours. Each piece of content was rebuilt using new components in Salesforce Commerce Cloud, with an additional requirement of tagging live product to ensure integration.
An Idea post with add to basket functionality for required products
business as usual
Design guidelines
I owned the integration of the new look and feel across all digital touch points. I distilled the complex design system into practical and transferrable set of design guidelines that could be shared across Digital and Marketing teams, and ran a series of workshops introducing these guidelines to open up conversation. I worked closely with contributors to develop asset libraries to utilise within Adobe software, Canva and RedEye email marketing platform for consistency.
Coaching
I ran regular drop-in sessions for team members to consult and sign off assets that utilised the new design guidelines, fostering a culture of sharing and development that enabled all team members to feel that they had voice and ownership of the digital creative direction.
Homepage and category asset examples, utilising badges and graphic elements.
Accessibility guidelines, displaying approved colour contrast combinations and touch target areas.
continuous improvement
Internal UX/UI design
All customer information pages were rebuilt using our new components in Salesforce Commerce Cloud. This included key pages such as delivery information and contacting customer support. I took the opportunity to review all experiences to ensure information was communicated in a clear and consistent way across the site.
Examples of A/B test designs: Guided selling, Product/Ideas switch, Social proof, Sticky add to basket
Back
e-commerce replatform
Role
Internal Design Lead
Team
Internal project team, Biglight and Astound Digital
Hobbycraft wished to migrate the e-commerce website to Salesforce Commerce Cloud, integrating the UK’s largest craft guide resource with product and implementing strategic personalisation for customers. Working alongside Biglight to design and Astound Digital to implement, I steered the UX/UI using a wealth of insight, and led the migration of all non-product content.
- E-commerce revenue +20% YOY
- Record-breaking £1mil+ revenue week during Black Friday
- 1,500+ pieces of crafting content integrated seamlessly alongside product
finished outcomes
problem statement
Legacy software meant that merchandising the e-commerce site was laborious and code-heavy, and with more than 23,000 products and 1,500 craft guides, browsing was an overwhelming experience for customers. A more powerful, flexible and feature-rich platform was required to meet evolving customer expectation around experience, using data insights to deliver ideas and products that cater to individual interests.
research
Initial analysis
Working with the team at Biglight, we set out to understand why our customers craft, what content they find useful and where they look for it, allowing the creation of a content strategy and framework. We used key insights gained from yeas of web traffic data via Google Analytics and Contentsquare, and ran customer focus groups to gather both quantitative and qualitative data on the existing experience. This helped us understand what we needed to protect or keep, whilst giving us the ability to identify opportunities to meet customer needs in a different way that wasn’t possible on the existing site.
solution
Give craft ideas the same weighting and experience as products, allowing them to be searchable and appear in both product lister and detail pages.
Using Contentsquare to analyse click rate of existing site homepage
design and implementation
Biglight UX/UI design collaboration
I worked closely with the UX and UI Designers at Biglight to produce a design system in Figma to support the integration of ideas and products. We added graphic elements that could be placed in components to reflect the playful nature of crafting, whilst adding necessary anchoring and consistency throughout the site.
Astound Digital implementation collaboration
Working remotely with our development team in Ukraine, I managed the fine-tuning of Salesforce Commerce Cloud components that would allow my team to easily merchandise the site. Agility was particularly important as we updated key assets on a daily basis in keeping with the fast-paced campaign trading calendar. We still required flexibility to be able to build standalone content pages within the constraints of the new design system.
Designs in Figma with dev notes created to ease implementation across teams
Ongoing feedback provided to the Biglight team between design reviews
migration
Non-product content
All customer information pages were rebuilt using our new components in Salesforce Commerce Cloud. This included key pages such as delivery information and contacting customer support. I took the opportunity to review all experiences to ensure information was communicated in a clear and consistent way across the site.
Examples of non-product content pages redesigned to incorporate the new design guidelines
Craft ideas
The task of migrating the Ideas blog was gargantuan. With over 1,500 posts to rebuild, I managed a team of ~20 colleagues who undertook this workload out of hours. Each piece of content was rebuilt using new components in Salesforce Commerce Cloud, with an additional requirement of tagging live product to ensure integration.
An Idea post with add to basket functionality for required products
business as usual
Design guidelines
I owned the integration of the new look and feel across all digital touch points. I distilled the complex design system into practical and transferrable set of design guidelines that could be shared across Digital and Marketing teams, and ran a series of workshops introducing these guidelines to open up conversation. I worked closely with contributors to develop asset libraries to utilise within Adobe software, Canva and RedEye email marketing platform for consistency.
Coaching
I ran regular drop-in sessions for team members to consult and sign off assets that utilised the new design guidelines, fostering a culture of sharing and development that enabled all team members to feel that they had voice and ownership of the digital creative direction.
Accessibility guidelines, displaying approved colour contrast combinations and touch target areas.
Homepage and category asset examples, utilising badges and graphic elements.
continuous improvement
Internal UX/UI design
Once in a post-launch continuous improvement cycle, my role grew to incorporate internal UX/UI design. With the newly appointed internal Product Owner and Optimisation Manager, we collaborated with Astound Digital using Jira in Agile to implement improvements for all device types. These changes were informed by session replays, customer feedback from A/B testing via Qubit (now Coveo), user testing and active surveys on key journeys.
Examples of A/B test designs: Guided selling, Product/Ideas switch, Social proof, Sticky add to basket