Responsibilities
• User research and discovery
• Select Shopify theme
• Add custom blocks and unique features
• Pattern library
• UX/UI design
• Quality assurance testing
Project Context
• Shopify 2.0 build created at Rightpoint
• Working with front-end devs and lead
product designer
• 2022
Tools
• Adobe XD
• Adobe Illustrator
• Adobe Photoshop
• Shopify admin
• DoneDone (QA bug tracking)
Overview
Boppy approached us seeking a change in commerce providers, a site refresh, and to add new features that would help boost conversion rates. This project was designed and developed for Shopify within the Shopify admin. Maintaining the Shopify 2.0 features across the entire site was crucial for enabling seamless content updates.
I was responsible for defining the site's visual identity,
adding missing features, and designing a distinct
homepage and custom healthcare pages.
In order to improve accessibility and maintain brand consistency, I introduced fresh concepts for the base styles of the site. During different sprints as well as launch time, I was in charge of quality assurance testing for all of the designs I created.
This overall experience provided me with the opportunity to unleash my creative instincts while maintaining UX best practices.
Homepage
The design incorporates elements from the premium theme, custom styles derived from the pattern library, and unique custom blocks.
The overarching aim of the design was to create a sleek, modern aesthetic that resonated with the brand's core values of comfort, safety, and trust, which are reflected in the products they offer.
Micro-Interactions
Micro-interactions have been thoughtfully integrated into certain custom blocks to elevate the user’s experience with the design. They are essential as they provide immediate, context-aware feedback to users, making the interface more intuitive and engaging.
Micro-interactions contribute to a smoother and more
enjoyable user experience, which can lead to increased user satisfaction and better retention on the website.
Example #1
Immersive Scrolling
Incorporating floating and moving elements from Boppy's design patterns while scrolling down the page adds a dynamic and engaging aspect to the user experience. This keeps users excited and involved with the brand, encouraging them to explore the website further.
Example #2
Content Parallax Scrolling
Custom parallax scrolling on content offers a distinctive method for users to navigate multiple paragraphs without experiencing information overload from an excessive amount of visible text at once.
Example #3
Collapsing/Expanding Header
Given the many category links and limited header space, it was best practices to implement a courtesy navigation to separate informational links from shoppable links. Adding a collapsible and expandable header functionality enhanced the overall user experience, ensuring a seamless and user-friendly interface.
Example #4
Footer Animation
This custom animation is a modern take on the traditional footer accordion, featuring sliding and hover animations
for enhanced visual appeal.
Healthcare Pages
As part of the project scope, I designed custom healthcare pages, including a healthcare landing page and an order healthcare product page.
‘Order Now’ Sticky CTA
The ‘Order Now’ CTA appears as a sticky at the bottom of the page while scrolling down, reminding users to order healthcare products without having to scroll back up.
Healthcare Distributor Dropdown
Implementing a dropdown menu conserves viewport space, and allows users to seamlessly select a distributor.