Leading Shopify Design at Blenders Eyewear
Leading Shopify Design at Blenders Eyewear
Leading Shopify Design at Blenders Eyewear
Leading Shopify Design at Blenders Eyewear
Leading Shopify Design at Blenders Eyewear
Blenders Eyewear is a sunglasses and accessories company founded in 2012 by Chase Fisher. The brand stands for offering stylish, vibrant, and affordable eyewear designed for individuals who embrace an active lifestyle.
Blenders Eyewear is a sunglasses and accessories company founded in 2012 by Chase Fisher. The brand stands for offering stylish, vibrant, and affordable eyewear designed for individuals who embrace an active lifestyle.
visit website
visit website
visit website
Overview
Overview
Blenders Eyewear is the fastest growing sunglass brand from San Diego, CA. The brand was inspired by the colorful and stylish West Coast surf culture. The goal for the project was to optimize user experience, create flawless and intuitive web and mobile user interface for its daily 100k+ visitors at custom Shopify store. Find and craft solutions to simplify shopping and checkout experience while incorporating brand’s voice, increase average Conversion Rate and Average Order Total. Enhance visibility on search engines to grow organic traffic to the site and the products' catalog by creating and implementing descriptive product pages and sections.
Blenders Eyewear is the fastest growing sunglass brand from San Diego, CA. The brand was inspired by the colorful and stylish West Coast surf culture. The goal for the project was to optimize user experience, create flawless and intuitive web and mobile user interface for its daily 100k+ visitors at custom Shopify store. Find and craft solutions to simplify shopping and checkout experience while incorporating brand’s voice, increase average Conversion Rate and Average Order Total. Enhance visibility on search engines to grow organic traffic to the site and the products' catalog by creating and implementing descriptive product pages and sections.
Blenders Eyewear is the fastest growing sunglass brand from San Diego, CA. The brand was inspired by the colorful and stylish West Coast surf culture. The goal for the project was to optimize user experience, create flawless and intuitive web and mobile user interface for its daily 100k+ visitors at custom Shopify store. Find and craft solutions to simplify shopping and checkout experience while incorporating brand’s voice, increase average Conversion Rate and Average Order Total. Enhance visibility on search engines to grow organic traffic to the site and the products' catalog by creating and implementing descriptive product pages and sections.
Challenges
Challenges
There was no existing Design or UI Style System/Guide. Optimizing experience between desktop and mobile browsers. Following the branding guide closely. Incorporating and adding more SEO-friendly content sections and improving overall content structure. Improving product landing pages (PDP) to allow for better upsells that lead to higher order totals. Improving conversion rates for existing and new online customers by offering incentives and easier navigation. Improving homepage by adding categories and specials/features sections. Optimizing website loading speed to minimize bounce rates: faster loading times contribute to a positive user experience and improve search engine rankings.
There was no existing Design or UI Style System/Guide. Optimizing experience between desktop and mobile browsers. Following the branding guide closely. Incorporating and adding more SEO-friendly content sections and improving overall content structure. Improving product landing pages (PDP) to allow for better upsells that lead to higher order totals. Improving conversion rates for existing and new online customers by offering incentives and easier navigation. Improving homepage by adding categories and specials/features sections. Optimizing website loading speed to minimize bounce rates: faster loading times contribute to a positive user experience and improve search engine rankings.
There was no existing Design or UI Style System/Guide. Optimizing experience between desktop and mobile browsers. Following the branding guide closely. Incorporating and adding more SEO-friendly content sections and improving overall content structure. Improving product landing pages (PDP) to allow for better upsells that lead to higher order totals. Improving conversion rates for existing and new online customers by offering incentives and easier navigation. Improving homepage by adding categories and specials/features sections. Optimizing website loading speed to minimize bounce rates: faster loading times contribute to a positive user experience and improve search engine rankings.
responsibilities
responsibilities
responsibilities
+
User research & analytics
+
User testing (A/B testing)
+
Low and high fidelity wireframes
+
Responsive/mobile design
+
UI and UX design
+
Art direction
+
Interactive prototypes
+
Internal Design system
team
team
team
+
Julie Chalker (Product Owner)
J. Chalker (Product Owner)
+
Lillian Medeiros (Ecommerce Manager)
L. Medeiros (Ecommerce Manager)
+
Connor Yaryura (Lead Engineer)
C. Yaryura (Lead Engineer)
+
Roman (Lead UI/Product Designer)
duration
duration
duration
12 months
Project process & flow
Project process & flow
Blenders is renown for its amazing, friendly and fast customer support, so my goal was to use inflow of the shoppers' qualitative feedback additionally to the large amount of historic quantitative data collected from the Shopify, Google Analytics, and heatmapping recordings to outline friction points and areas of opportunity to focus my UX and UI efforts on.
My team has heavily relied on the 2-week long A/B testing sprints before implementing new or updated UI designs and features into the final Shopify store.
Blenders is renown for its amazing, friendly and fast customer support, so my goal was to use inflow of the shoppers' qualitative feedback additionally to the large amount of historic quantitative data collected from the Shopify, Google Analytics, and heatmapping recordings to outline friction points and areas of opportunity to focus my UX and UI efforts on.
My team has heavily relied on the 2-week long A/B testing sprints before implementing new or updated UI designs and features into the final Shopify store.
Design creates culture. Culture shapes values. Values determine the future.
Design creates culture. Culture shapes values. Values determine the future.
Design creates culture. Culture shapes values. Values determine the future.
Design creates culture. Culture shapes values. Values determine the future.
+ Robert L. Peters
Focusing on solutions
Focusing on solutions
_01
Blog & SEO optimization
Blog & SEO optimization
Create improved and well-designed blog sections UX to introduce better quality content for SEO and organic growth. Craft clear UI design and relatable content to improve user experience, reducing bounce rates and signaling content relevance to search engines. Find ways to encourage sharing, boost a site's credibility and SEO rankings.
Create improved and well-designed blog sections UX to introduce better quality content for SEO and organic growth. Craft clear UI design and relatable content to improve user experience, reducing bounce rates and signaling content relevance to search engines. Find ways to encourage sharing, boost a site's credibility and SEO rankings.
_02
Main navigation
Main navigation
The goal for this solution is to make a structured, easy user interface to help shoppers navigate main and sub-categories for the store, get quick exposure to Specials/Featured sections. Reorganize content structure and make the mobile experience for navigating more straightforward and organic to the users. Offer quick access to support.
The goal for this solution is to make a structured, easy user interface to help shoppers navigate main and sub-categories for the store, get quick exposure to Specials/Featured sections. Reorganize content structure and make the mobile experience for navigating more straightforward and organic to the users. Offer quick access to support.
_03
Homepage redesign
Homepage redesign
Reorganize and restructure content on the main page to focus on:
displaying secondary marketing campaigns or specials after the main feature, allowing sections with sub-categories with products, adding improved blog content sections with keywords and engaging content to lead shoppers to posts and eventually to ordering products.
Reorganize and restructure content on the main page to focus on:
displaying secondary marketing campaigns or specials after the main feature, allowing sections with sub-categories with products, adding improved blog content sections with keywords and engaging content to lead shoppers to posts and eventually to ordering products.
_04
Product detail page
Product detail page
Optimize the PDP by increasing upsells and cross-selling, conversion rates and improving checkout experience. Introduce more hierarchy on the page, increase interaction with the product gallery, optimize placement of CTA for adding to cart. Add more ways to offer bundled products to increase Order Total.
Optimize the PDP by increasing upsells and cross-selling, conversion rates and improving checkout experience. Introduce more hierarchy on the page, increase interaction with the product gallery, optimize placement of CTA for adding to cart. Add more ways to offer bundled products to increase Order Total.
User testing & analytics
User testing & analytics
Purchase products on the mobile browser
Purchase products on the mobile browser
Purchase products on the mobile browser
90%
90%
90%
90%
90%
Organic traffic to website
Organic traffic to website
Organic traffic to website
70%
70%
Average users per day
Average users per day
Average users per day
150k
150k
150k
Average order
Average order
Average order
$85
$85
$85
I have used Google Optimize for A/B testing, Shopify Internal Analytics tool for tracking sale conversions after new design launches and Hotjar for tracking and noting friction points for current and past users. This is just a snapshot of few important insights about the shoppers in the past two years of analytics.
I have used Google Optimize for A/B testing, Shopify Internal Analytics tool for tracking sale conversions after new design launches and Hotjar for tracking and noting friction points for current and past users. This is just a snapshot of few important insights about the shoppers in the past two years of analytics.
New Blog
_Design
New Blog
_Design
New Blog
_Design
New Blog
_Design
New Blog
_Design
The 'Perfect Blend'
The 'Perfect Blend'
Search engines value websites that consistently provide valuable and up-to-date information, which can lead to improved search rankings, which is vital for Blenders' SEO growth. Our content team wanted to incorporate engaging articles to attract backlinks and social shares, bolstering the site's authority and credibility in its niche, ultimately boosting SEO performance, outside of paid and promotional channels.
One of the main initiatives for the whole new Blog design came from the strategic business goal for the calendar year: to be ranked and be present on the first page of Google search results related to 'sunglasses' and 'goggle' especially with keywords like 'fashionable', 'active' and 'affordable'. My challenge was to design blog sections and article templates that can be used to showcase fresh and relevant content that favor search engines.
So.. I came up with the concept of the Perfect Blend blog, collection of fun, colorful, educating articles and engaging stories to highlight the awesome free-spirited Blenders' brand. I worked on the whole UX and UI process for the shoppers from homepage, to single articles and landing page templates to showcase and encourage engagement. I came up with 4 various wireframe layouts and used internal feedback from our company plus our marketing vendor to narrow down and finalize the final design that would satisfy our content and business strategy.
Search engines value websites that consistently provide valuable and up-to-date information, which can lead to improved search rankings, which is vital for Blenders' SEO growth. Our content team wanted to incorporate engaging articles to attract backlinks and social shares, bolstering the site's authority and credibility in its niche, ultimately boosting SEO performance, outside of paid and promotional channels.
One of the main initiatives for the whole new Blog design came from the strategic business goal for the calendar year: to be ranked and be present on the first page of Google search results related to 'sunglasses' and 'goggle' especially with keywords like 'fashionable', 'active' and 'affordable'. My challenge was to design blog sections and article templates that can be used to showcase fresh and relevant content that favor search engines.
So.. I came up with the concept of the Perfect Blend blog, collection of fun, colorful, educating articles and engaging stories to highlight the awesome free-spirited Blenders' brand. I worked on the whole UX and UI process for the shoppers from homepage, to single articles and landing page templates to showcase and encourage engagement. I came up with 4 various wireframe layouts and used internal feedback from our company plus our marketing vendor to narrow down and finalize the final design that would satisfy our content and business strategy.
Main Mobile
_Navigation
Main Mobile
_Navigation
Main Mobile
_Navigation
Main Mobile
_Navigation
Main Mobile
_Navigation
Mobile menu redesign to increase conversions
Main navigation is the primary tool for incoming users and existing customers to find the right product or quickly navigate to the category they are most interested in. I have spent a large amount of time creating and testing different design variations and layouts for the mobile menu. The biggest change is introducing the standard hamburger menu (common navigation pattern icon) and shifting it to the side instead of just having separation by gender. Our team has heavily utilized Google Optimize and multi-variate A/B tests to find the best solution that offered the highest conversion rate for both Desktop and Mobile experiences.
Main navigation is the primary tool for incoming users and existing customers to find the right product or quickly navigate to the category they are most interested in. I have spent a large amount of time creating and testing different design variations and layouts for the mobile menu. The biggest change is introducing the standard hamburger menu (common navigation pattern icon) and shifting it to the side instead of just having separation by gender. Our team has heavily utilized Google Optimize and multi-variate A/B tests to find the best solution that offered the highest conversion rate for both Desktop and Mobile experiences.
Mobile menu redesign to increase conversions
Testing mobile menu variants
Testing mobile menu variants
We used more sub tests to pin point to the right treatment of the sub-categories when users try to drill down one level under the main category. In this case, we found that most users prefer to use collapsible navigation by title. I believe it was due to users not liking to scroll up and down when they have to see all items at the same time on their mobile browser, they would rather click on specific category they are most interested in instead. The winning layout was the results of over 300,000 active sections, the potential growth of conversions is around 2.8% which is the increase of over 0.25% from old menu (estimated $2500+ daily sales).
Main Desktop
_Navigation
Main Desktop
_Navigation
Main Desktop
_Navigation
Main Desktop
_Navigation
Main Desktop
_Navigation
Redesigning desktop menu
Redesigning desktop menu
My task here was to enhance user navigation by providing easy access to main product categories, improving the overall user experience. Additionally, a well-crafted desktop menu needs to showcase promotions, highlight new arrivals, or feature best-selling items, thereby boosting sales and conversions. By strategically placing important information within the menu structure, Blenders can effectively capture users' attention and drive them to explore specific sections or products, ultimately leading to increased sales opportunities. The focus here became less on product thumbnails but more on promotional sections in the menu, which proved a successful conversion technique in the next few months.
My task here was to enhance user navigation by providing easy access to main product categories, improving the overall user experience. Additionally, a well-crafted desktop menu needs to showcase promotions, highlight new arrivals, or feature best-selling items, thereby boosting sales and conversions. By strategically placing important information within the menu structure, Blenders can effectively capture users' attention and drive them to explore specific sections or products, ultimately leading to increased sales opportunities. The focus here became less on product thumbnails but more on promotional sections in the menu, which proved a successful conversion technique in the next few months.
Testing desktop designs for highest converting version
Testing desktop designs for highest converting version
I made sure to design a clear and intuitive menu structure to help shoppers quickly find what they're looking for, increasing the likelihood of purchases. My intention was also to improve SEO: properly organize menu with relevant categories and links to make it easier for search engines to crawl and index content. This can contribute to better search visibility and higher rankings for relevant keywords. We also utilized 2-week A/B testing sprints to narrow down the most successful version.
I made sure to design a clear and intuitive menu structure to help shoppers quickly find what they're looking for, increasing the likelihood of purchases. My intention was also to improve SEO: properly organize menu with relevant categories and links to make it easier for search engines to crawl and index content. This can contribute to better search visibility and higher rankings for relevant keywords. We also utilized 2-week A/B testing sprints to narrow down the most successful version.
Homepage
_Design
Homepage
_Design
Homepage
_Design
Homepage
_Design
Homepage
_Design
Homepage products section design
Homepage products section design
Homepage gets on average over 300k daily users, so our team took care making gradual improvements to its sections and optimizing the user experience. Our team's goal was to increase traffic to the product detail pages (PDP) and encourage higher conversion rate. I wanted to introduce more structured sections with better hierarchy to promotional items and also allow for better blog content to improve SEO presence. The original homepage had too many disjointed blocks of content and large amount of products with lower sections getting very little user interaction (Hotjar < 5%).
Homepage gets on average over 300k daily users, so our team took care making gradual improvements to its sections and optimizing the user experience. Our team's goal was to increase traffic to the product detail pages (PDP) and encourage higher conversion rate. I wanted to introduce more structured sections with better hierarchy to promotional items and also allow for better blog content to improve SEO presence. The original homepage had too many disjointed blocks of content and large amount of products with lower sections getting very little user interaction (Hotjar < 5%).
Testing homepage sections
Testing homepage sections
I was very focused on cleaning up the experience above the fold. The large grid of products proved to be ineffective because users rarely interacted with lower sections. In order to improve this, I created Featured Tiles early on the page that also integrated well with marketing campaigns, combining products into the separate tabbed section with 2 rows instead of 4. This proved to be more successful from testing results. The new Featured Categories proved to be highly converting section, users actively wanted to click to find out more about categories (Hotjar > increase 10%) compared to not having this option before. For finding the most successful variant, we always ran 2-week Ab/B testing with over 200,000 impressions per experiment.
I was very focused on cleaning up the experience above the fold. The large grid of products proved to be ineffective because users rarely interacted with lower sections. In order to improve this, I created Featured Tiles early on the page that also integrated well with marketing campaigns, combining products into the separate tabbed section with 2 rows instead of 4. This proved to be more successful from testing results. The new Featured Categories proved to be highly converting section, users actively wanted to click to find out more about categories (Hotjar > increase 10%) compared to not having this option before. For finding the most successful variant, we always ran 2-week Ab/B testing with over 200,000 impressions per experiment.
Product Detail
_Page (PDP)
Product Detail
_Page (PDP)
Product Detail
_Page (PDP)
Product Detail
_Page (PDP)
Product Detail
_Page (PDP)
Improving product detail gallery for higher interactions
Improving product detail gallery for higher interactions
The ‘sticky’ and infinite scrolling gallery is a bad and frustrating pattern for e-commerce. I learned that from my own research and also while looking and analyzing the heatmapping behavioral data and analytics: it had a very low conversion rate (users want to quickly navigate the page without being forced to stay at a single section at a time). Testing results overwhelmingly pointed in the right direction for using static gallery once we started doing A/B comparisons: the static scrollable gallery with large product thumbnails was getting the highest conversions: almost 15% increase in clickable interactions that led to natural grown in sale conversion.
The ‘sticky’ and infinite scrolling gallery is a bad and frustrating pattern for e-commerce. I learned that from my own research and also while looking and analyzing the heatmapping behavioral data and analytics: it had a very low conversion rate (users want to quickly navigate the page without being forced to stay at a single section at a time). Testing results overwhelmingly pointed in the right direction for using static gallery once we started doing A/B comparisons: the static scrollable gallery with large product thumbnails was getting the highest conversions: almost 15% increase in clickable interactions that led to natural grown in sale conversion.
Redesigning product detail description
Redesigning product detail description
After introducing a new gallery section, I wanted to clean up the description section by introducing more hierarchy and structure. The original description was taking too much space and didn’t allow for additional information like the Fit Guide or specs for the product. Welcome ‘chunking.’ Also, one of the most interesting discoveries while testing was when we realized the user interaction (clicks) was around 10% higher when lifestyle image was second after the main product straight shot, my assumption is people were trying to visualize how they might look in that pair of sunglasses when looking at a model's example.
"80% of people read headlines while only 20% read the body copy. This may not seem 100% applicable to e-commerce shops, but it does illustrate how humans read online: we generally don’t." - Copyblogger
After introducing a new gallery section, I wanted to clean up the description section by introducing more hierarchy and structure. The original description was taking too much space and didn’t allow for additional information like the Fit Guide or specs for the product. Welcome ‘chunking.’ Also, one of the most interesting discoveries while testing was when we realized the user interaction (clicks) was around 10% higher when lifestyle image was second after the main product straight shot, my assumption is people were trying to visualize how they might look in that pair of sunglasses when looking at a model's example.
"80% of people read headlines while only 20% read the body copy. This may not seem 100% applicable to e-commerce shops, but it does illustrate how humans read online: we generally don’t." - Copyblogger
Increasing product cross-sells
Increasing product cross-sells
This was a more granular experiment to find the most high-converting option of the cross-sell section. After analyzing the results, we found out that users did not like scrolling more on the PDP page, instead they preferred a more simple option where they are given/presented with three related deal options right away. This was a very interesting discovery for the user behaivor but also explains that users are not willing to spend exra time ‘discovering’ something more on a product they are already sold on.
This was a more granular experiment to find the most high-converting option of the cross-sell section. After analyzing the results, we found out that users did not like scrolling more on the PDP page, instead they preferred a more simple option where they are given/presented with three related deal options right away. This was a very interesting discovery for the user behaivor but also explains that users are not willing to spend exra time ‘discovering’ something more on a product they are already sold on.
Misc Design
_Concepts
Misc Design
_Concepts
Misc Design
_Concepts
Misc Design
_Concepts
Misc Design
_Concepts
Signature series landing
Signature series landing
I designed and built this animated prototype as part of concept to showcase Signature series of Blenders products of the famous atheletes, personalities and celebrities on a single page using Adobe Photoshop and Adobe AfterEffects.
I designed and built this animated prototype as part of concept to showcase Signature series of Blenders products of the famous atheletes, personalities and celebrities on a single page using Adobe Photoshop and Adobe AfterEffects.
Outcome &
_Insights
Outcome &
_Insights
Outcome &
_Insights
Outcome &
_Insights
Outcome &
_Insights
$5,000
$5,000
$5,000
$5,000
$5,000
Additional revenue per day, from all UI/UX improvements
Additional revenue per day, from all UI/UX improvements
+5%
+5%
+5%
+5%
+5%
Increase in daily sales revenue on Product Detail pages
Increase in daily sales revenue on Product Detail pages
3%
3%
3%
3%
3%
Improved Conversion rate from homepage (prev. 2.5%)
Improved Conversion rate from homepage (prev. 2.5%)
+20%
+20%
+20%
+20%
+20%
Overall increase in organic traffic from implemented new Blog content sections
Overall increase in organic traffic from implemented new Blog content sections
50+
50+
50+
50+
50+
Low and high-fidelity design mockups and prototypes
Low and high-fidelity design mockups and prototypes
Design Style Guide*
Design Style Guide*
Design Style Guide*
Design Style Guide*
Design Style Guide*
1.2mil
1.2mil
1.2mil
1.2mil
1.2mil
Over 1 million sessions for A/B testing over the span of 10 months
Over 1 million sessions for A/B testing over the span of 10 months
90%
90%
90%
90%
90%
Of shoppers use mobile device
Of shoppers use mobile device
Success story
Success story
It was an amazing experience to be able to test out design concepts with a high volume of daily users. We used 2-week testing sprints to help us make decisions on most of the new features and sections for the store users. I enjoyed working with our analytics vendor and an internal engineer who helped me program Google Optimize variations. On average, my designs would take a week to complete and 2 weeks to see the live results to come in. This allowed me to pivot quickly on assumptions I made about some improvements or make adjustments withing a month to increase overall conversion rates.
It was an amazing experience to be able to test out design concepts with a high volume of daily users. We used 2-week testing sprints to help us make decisions on most of the new features and sections for the store users. I enjoyed working with our analytics vendor and an internal engineer who helped me program Google Optimize variations. On average, my designs would take a week to complete and 2 weeks to see the live results to come in. This allowed me to pivot quickly on assumptions I made about some improvements or make adjustments withing a month to increase overall conversion rates.
Future improvements
Future improvements
I think, overall, the store could introduce more gamification pattern and promote more points and reward earnings. Also, in the checkout process if you are not registered or logged in user you don’t get the custom experience, even though your behavior should be already recorded. I also see a lot of opportunities in AR technolgy where shoppers could customize and help visualize the product while projecting on their faces or clothing, this might be an option if shopper not sure about color or style of the glasses. I also think introducing subscription model or monthly 'surprise' box option while checking out, similar to Amazon recurring purchases pattern.
I think, overall, the store could introduce more gamification pattern and promote more points and reward earnings. Also, in the checkout process if you are not registered or logged in user you don’t get the custom experience, even though your behavior should be already recorded. I also see a lot of opportunities in AR technolgy where shoppers could customize and help visualize the product while projecting on their faces or clothing, this might be an option if shopper not sure about color or style of the glasses. I also think introducing subscription model or monthly 'surprise' box option while checking out, similar to Amazon recurring purchases pattern.
check out Other projects:
mobile app design, UX, UI, User research, Prototyping, illustrations, game design, web design, project management
mobile app design, UX, UI, User research, Prototyping, illustrations, game design, web design, project management
Are you looking to solve your user experience challenges for a specific project?
.. Or just want to discuss your favorite sci-fi movie, book or show?
Let’s have a chat, a pow-wow, a chin wag, a palaver, or a jibber-jabber! I am open to freelance!
Designed by Human. Inspired by robots.
2023
Are you looking to solve your user experience challenges for a specific project?
.. Or just want to discuss your favorite sci-fi movie, book or show?
Let’s have a chat, a pow-wow, a chin wag, a palaver, or a jibber-jabber! I am open to freelance!
Designed by Human. Inspired by robots.
2023
Are you looking to solve your user experience challenges for a specific project?
.. Or just want to discuss your favorite sci-fi movie, book or show?
Let’s have a chat, a pow-wow, a chin wag, a palaver, or a jibber-jabber! I am open to freelance!
Designed by Human. Inspired by robots.
2023