CLIENT:
Rockabilia
CLIENT:
Rockabilia
CLIENT:
Rockabilia
CLIENT: Rockabilia
METHODS:
Customer Surveys, Journey Mapping, Wireframing, Prototyping, A/B Testing
METHODS:
Customer Surveys, Journey Mapping, Wireframing, Prototyping, A/B Testing
METHODS:
Customer Surveys, Journey Mapping, Wireframing, Prototyping, A/B Testing
METHODS: Customer Surveys, Journey Mapping, Wireframing, Prototyping, A/B Testing
TOOLS: Google Forms, Paper & Pencil, Balsamiq, Adobe XD, HTML/CSS (Sass), Google Analytics
TOOLS:
Google Forms, Pencil & Paper, Balsamiq, Adobe XD, HTML/CSS (Sass), Google Analytics
TOOLS:
Google Forms, Pencil & Paper, Balsamiq, Adobe XD, HTML/CSS (Sass), Google Analytics
TOOLS:
Google Forms, Paper & Pencil, Balsamiq, Adobe XD, HTML/CSS (Sass), Google Analytics
TOOLS:
Google Forms, Paper & Pencil, Balsamiq, Adobe XD, HTML/CSS (Sass), Google Analytics
TOOLS USED: Pencil & Paper, Balsemiq, Axure
SUMMARY:
Rockabilia is an e-commerce company that offers the widest range of licensed music merchandise available online worldwide. Although traditionally they have specialized in offerings from hard-rock and hardcore music acts, they have a continuously expanding catalog that has grown to encompass a wide variety of musical genres. This wide range of products offers interesting opportunities, as well as unique challenges.
An upcoming e-commerce re-platform and website redesign were identified as a convenient time to assess and improve the first-time customer shopping experience. My approach was to perform research to get feedback from customers, convert those findings into a journey map that identified customer pain points, and finally to redesign the email welcome series and homepage in order to improve the initial buying experience.
SUMMARY:
Rockabilia is an e-commerce company that offers the widest range of licensed music merchandise available online worldwide. Although traditionally they have specialized in offerings from hard-rock and hardcore music acts, they have a continuously expanding catalog that has grown to encompass a wide variety of musical genres. This wide range of products offers interesting opportunities, as well as unique challenges.
An upcoming e-commerce re-platform and website redesign were identified as a convenient time to assess and improve the first-time customer shopping experience. My approach was to perform research to get feedback from customers, convert those findings into a journey map that identified customer pain points, and finally to redesign the email welcome series and homepage in order to improve the initial buying experience.
SUMMARY:
Rockabilia is an e-commerce company that offers the widest range of licensed music merchandise available online worldwide. Although traditionally they have specialized in offerings from hard-rock and hardcore music acts, they have a continuously expanding catalog that has grown to encompass a wide variety of musical genres. This wide range of products offers interesting opportunities, as well as unique challenges.
An upcoming e-commerce re-platform and website redesign were identified as a convenient time to assess and improve the first-time customer shopping experience. My approach was to perform research to get feedback from customers, convert those findings into a journey map that identified customer pain points, and finally to redesign the email welcome series and homepage in order to improve the initial buying experience.
SUMMARY:
Rockabilia is an e-commerce company that offers the widest range of licensed music merchandise available online worldwide. Although traditionally they have specialized in offerings from hard-rock and hardcore music acts, they have a continuously expanding catalog that has grown to encompass a wide variety of musical genres. This wide range of products offers interesting opportunities, as well as unique challenges.
An upcoming e-commerce re-platform and website redesign were identified as a convenient time to assess and improve the first-time customer shopping experience. My approach was to perform research to get feedback from customers, convert those findings into a journey map that identified customer pain points, and finally to redesign the email welcome series and homepage in order to improve the initial buying experience.
RESEARCH
RESEARCH
RESEARCH
RESEARCH
In order to gain a better understanding of which areas of the initial buying experience had the most room for improvement, I created an opt-in email survey that first-time customers were sent 3 days after their initial purchase was delivered. I also interviewed the customer service team.
The data points were first organized into an affinity diagram, then synthesized to create a customer journey and map.
RESEARCH APPROACH:
In order to gain a better understanding of which areas of the initial buying experience had the most room for improvement, I created an opt-in email survey that first-time customers were sent 3 days after their initial purchase was delivered. I also interviewed the customer service team.
The data points were first organized into an affinity diagram, then synthesized to create a customer journey and map.
RESEARCH APPROACH:
In order to gain a better understanding of which areas of the initial buying experience had the most room for improvement, I created an opt-in email survey that first-time customers were sent 3 days after their initial purchase was delivered. I also interviewed the customer service team.
The data points were first organized into an affinity diagram, then synthesized to create a customer journey and map.
RESEARCH APPROACH:
In order to gain a better understanding of which areas of the initial buying experience had the most room for improvement, I created an opt-in email survey that first-time customers were sent 3 days after their initial purchase was delivered. I also interviewed the customer service team.
The data points were first organized into an affinity diagram, then synthesized to create a customer journey and map.
First-time customer survey
First-time customer journey/empathy map
First-time customer journey/empathy map
First-time customer journey/empathy map
The journey map identified two areas of the purchase process creating pain points for new customers: homepage layout and navigation as well as the email welcome series. These findings were supported by examining bounce rates in Google Analytics and marketing email open, click and revenue statistics.
RESEARCH ANALYSIS:
This document identified two areas of the purchase process creating pain points for new customers: homepage layout and navigation as well as the email welcome series. These findings were supported by examining bounce rates in Google Analytics and marketing email open, click and revenue statistics.
RESEARCH ANALYSIS:
This document identified two areas of the purchase process creating pain points for new customers: homepage layout and navigation as well as the email welcome series. These findings were supported by examining bounce rates in Google Analytics and marketing email open, click and revenue statistics.
RESEARCH ANALYSIS:
This document identified two areas of the purchase process creating pain points for new customers: homepage layout and navigation as well as the email welcome series. These findings were supported by examining bounce rates in Google Analytics and marketing email open, click and revenue statistics.
HOMEPAGE PROBLEM STATEMENT:
Rockabilia's homepage had too many elements and was overwhelming customers with too many options. In addition, navigation elements were confusing customers having trouble finding the items they were looking for.
PROBLEM STATEMENT:
After examining website analytics, online reviews, and customer service team feedback it was evident that the shopping experience for first-time purchasers needed improvement. A planned ecommerce re-platform and website redesign was identified as an opportune time to do so.
HOMEPAGE PROBLEM STATEMENT:
Rockabilia's homepage had too many elements and was overwhelming customers with too many options. In addition, navigation elements were confusing customers who were having trouble finding the items they were looking for.
HOMEPAGE PROBLEM STATEMENT:
Rockabilia's homepage had too many elements and was overwhelming customers with too many options. In addition, navigation elements were confusing customers who were having trouble finding the items they were looking for.
Solutions to these problems were combined with other current business objectives to create a set of goals for improving the homepage.
Solutions to these problems were combined with other current business objectives to create a set of goals for improving the homepage.
Solutions to these problems were combined with other current business objectives to create a set of goals for improving the homepage.
Solutions to these problems were combined with other current business objectives to create a set of goals for improving the homepage.
Solutions to these problems were combined with other current business objectives to create a set of goals for improving the homepage.
HOMEPAGE PROJECT GOALS:
HOMEPAGE PROJECT GOALS:
HOMEPAGE PROJECT GOALS:
HOMEPAGE PROJECT GOALS:
Simplify in order to create more engaging entrances to conversion funnels
Simplify in order to create more engaging entrances to conversion funnels
Simplify in order to create more engaging entrances to conversion funnels
Streamline header and footer navigation elements.
Augment layout to aid cross-promotion of social media content
Augment layout to aid cross-promotion of social media content
Augment layout to aid cross-promotion of social media content
Adjust box dimensions to aid reuse of social media content.
Improve sign-up modal effectiveness by adding value proposition and pairing it with engaging photos and on-brand copy
Improve sign-up modal effectiveness by adding value proposition and pairing it with engaging photos and on-brand copy
Improve sign-up modal effectiveness by adding value proposition and pairing it with engaging photos and on-brand copy
Enhance sign-up modals by pairing high impact photos with on-brand copy.
Streamline header and footer navigation elements
Streamline header and footer navigation elements
Streamline header and footer navigation elements
Simplify hopepage, yielding fewer but more engaging elements.
Implement customer Instagram photo-feed to validate the brand
Implement customer Instagram feed to validate brand.
Implement customer Instagram feed to validate brand.
Implement customer Instagram feed to validate brand.
HOMEPAGE DESIGN
HOMEPAGE DESIGN
HOMEPAGE DESIGN
New homepage sketches
New homepage sketches
METHODS:
Hand-drawn sketches were used to explore a variety of layout possibilities. These wireframes were then evaluated in terms that would be most effective at accomplishing project goals. Once an optimal solution was identified, hi-fidelity prototypes were produced and handed off to developers.
METHODS:
Hand-drawn sketches were used to explore a variety of layout possibilities. These wireframes were then evaluated in terms which would be most effective at accomplishing project goals. Once an optimal solution was identified, hi-fidelity prototypes were produced and handed off to developers.
METHODS:
Hand-drawn sketches were used to explore a variety of layout possibilities. These wireframes were then evaluated in terms that would be most effective at accomplishing project goals. Once an optimal solution was identified, hi-fidelity prototypes were produced and handed off to developers.
METHODS:
Hand-drawn sketches were used to explore a variety of layout possibilities. These wireframes were then evaluated in terms which would be most effective at accomplishing project goals. Once an optimal solution was identified, hi-fidelity prototypes were produced and handed off to developers.
New modal prototypes
New modal prototypes
New homepage prototype
New homepage prototype
HOMEPAGE TESTING
HOMEPAGE TESTING
HOMEPAGE TESTING
FINE-TUNING:
After the new homepage update had been in place for a month, I compared relevant KPIs to the same month the previous year using our CRM software and Google Analytics. The results were:
PROBLEM STATEMENT:
After examining website analytics, online reviews, and customer service team feedback it was evident that the shopping experience for first-time purchasers needed improvement. A planned ecommerce re-platform and website redesign was identified as an opportune time to do so.
HOMEPAGE PROBLEM STATEMENT:
Rockabilia's homepage had too many elements and was overwhelming customers with too many options. In addition, navigation elements were confusing customers who were having trouble finding the items they were looking for.
HOMEPAGE PROBLEM STATEMENT:
Rockabilia's homepage had too many elements and was overwhelming customers with too many options. In addition, navigation elements were confusing customers who were having trouble finding the items they were looking for.
RESULTS:
RESULTS:
RESULTS:
Homepage bounce rates were reduced by 22%.
Homepage bounce rates were reduced by 22%.
Homepage bounce rates were reduced by 22%.
Homepage bounce rates were reduced by 22%.
Email subscriber acquisition rates tripled from 1.5% to 4.5%.
Email subscriber acquisition rates tripled from 1.5% to 4.5%.
Email subscriber acquisition rates tripled from 1.5% to 4.5%.
Email subscriber acquisition rates more than doubled, from 1.5% to 3.8%.
EMAIL GOALS
EMAIL GOALS
EMAIL GOALS
EMAIL WELCOME SERIES PROJECT GOALS:
EMAIL WELCOME SERIES PROJECT GOALS:
EMAIL WELCOME SERIES PROJECT GOALS:
EMAIL WELCOME SERIES PROJECT GOALS:
Create a universal, on-brand look to appeal to customers of all genres
Create a universal, on-brand look to appeal to customers of all genres
Create a universal, on-brand look to appeal to customers of all genres
Create a universal, on-brand look to appeal to customers of all genres
Implement trackable, user-specific, coupon codes that can be easily applied with a single click
Implement trackable, user-specific, coupon codes that can be easily applied with a single click
Implement trackable, user-specific, coupon codes that can be easily applied with a single click
Implement trackable, user-specific, coupon codes that can be easily applied with a single click
Drive awareness and boost subscription rates of social media channels
Drive awareness and boost subscription rates of social media channels
Drive awareness and boost subscription rates of social media channels
Drive awareness and boost subscription rates of social media channels
Validate brand as vendor of only 100% licensed merchandise
Validate brand as vendor of only 100% licensed merchandise
Validate brand as vendor of only 100% licensed merchandise
Validate brand as vendor of only 100% licensed merchandise
Introduce product recommendation engine at a time when customers browse and purchase data has been recorded
Introduce product recommendation engine at a time when customers browse and purchase data has been recorded
Introduce product recommendation engine at a time when customers browse and purchase data has been recorded
Introduce product recommendation engine at a time when customers browse and purchase data has been recorded
EMAIL DESIGN
EMAIL DESIGN
EMAIL DESIGN
New email welcome series wireframes
New email welcome series wireframes
New email welcome series wireframes
METHODS:
The first step was to create low-fidelity wireframes in Balsamiq that would not overwhelm new customers with a myriad of choices, but instead allow them to ease their way into finding merchandise that suited their preferences, from their favorite bands.
Once we were happy with the content, I wrote all HTML/CSS and Javascript necessary to create the emails that would match the content and layout of the mockups as closely as possible.
On the desktop version, I used Javascript for rollover animations for links and buttons to micro-interactions that would make it clear to customers which elements were clickable.
METHODS:
The first step was to create low-fidelity wireframes in Balsamiq that would not overwhelm new customers with a myriad of choices, but instead allow them to ease their way into finding merchandise that suited their preferences, from their favorite bands.
Once we were happy with the content, I wrote all HTML/CSS and Javascript necessary to create the emails that would match the content and layout of the mockups as closely as possible.
On the desktop version, I used Javascript for rollover animations for links and buttons to micro-interactions that would make it clear to customers which elements were clickable.
METHODS:
The first step was to create low-fidelity wireframes in Balsamiq that would not overwhelm new customers with a myriad of choices, but instead allow them to ease their way into finding merchandise that suited their preferences, from their favorite bands.
Once we were happy with the content, I wrote all HTML/CSS and Javascript necessary to create the emails that would match the content and layout of the mockups as closely as possible.
On the desktop version, I used Javascript for rollover animations for links and buttons to create micro-interactions that would make it clear to customers which elements were clickable.
METHODS:
The first step was to create low-fidelity wireframes in Balsamiq that would not overwhelm new customers with a myriad of choices, but instead allow them to ease their way into finding merchandise that suited their preferences, from their favorite bands.
Once we were happy with the content, I wrote all HTML/CSS and Javascript necessary to create the emails that would match the content and layout of the mockups as closely as possible.
On the desktop version, I used Javascript for rollover animations for links and buttons to micro-interactions that would make it clear to customers which elements were clickable.
METHODS:
The first step was to create low-fidelity wireframes in Balsamiq that would not overwhelm new customers with a myriad of choices, but instead allow them to ease their way into finding merchandise that suited their preferences, from their favorite bands.
Once we were happy with the content, I wrote the all HTML/CSS and Javascript necessary to create the emails that would match the content and layout of the mockups as closely as possible, while providing a bit more visual flair.
On the desktop version, I used Javascript for rollover animations for links and buttons to create micro-interactions that would make it clear to customers which elements were navigable.
NOTE:
Because HTML emails require in-line CSS, which can be tedious to make changes to and maintain, I opted for a production workflow that utilized separate SASS stylesheets and variables to make the color, font, and layout changes throughout an entire email in quickly.
In order to output the final HTML/CSS, Grunt task-runner was utilized to convert the external SASS stylesheets to inline CSS, compress images, convert local paths to distribution paths, and check for errors.
Although it would have been over-kill for only 3 emails, as intended, this system continued to pay dividends going forward, both in terms of production speed and flexibility as it was used for all marketing emails.
NOTE:
Because HTML emails require in-line CSS, which can be tedious to make changes to and maintain, I opted for a production workflow that utilized separate SASS stylesheets and variables to make the color, font, and layout changes throughout an entire email in quickly.
In order to output the final HTML/CSS, Grunt task-runner was utilized to convert the external SASS stylesheets to inline CSS, compress images, convert local paths to distribution paths, and check for errors.
Although it would have been over-kill for only 3 emails, as intended, this system continued to pay dividends going forward, both in terms of production speed and flexibility as it was used for all marketing emails.
NOTE:
Because HTML emails require in-line CSS, which can be tedious to make changes to and maintain, I opted for a production workflow that utilized separate SASS stylesheets and variables to make the color, font, and layout changes throughout an entire email in quickly.
In order to output the final HTML/CSS, Grunt task-runner was utilized to convert the external SASS stylesheets to inline CSS, compress images, convert local paths to distribution paths, and check for errors.
Although it would have been over-kill for only 3 emails, as intended, this system continued to pay dividends going forward, both in terms of production speed and flexibility as it was used for all marketing emails.
NOTE:
Because HTML emails require in-line CSS, which can be tedious to make changes to and maintain, I opted for a production workflow that utilized separate SASS stylesheets and variables to make the color, font, and layout changes throughout an entire email in quickly.
In order to output the final HTML/CSS, Grunt task-runner was utilized to convert the external SASS stylesheets to inline CSS, compress images, convert local paths to distribution paths, and check for errors.
Although it would have been over-kill for only 3 emails, as intended, this system continued to pay dividends going forward, both in terms of production speed and flexibility as it was used for all marketing emails.
New email welcome series prototypes
New email welcome series prototypes
EMAIL TESTING
EMAIL TESTING
EMAIL TESTING
FINE-TUNING:
Once the emails were built, multivariate testing was used to optimize a cadence and timing of delivery in order to maximized open, read, and click-rates.
FINE-TUNING:
Once the emails were built, multivariate testing was used to optimize a cadence and timing of delivery in order to maximized open, read, and click-rates.
FINE-TUNING:
Once the emails were built, multivariate testing was used to optimize a cadence and timing of delivery in order to maximized open, read, and click-rates.
FINE-TUNING:
Once the emails were built, multivariate testing was used to optimize a cadence and timing of delivery in order to maximized open, read, and click-rates.
FINE-TUNING:
Once the emails were built, multivariate testing was used to established and optimize a cadence of delivery timing that maximized open, read, and click-rates.
RESULTS:
RESULTS:
RESULTS:
RESULTS:
Email welcome series click-through rates rose by 30%.
Email welcome series click-through rates rose by 30%.
Email welcome series click-through rates rose by 30%.
Email welcome series click-through rates were increased by 30%.
Email welcome series revenue increased by 45%.
Email welcome series revenue increased by 45%.
Email welcome series revenue increased by 45%.
Email welcome series revenue increased by 45%.
Social media signup rate increased by 12%.
Social media signup rate increased by 12%.
Social media signup rate increased by 12%.
Social media signup rate increased by 12%.
NEXT STEPS
NEXT STEPS
NEXT STEPS
LESSONS LEARNED:
Although the Customer Journey Map proved a helpful tool in identifying opportunities to improve the first-time customer shopping experience, the "one size fits all" approach that was taken certainly has its drawbacks. For the next round, it would be instructive to create separate personas, ranging from a gift-giver to a hardcore music fan, to see how Rockabilia is meeting each of its diverse range of customer's needs and to identify pain points unique to certain types of users. It also would have been advisable to create a future-state journey map to help visualize process improvements.
The other lesson I learned was that I was all-in for user experience design. Shortly thereafter I enrolled in the UX program at Prime Digital Academy.
LESSONS LEARNED:
Although the Customer Journey/Empathy Map proved a helpful tool in identifying opportunities to improve the first-time customer shopping experience, the "one size fits all" approach that was taken certainly has its drawbacks.
For the next round, it would be instructive to create separate personas, ranging from a gift-giver to a hardcore music fan, to see how Rockabilia is meeting each of its diverse range of customer's needs and to identify pain points unique to certain types of users.
LESSONS LEARNED:
Although the Customer Journey/Empathy Map proved a helpful tool in identifying opportunities to improve the first-time customer shopping experience, the "one size fits all" approach that was taken certainly has its drawbacks.
For the next round, it would be instructive to create separate personas, ranging from a gift-giver to a hardcore music fan, to see how Rockabilia is meeting each of its diverse range of customer's needs and to identify pain points unique to certain types of users.
LESSONS LEARNED:
Although the Customer Journey/Empathy Map proved a helpful tool in identifying opportunities to improve the first-time customer shopping experience, the "one size fits all" approach that was taken certainly has its drawbacks.
For the next round, it would be instructive to create separate personas, ranging from a gift-giver to a hardcore music fan, to see how Rockabilia is meeting each of its diverse range of customer's needs and to identify pain points unique to certain types of users.
OTHER WORK: