BRYAN ANTHONYS ONLINE STORE
THE BRAND
Bryan Anthonys is a brand that empowers, inspires and connects people through meaningful messages that accompany jewelry. Topics range from family and friendship, to self-love and acceptance, as well as pieces that offer comfort and healing during times of loss and heartbreak. Founded on positivity and inspiring a connection to those around us that share similar experiences, it's a truly impactful brand that reminds us we are not alone in our journey.
THE PROJECT
Redesign Bryan Anthonys entire online store, creating a mobile-first design (as 91% of our online sessions are mobile) that enhances the customer shopping experience and increases Average Order Value (AOV) and Conversion Rate (CVR). The previous design was cluttered and outdated, while also not conveying the brand's unique purpose of meaningful messages behind each piece. Components were built with this in mind, while also designing a user interface that elevated the brand aesthetic.
MY ROLE
This project consisted of myself and two developers. We began by defining the project scope and developing timelines and milestones, then we began collaborative work in actual tools. We worked closely in Figma, from research and wireframing to developing hi-fidelity prototypes and extensive usability testing, to overall enhance user experience and brand awareness. Deliverables to be redesigned included the homepage, product cards, filter and sort, product pages and shopping cart, along with a UI toolkit.
PROJECT OUTLINE
OVERVIEW
THE CHALLENGE
With messages that have such a wide range of topics, how can Bryan Anthonys online store convey to a first-time customer what the brand is about? How can it convey what the meaning is behind each piece in an easily digestible way, without the customer having to click into a product page and read the meaning behind each piece?
With a store based on changing inventory and a need to push certain products at any given time, the store needed to be designed with truly customizable components in mind. This way, the content could easily be switched out to keep the site new and fresh in visually different ways — without requiring new development every time. It also needed to communicate to the different types of shoppers on our site and create an experience optimized for all types of customers.
DIFFERENT TYPES OF CUSTOMERS
FIRST-TIME CUSTOMERS
First-time customers likely know little about our brand — they may have been referred by a friend or seen an ad on social media. Clearly conveying that our products come with meaning and the types of categories we cover is essential. The customer should quickly understand that Bryan Anthonys offers gifts for everyone, including themselves.
Homepage that helps them quickly understand our brand
Clear navigation and search
Showcase collections
Customer testimonials
Meaningful reviews
Easily editable cart
RETURNING CUSTOMERS
Returning customers are already familiar with our brand, so frequently updated homepage content is a key focus here. Adding customized related products that offer similar meanings was a main focus here.
Homepage that features new content and products
Showcase collections
Filter/sort menu options
Showcase collections
Customized related products
Meaningful reviews
SPECIFIC-NEED CUSTOMERS
Specific-need customers are most likely shopping for a gift. Adding a filter/sort menu that can allow them to quickly and efficiently find the meaning and recipient they are looking for is key for these customers, as well as clear navigation and search.
Homepage that helps them quickly understand our brand
Clear navigation and search
Filter/sort menu options
Customer testimonials
Customized related products
Quick-to-edit cart
In-cart add-ons, especially gift options
USER FLOW
KEY TAKEAWAY: WHAT SETS BRYAN ANTHONYS APART
The incredible personal stories customers share with Bryan Anthonys
The meaningful messages they give to their customers when they cannot find the words themselves
The authentic brand purpose of positivity, connection and empowerment
None of that was coming across on the homepage
THE HOMEPAGE
PROBLEMS WITH PREVIOUS HOMEPAGE
It was way too long — 90% of customers scrolled less than 50% of the content.
The main hero Call To Action (CTA) was below the fold, even in the context of larger device screens.
The design aesthetic was small, cluttered and confusing — it was unclear what products were sold or that they were accompanied by a meaning.
Copy that accompanied hero banners was out of context and confusing, especially to first-time customers who did not know what the brand is about.
Reviews and press did not showcase any of the powerful, more meaningful testimonials, and instead were surface-level and did not highlight the brand purpose.
Featured items and carousels were repetitive with their subject matter. For example, two different displays of featured items on the same homepage, all featured "Necklaces" "Bracelets" "Rings" "Earrings" as the categories.
Key Takeaway: As a brand based solely off meaning, the way in which content was categorized and displayed lacked creativity and imagination, while also limiting space to tell the story of the brand and the meaning behind the products.
WIREFRAMES
After researching the types of shoppers and examining the problems with the existing homepage design, it was time to begin the wireframes. Components with features that could be turned on and off would customize the content to always feel new, fresh, and exciting – without requiring development to rebuild any components later on.
MAIN FEATURE SLIDESHOW COMPONENT
The hero banners are now optimized for mobile. They are full screen and less cluttered, with CTA and text placement above the fold and overlayed on the main image (vs. a text block and button below the image).
The slideshow feature enables more space to tell the story and meaning behind each piece.
Additionally, the ability to add video also increased room for storytelling, and is particularly useful in the context of large collections with multiple meanings included.
FEATURED ITEMS COMPONENT
Showing every attribute visible for Featured Items Component.
Every part can now be turned on and off to allow customization and flexibility.
Swiping enables free scroll, while clicking the arrow enables click-to-scroll one product across. These features enable the customer to view content in an intuitive and unobtrusive way.
It is difficult to see the jewelry design in the context of on-card images because they are small. Therefore, adding the ability to change the variant default product image solves for this problem while also allowing flexibility of content. In certain instances where the meaning of the piece is conveyed through other pieces of the Featured Items Component, the close-up shots of the jewelry without the meaning card can be displayed instead, highlighting the jewelry design without losing the meaning of the piece.
Similarly, adding inline banners in the midst of a product carousel allows for increased flexibility to tell the story. For example, inline banners can be utilized to highlight overarching collection imagery, imagery with meaning cards, or graphic treatments of power lines from writings.
Tabbed menu, text block, and overarching collection buttons as well as individual tab collection button link options provide additional flexibility of content.
Results in many different ways to tell a story in unique and interesting ways, especially when paired with the Main Hero Slideshow Component.
MULTICOLUMN ITEMS
Similarly with the Featured Items Component, the Multicolumn Component offers many customization options to create different visual hierarchy and design depending on the context.
COLLAPSIBLE REVIEWS COMPONENT
Showing closed Collapsible Review Component (left) and open Collapsible Review Component (right)
New collapsible design offers a way to highlight more meaningful customer stories and longer reviews.
This also introduces a larger initiative, “Strength in Stories,” in which the future purpose will be to provide a platform for customers to connect and provide support for each other.
Pinch and zoom is now enabled on all pages of the site to optimize the mobile experience.
Larger product images replace tiny thumbnail images, so the description on the meaning card photography is legible on a mobile device.
The reviews are now generalized to specific meanings, instead of specific products, which means that the CTAs link to more products. Previously when the CTA could only link to one product, it caused potential issues with availability or a lack of interest in options.
The components built here allowed for the creation of truly customizable content on the homepage, as well as other collection and landing pages.
PRODUCT CARDS + FILTER/SORT
THE CHALLENGE
Aside from the navigation, it was extremely difficult to search by meaning, recipient, and other options like symbol or occasion. With one of the most important parts of the brand revolving around gifting, it was not easy for the customer to quickly navigate to their end goal. Without realistically expecting customers to have the time to read through each description to find what they were looking for, implementing easier ways to filter and sort was essential.
PROBLEMS WITH PREVIOUS PRODUCT CARDS + FILTER/SORT
The top tabbed recommendations were randomly populated and unhelpful in terms of finding what the customer was specifically looking for.
There were no “filter by” options.
The “sort by” options were default Shopify options, limited to sorting by best selling, price low to high, title A-Z — none of which was very helpful to any of the customer types.
The customer could not preview product images or variants.
The swatches and other UI elements felt too “clunky” per client feedback.
NEW DESIGN
PRODUCT CARDS
A quick-view 3 image preview on product cards allows customers to swipe through without entering the product page.
Customers can also switch the variant swatch without entering the product page, which also had a quick-view 3 image preview unique to each individual variant.
Swatches are smaller per client request to make the design less “clunky.” Accessibility issues are resolved by creating large frames around the swatches so the clickable nature is not negatively impacted.
The review stars now match the brand icons in order to increase brand awareness and elevate UI.
NEW DESIGN
FILTER & SORT
Creating a new filter and sort menu with extensive options allows customers to sort by recipient, occasion, meaning and more.
When filter and sort options are selected, they appear at the top bar where they can easily be removed by clicking the X on each filter.
THE PRODUCT PAGE
THE CHALLENGE
Similar to the issues with the filter and sort options, the product pages were not useful in terms of finding other products that share similar topics but have different meanings. An additional layer of complexity is that there are many products that have the same meaning, but offer different jewelry designs as well as home decor products. There needed to be a way to differentiate products that share the same meaning between related product recommendations (“You Might Also Like") that highlight similar topics but different meanings. For example, if a piece was about loss, related product recommendations would be related to hardship and encouragement. Another issue was that related products recommendations were often not accurate to what a customer would want and would often revert to the same products, such as best sellers, but had no relation to the product they were currently viewing. Taking all of these factors into consideration, the end goal was to provide a truly personalized experience for the customer, instead of one simply pretending to be.
PREVIOUS PDP DESIGN
UI aesthetic needed to be elevated.
“You Might Also Like” needed to be expanded to include products with similar topics, rather than only topics that share the same meaning or default product recommendations unrelated to the current product page the customer was viewing.
NEW DESIGN
PRODUCT PAGE
Showcase Collections are now displayed on applicable product pages, in which a product collection with the same description but multiple products appears directly under the product “Information & Fit.”
Customized related product recommendations (“You Might Also Like“) and “Recently Viewed” products appear as tabbed carousels underneath Showcase Collections.
NEW DESIGN
REVIEWS
The UI aesthetic is elevated, including the reviews on product page as well as the pop-in that displays when clicking into the reviews.
THE SHOPPING CART
THE CHALLENGE
The shopping cart is an incredibly intricate and complex part of the online store that holds so many variables that can both negatively and positively impact the customer’s journey. It is essential to create a cart experience that does not overwhelm the customer (so as not to prevent reaching checkout or abandoning cart), while simultaneously increasing the Average Order Value (AOV) through upsells. In this case, it was particularly challenging because there were so many add-ons and upsells and eliminating any of these options was not an option. The cart needed to feel less overwhelming and aesthetically elevated to the same UI as the rest of the online store, increasing the AOV and CVR (without one negatively impacting the other).
PROBLEMS WITH PREVIOUS CART DESIGN
Add-ons and upsells included Mystery Necklace, Shipping Insurance, Fast Pass, Dynamic Discounted Upsells, Personalized Greeting Cards and Gift Packaging.
It was cluttered and overwhelming – customer feedback said they felt bombarded by ads.
It was hard to differentiate a visual hierarchy, making unclear which items were in your cart and which were add-ons and upsells.
The add-ons and upsells were not visible if more than 2 items were in your cart, since they were inside the scrollable cart area underneath the in-cart products.
The cart drawer had limited horizontal space without a benefit for doing so.
The quantity was the only product variable that could be edited within the cart. In order to edit other variables such as finish, color and size, the customer had to go back to the product page and leave the cart.
The thumbnail images were very small and displayed the on-card product shot with meaning. This was not helpful in context of the cart because not only could the customer not read the meaning on the thumbnail, but they could not see a visual representation of the jewelry that was in their cart.
NEW DESIGN
CART PRODUCTS
Larger thumbnails display close-up product photography without on-card images. This shows a visual representation of the jewelry design, as well as the finish and color options selected for quicker comprehension of what items are in the cart. While previously you could see the color and finish in text, having a visual representation of the piece a customer has selected prevents accidental orders and refund requests.
Quick-edit product pop-in allows an easier way to edit quantity, color and size without leaving cart, which helps solve issues with abandoned carts.
The cart is now a full-width screen drawer allowing for more space, less clutter, and a less overwhelming experience with the add-ons and upsells.
Hidden features added —when you click on thumbnail, pulls up description; when you click on quantity, pulls up an editable quantity overlay.
NEW DESIGN
CART ADD ONS
The Shipping Protection upsell needed to be separate from the rest of the add-ons and upsells because the price is dynamic based on the total amount of items in your cart. In order to communicate clearly that this price will change if they add or remove items, it needed to be visible at all times.
Add-ons and upsells are now in an automatic delay carousel, outside of scrollable in-cart items. Automatic delay ensures that a customer sees all of the options in case they are not inclined to swipe through while taking up the least amount of space.
There is now a more distinct differentiation between in-cart products and the add-ons / upsells.
When a customer interacts with the add-ons / upsells carousel, the automatic delay will stop and the carousel becomes swipeable. This prevents customers from becoming annoyed at the animation and gives them control over how long they can view each one.
Clicking on the info icon brings pop-ups with more information for each add-on with the ability to add to cart from both the automatic delay carousel or the pop-up.
NEW DESIGN
DYNAMIC UPSELLS ADD ON
Dynamic upsell offers are the most complex upsell as the offer changes per customer depending on what is in your cart, and they are products offered at a discount vs. a simple add-on / upsell. This upsell needed another pop in window for this feature but that did not feel like it was taking the customer away from the cart.
It still allows all of the quick-editing features of the in-cart products while also adding clear interaction animation to confirm once a customer had added the product to their cart.
CONCLUSION
Completion of this project resulted in immediate calculable improvements as shown in the metrics below.
SALES BY CHANNEL, ONLINE STORE: +21%
ONLINE STORE SESSIONS: +8%
AVERAGE ORDER VALUE: +7%
TOTAL ORDERS: +7%
ONLINE CVR: +1.6%
ADDED TO CART: +1.1%
REACHED CHECKOUT: +40%
MOBILE SESSIONS: +13%
HOMEPAGE SESSIONS: +9%
In addition to the quantifiable metrics above, there were intangible benefits to this project that allowed a more efficient and repeatable process for website updates and modifications in the future.