My Account & Edit CSB
UX & Web Case Study
Project Summary
With a recently launched and improved subscription model, Puracy (a natural soaps company based in Austin, TX) ran into an issue with not having an account experience suitable for customers to manage their subscriptions and basic account information. Ralaworks stepped up to complete a full User Experience (UX) review, redesign, and launch of a new “My Account” experience that Puracy and their customers were proud of.
Backstory
Puracy produces natural household and personal care cleaning products: hand soaps, surface cleaners, laundry and dish detergents, body washes, shampoos, and more. Based in Austin, TX, the company has grown from 4 SKUs in 2013 to over 120 SKUs in 2021. Ralaworks is heavily involved with the product line’s growth and evolution during this period.
In 2017, Puracy was already offering a subscription option (at a discount) at point-of-sale on puracy.com for individual products. However, some competitive research showed Puracy was missing a winning opportunity for the customer: allow customers to bundle their products into 1 order, conveniently have that order arrive when they wanted, and add additional savings if they did so.
We also needed to focus on keeping the experience responsive, therefore prioritizing the mobile experience throughout. Wireframing and high-fidelity comps of both desktop and mobile experience were a must.
Puracy Natural Body Wash product page in 2017, offering one-time purchasing along with Subscribe & Save options.
Ralaworks utilizes all methods of wireframing: whiteboards, Balsamiq, and even hand sketches.
Therefore, in Spring of 2018, Puracy launched the Custom Subscription Bundle (CSB) with the following offering:
-
allow customers to bundle their favorite products
-
save up to 50% on the price
-
have the shipment arrive at their front door on their schedule
-
be able to create your bundle right from your phone or tablet
Puracy's Custom Subscription Bundle (CSB) desktop experience. Customers could add 5 products they wanted from the catalog below and are able to add up to 3 more products for an additional 25% off. For more depth into the CSB experience, see the prototype here.
After several months with a live CSB offering, the popularity grew at a remarkable pace.
At its peak, we had over 1,000 active CSB subscriptions, ordering roughly 6 times per year*, with an AOV of over $52. This equated to over $312,000 in expected CSB revenue per year. As a small company of fewer than 10 people, this was quite an accomplishment!
1,000+
active CSB subscriptions
$52
average order value
$312k
annual revenue
(~6 orders/yr*)
With this significant growth and popularity came more need for support. At the time, Puracy’s Customer Experience (CX) team was managing certain subscription features manually, answering emails and CSB support queries constantly. Customers also had a difficult time accessing their accounts, which weren’t easy to navigate through either. This heightened confusion increased CX maintenance efforts, and was becoming a heavy burden on both the CX team and the customers.
*-Puracy offered frequencies of receiving shipments every month, 2 months, or 3 months.
User Research
After some informal customer interviews, employee conversations, and research into the current experience, Ralaworks recognized that the current account UX needed a lot of assistance. The only way to access your account was buried in the footer navigation. Then once logged in, the Shopify theme's UI components didn't flow well with ReCharge** features, and the functional default experience was unsatisfactory and non-intuitive from a UX/UI perspective. And for an experience that had these issues, there should have been more supporting documentation or tooltips throughout the experience to help disgruntled customers.
Puracy account experience in 2017, where customers were "able to manage" their account.
Seeing these issues coupled with increased call volume on the CX team, Ralaworks needed to jump in and help shift responsibilities onto the customer within an intuitive user experience they could easily access. Since our current account system didn’t meet these standards, we needed to implement a reliable “My Account” experience quickly and effectively.
We did some brief research of our main competition, setting up an account to see their features offered in their account experience. We confirmed they were offering the same control to customers, and a clean UX/UI should be the industry standard.
There was no formal Business Requirements Document (BRD), as all requirements were shared via email and phone conversations. Responsibilities were divided amongst the following teams:
-
Ralaworks: overall project management, all UX design (lo- and hi-fidelity comps) with InVision prototyping, facilitating the UA testing with customers, marketing strategy and design
-
Digital Kozak: all web & mobile development, managing the Shopify/ReCharge integration
-
Puracy CX team: QC and QA Testing, and qualitative feedback
**ReCharge was the subscription-based Shopify application we used to manage our subscriptions. It integrated well with Shopify and our Fulfillment Center’s software at the time, allowing Puracy to launch a subscription business model.
Objectives
For authenticated users with active CSB subscriptions, give them the ability to:
-
Edit products (add, remove, or replace) in their bundles
-
Modify shipments (reschedule, skip, or pause)
-
Update billing information (credit cards, billing addresses)
-
Update shipping information (1 or more ship-to locations)
-
Track current orders
-
View order history
-
Provide the same exact features for their other (non-CSB) subscriptions
-
All under 1 roof (My Account), via desktop or mobile devices
Ideation & Wireframing
Since we were pressed for time, and the needs of the project were pretty straightforward, we opted not to conduct a design studio with the Puracy stakeholders. Ralaworks performed all those tasks internally, and simply shared direction with Puracy along the way.
The plan was to custom design the experience and build it into Shopify as a custom application. Any roadblocks with Shopify were highlighted early on in the wireframing phase from the Dev team, and business approval was granted for any design or dev workarounds we needed to execute.
Ralaworks first needed to establish a persona that we could all relate to within our target demographic. This helped reinforce that we were designing for a human being, one that would potentially think and act like our target audience. So we created “Jennifer” with the following characteristics:
-
Age: 34
-
Married: Yes
-
Children: 2 (6 yr old boy, 2 yr old girl)
-
Occupation: Nurse of 12 years (works normal hours)
-
Personality: Down to earth, likes to support local business, would prefer going to the farm instead of the mall, is open to trying new things, prefers organic when she has the choice
-
Hobbies: Likes to exercise when she can; cooks healthy meals for the family, works from 8-4 every weekday so time with kids is limited to nights, weekends and holidays; watches her favorite shows on her TV via her Google Chromecast that she syncs from her iPhone
-
Jennifer is an existing Puracy customer, and has already started a custom subscription bundle.
My creation of our persona "Jennifer" in InVision back in 2017. The woman below gave Jennifer a visual identity we could relate to throughout the project.
Jennifer’s journeys throughout the experience were outlined throughout the design phase and re-emphasized in the usability testing phase.
Wireframes were sketched out on whiteboards and shared with the team.
Whiteboard wireframes of the My Account UX, accounting for all clickable actions (green).
This was our opportunity to identify any missing interactions or features we needed to include. These sketches pointed out how heavy the experience could become, but it was what our customer would have expected from the beginning. There were so many journeys accounted for in these wires, including how to skip or pause a shipment, how to update credit card information, or the various steps it would take to delete a subscription. We also needed to demonstrate how Jennifer would get confirmation on her completed actions such as colorful page alerts.
Design & Prototype
Once the wires were approved, it was time to dive into designing high-fidelity comps. Ralaworks opted to use Photoshop for designing the pages, utilizing the Artboard feature to better construct and export different states of the experience.
At the time, the majority of our customers were purchasing via desktop vs. mobile, so we opted to design the UX for desktop first. We also felt the editing features and CSB modifications would be easier to perform on desktop based on the UI elements.
84 desktop screens later, Ralaworks then built a prototype within InVision, one of the most trusted prototyping tools in the industry. It allowed us to add basic linking elements from screen to screen, while also incorporating some specific positioning attributes, custom animations for transitions, and conditional logic on interactive elements. These features coupled with robust commenting and the ability to inspect design elements for CSS styling, we felt we had the best tool for the job.
The prototype we created is available here.
Once the prototype was ready, Ralaworks presented to the Dev team and stakeholders for questions and feedback. With each round of revisions came another remote presentation through Skype and Google Meet screen-sharing technology.
Desktop and mobile hi-fidelity comps of the My Account default view. Click the screens below for larger views.
We had various stakeholders and employees test and interact with the prototype for any obvious issues or questions that arose. They were able to share their thoughts and feedback within the commenting feature of InVision, which ensured all ideas and issues were accounted for within the context of the prototype. This solution was much more efficient vs. the traditional email or DM correspondence.
Once approved by Puracy, the Dev team was then tasked with building out the experience within Shopify. Any and all questions or concerns they had were addressed and tested with Ralaworks throughout the development process.
The experience was eventually ready within a staging environment, one that was duplicative of the actual live site. Any interactions wouldn’t interfere with the live environment, making it ideal for testing with customers.
A customer interacting with My Account, about to test the usability and functionality of the experience.
Ralaworks then coordinated a usability study with 4 loyal customers, where they would interact directly with the staging experience on different devices with different browsers to ensure compatibility. Each participant had a list of roughly 15 standard account-related tasks to complete, all with no explanation (unless they were truly stuck and would resort to contacting Katie, the human support of this UX and one of the Puracy CX team members).
The results from the usability study can be found here.
Ralaworks received qualitative feedback, along with bug fixes that the Dev team needed to address. We prioritized the feedback based on needs, knowing a couple more iterations of the experience were going to launch in the months to come. Knowing our urgency to get “My Account” up and running, we opted to quickly address the low-hanging fruit and launch the revised experience.
Once launched, all team members tested the experience in multiple browsers and on multiple devices. Since we had already vetted through testing in the staging environment, our focus was on interactions tied to live subscriptions vs. dummy accounts. With only a few bugs discovered, we were satisfied with that transition from staging to production.
Now we just needed some marketing to support the announcement of the upgrade.
Launch & Marketing
Now that our CSB offering included its account management support, Puracy and Ralaworks felt comfortable marketing the product with a video that we’d showcase on our homepage.
Ralaworks worked closely with Puracy and Free Dream Studio to create this video that was both informative of the product features, while also being relevant through the perspective of the Co-founder’s wife. The Tracy family was growing, 3 kids already with twins on the way. Lily was a perfect candidate to speak upon the benefits the CSB brought to her crazy lifestyle, the convenience of the subscription model, and the ease of account management.
While making the video, Ralaworks worked with the Puracy team to incorporate the new video onto the homepage. The prototype of the launch experience is available here.
Hero ads were designed for desktop, tablet, and mobile screens.
Lastly, we wanted to redesign the reminder email customers received prior to their next shipment. This served as an opportunity to remind customers that they could modify their CSB up until a certain date before the bundle was packed and shipped to them. This opportunity also let them modify their delivery schedule or frequency if they were all set with products and wanted to postpone their next shipment.
Reminder email customers would receive prior to their next shipment.
Where the CSB is Today
Although the customer and CX were much happier and satisfied with the new functionality, our need for development support and fulfillment headaches started to pile up. ReCharge was populating each customer’s CSB as an individual SKU, causing inventory backorders and fulfillment delays. ReCharge was also limiting our UI capabilities, making the user journey disjointed without consistent elements, from product pages through checkout.
Eventually, these issues coupled with a new development team and advancements in Shopify-integrated subscription applications, Puracy decided it was best to slowly shut down the CSB model and shift in a new direction. Customers who were actively receiving CSB’s were given an extra % off to switch to individual product subscriptions. Fulfillment would still box the products together in the same packages if they were due to ship around the same time, which essentially mirrored the CSB deliverable they were getting previously. This shift allowed any backorders of individual products to not delay shipping the rest of the bundle as it was previously.
Now that the CSB is no longer an existing product, its difficult to share the live experience. Therefore, all efforts put into this massive UX project are reflected in the InVision prototypes and various data collection documents.
This project remains one of the most advanced and thorough UX projects Ralaworks has ever worked on.