rockabiliaCover

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

fabricBottom5

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. 

rockabiliaSurvey

First-time customer survey

rockabiliaJourneyEmpathyMap2

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:

funnel

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.

box

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.

discount

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. 

nav

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.

itemDetails

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

homepageSketch3up

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.

modal2up2

New modal prototypes

New modal prototypes

ipadAfter2

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:

bounceRate

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%.

aquisitionRate

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:

goal

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

goal

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

goal

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

goal

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

goal

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

lofiWireframes

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.

phones3upALTb

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:

clickRate

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%.

money

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%.

newUser

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:

aboutMe
emailMe
CV