Product Box Subscription | Shannon S. Cleary UX

Designing a subscription service to increase revenue to further the positive impacts for parents and their female-bodied children going through puberty.

Overview

The Problem

Tabitha (user persona) needs a way to collaborate with her daughter in purchasing body care products so that she can be sure the products are healthy and age-appropriate, while also allowing her daughter's autonomy.

Constraints

Timeline

No budget
Short timeframe
Current business' limited capacity
Shopify limitations

Three weeks

Platform

Responsive website, mobile-first design

Tools

Zoom
Miro
Figma
Slack
Trello
Google Suite

Team

3 UX Designer
Business Founders
Girls Who Code

My Roles & Tasks

Discover

Competitive & Comparative Analysis
Contextual Inquiries
User Interviews

Define

Affinity Map Facilitator
Prospective Journey Map

Design

Prototypes
Component Library
Wireframes
User Testing
Design Iterations

Deliver

Presentation Mentor
Annotated Wireframes
Organized deliverable for Client

Research

Heuristic Evaluation

The home page needs a redesign
Must fix accessibility issues
Improve CTA (Call-to-action) buttons

Competitive Analysis

Onboarding Quiz is fun
Must explain specific subscription Convenience vs. discovery products
Other deals
Shipping date & frequency
Personalized or generalized
Product Quality

Comparative Analysis

Subscription accruse credits to be used on products with discouted prices
Selling the community giving story, sells the products

User Interviews

"I value my child's autonomy but I still feel the need to oversee their purchasing decisions."

"I am loyal to the products I enjoy."

"I find my daughter to be more receptive to my input when she seeks it out from me, and less receptive when I approach her."

Women age 35-65

Four Mothers

Three Subscription Users

30 mins interviews

Research Synthesis

User Personas

eye-for-ebony-zQQ6Y5_RtHE-unsplash_edite

Tasha

The independent tween

Tabitha

The concerned mother

Scenario

One day after school, Tabitha's soon-to-be teen daughter, Tasha, comes home declaring that she needs a bra, a period starter kit, and wants to begin wearing makeup.

Tabitha does some research but struggles to find products that are age-appropriate for her 12-year-old daughter. She prefers natural personal care products and bras that are minimal in design while providing adequate coverage and support for her daughter. Tabitha struggles to find these products at all, let alone in the same store.

Prioritizing: MoSCoW

Must

Should

Could

Won't

Home page redesign
Product page redesign
Streamline checkout process

Collaborative parent/ child account
Build your own box subscription
“Allowance” model
Parent control over restrictions

Message board/ chat feature
Age-based product recommendations
“the talk” conversation prompts

• Educational
Articles/ Blogs/ Podcast

Design Strategy

1. Build Minimum Viable Product (MVP)

2. Design Subscription Product Box

3. Create a collaborative Parent/ Child Account

Ideal User Journey

Tasha declares that she needs new grown-up products

Tabitha finds myfloretz.com new subscription service

Tabitha signs up for an account and sends a link for Tasha to shop

Products are bought and shipped

Mother & daughter approved products are recieved

Designing the MVP (Minimal Viable Product)

The Initial Wireframes utilized a traditional product page, as seen in most e-commerce sites. When Tabitha clicked on a product, a new page opened with details about the product.

See wireframes on the left

However, since Tabitha's objective was to purchase the entire product box and not purchase individual items, she were confused by opening an additional page.

See Iteration to the right: Combining the two pages for a more intuitive experience

Iterations: We combined the box overview and the product page into one. Tabitha can now see each individual product's descriptions by clicking on the plus sign to see a dropdown with specific details.

See the final wire flow below the show how Tabitha would navigate through the pages.

Note the difference in the header for less distraction while checking out to discourage cart abandonment.

Designing the Subscription Service

Since every subscription service is slightly different and this one will be a parent & child account, having a 'How It Works' page was significant.

A user can select multiple subscription boxes on the Subscription page or choose the Ultimate Box, including all of the boxes.

In the image below the first two screens and the last one are additions to the previous users' flow.

We designed and tested the subscription flow with the family account set up.

We originally had a "Household" page in the flow for setting up the subscription service. We later removed this page from this flow due to poor testing results. The test showed that Parents became confused and concerned about why they would share information about their child when signing up for a subscription.

We moved this page to the family account set up separate from the subscription sign-up.

The wireframe to the right was removed from the flow after poor testing results.

Starting to design an e-commerce family account

As we can remember, Tasha (the independent tween) wants to prove her independence and doesn't want her mom to buy things for her anymore. At the same time, Tabitha (the concerned mother) wants to be sure Tasha is getting age-appropriate and quality products. She still wants to have veto power without conflict.

As our design team approached this, we had the idea of taking the fight away before it began. If Tabitha could restrict what Tasha could view and purchase, she wouldn't need to worry about vetoing a product after her daughter already picked it out. Hence, the e-commerce MYFL parental controls idea was born.

Below is the wire flow for Tabitha to set-up restrictions for her daughter's account.

An explanation for the image above.

When Tabitha progressed through this flow, she would decide which categories she would add parental controls. There would be three options for each type: No restrictions, Some restrictions, Completely restricted. When Tabitha selected "With Restrictions," the flow would continue to an additional page to select products within those categories that Tasha could see when shopping online.

Usability Testing

An explanation for the image above.

Task 1: Purchase the individual Product Box

Task 2: Sign up for the Ultimate Subscription Box

Task 3: Set Up Parental Controls

The problem highlighted in the testing was that this whole process was a bit confusing. Once users got to the end of this task, they understood what they had done and liked it. But, there was not enough explanation early in the user's process to know WHY they were setting parental controls.

The next phase of the UX Design process would be to ideate how to address these issues and make the process simpler for greater understanding and intuitiveness.

The image above shows the ideation of the child account set-up that was not tested in this project.

Deliverables for our client

Design System

On the right, see the Design System based on the current business branding.

Mockups

See examples on the left of the Mockups delivered for each size screen.

View the final subscription flow mockup prototype to the right.

Annotated Wireframes

See examples of the annotations delivered to the Girls Who Code college student engineering team.

Because the Girls Who Code were new to coding and working with UX Designers, I went a little further explaining smaller details just in case.

Final Materials G. Folder

See the Google folder's file structure to the left.

Our design team was stepping away from the project, so I wanted to UX our work delivery. The PDF (pictured to the left) was the first thing in the folder for ease to access any information in the folder. Each blue item is indeed a link to that specific item.