Gift-giving made simple: A UX case study

Emilia Nardi
UX Station
Published in
6 min readJan 21, 2019

Subscription boxes are everywhere. How do you design a product that stands out?

My first gig as an arm model photographed by Ferris

Introduction

The subscription box industry has exploded across the United States over the last 5–10 years. Everything from healthy meals to beauty products and custom vitamins are available for purchase every month without having to leave your house.

A client recently asked my teammates Ferris, Alfredo, and myself to create a website and product concept for her soon-to-be launched company, SweetFleet.

SweetFleet aims to provide beautiful, customized packages full of cozy, memorable presents, to bring friends together across distances.

Research & Discovery

Challenge

This project not only required building a website from the ground up, but a clear product concept and brand. We faced the following challenges while keeping goals from the client in mind:

  • How to make SweetFleet stand out in the vast subscription box industry
  • Ensure products in the boxes are easily customizable
  • Website aesthetic that is high-end and modern
  • Packages that emphasize experiences like a cozy night in or a congrats box

Hypothesis

Gifts that create custom experiences for the recipient are often the most memorable but inconvenient or difficult to purchase.

Comparative Competitive Analysis

When examining the subscription box landscape, we compared our SweetFleet’s concept to companies focusing on beauty, gifting, and a similar website aesthetic to what the client requested.

Comparative analysis with similar companies to SweetFleet

Popular features of these companies included a monthly subscription model and highly customizable box contents (ie. makeup for all skin tones). Other features such as corporate gift-giving and boxes for men were offerings that gave some companies a unique space among the rest.

We wanted to include popular user offerings from these sites while incorporating some unique features to solidify the product’s niche in the market.

Interviews

Initially we started researching the product itself to find out what goes in the box. We asked people what they liked in subscription boxes and distilled that information down to trends.

However, we quickly realized a pivot was necessary. It became evident we needed to focus more on the experience of gift shopping online while also keeping the box contents in mind.

We asked ten adults the same three questions around the gift shopping experience as well as what they liked about gifts they received:

  • Have you re-used anything from a subscription box or kept it around?
  • What is the best personalized gift you ever received and why?
  • What is your favorite website for buying gifts and why?

After affinity mapping our interview responses to the questions above, we distilled them into the following trends:

  • People like reusing and keeping packaging that is pretty
  • Gifts that include a monogram are very popular and memorable
  • Users like a good selection of quality products + good website aesthetic

In addition to user interviews, we used card sorting to figure out where items on the website would make sense to the user. For example, would you group lotion in the same place as nail polish on a product page? This research method allowed us to know the user’s expectations while ensuring the website is understandable and intuitive.

User organizing categories of potential website content into buckets via card sorting

Planning

After collecting preliminary research and examining the market of this product, we distilled SweetFleet’s main value propositions down to three items.

  1. Two themed boxes with the option to customize content as well as a store for buying items a la carte.
  2. DIY products with 3 ingredients max that facilitate shared experiences with loved ones.
  3. Content that can be personalized to the receiver.
User flow for the purchase of a box

Next, we produced a user flow going through the steps to purchase a subscription from these core concepts of the SweetFleet product. The above visual helped us to minimize the steps to purchase as much as possible, and served as a blueprint for our site’s information architecture.

Aesthetic inspiration from the client

Design

Aesthetics were important to users’ impressions of websites for gift shopping during our interviews. Using the client’s inspiration template pictured left, our team conceptualized a simple, clean look with a luxurious feel. We drew inspiration from other websites in the SweetFleet space as well as packaging from our favorite products.

Prototyping

Sketching

Taking the design elements we liked from minimalist e-commerce templates led us to sketch our product page as it appears in the photo below.

At times, we reached places of disagreement, and this led us to turn to user testing. We made a paper prototype website that users would click through while one of us acted as the “computer”. User responses determined how we iterated our product going forward.

User testing our product page with paper prototypes

User testing was an enjoyable experience for our team because it brought us back to the users as the ultimate decision-makers on what makes sense in the final product.

Once we nailed down a template for the product page with DIY kits like lip scrubs and face masks, then we included a personalization page to our purchase process. This included the option to add a “handwritten” note, a mini portrait of an uploaded photo painted by an artist, and a monogrammed bag. The final step to this flow was the shopping cart review and check out page.

Early sketches of our prototype

Mid-Fidelity Prototype

After sketching our wireframes, we used Axure to create a mid-fidelity clickable prototype. Our website has limited functionality but clickable areas presenting the interactions and navigation possibilities. It also includes all of our steps outlined in our user flow.

Build a Box and Shop pages from sketches pictured above

Axure had a high learning curve and was hard to wrap our heads around at first. But thanks to youtube and Lynda tutorials, we were able to build the full website and make interesting animations like dynamic panels, parralax scrolling, and more.

Next Steps

The client’s response to our website was very positive and she seemed pleased with our design. She particularly appreciated our attention to experience-focused items and personalization options.

Her suggestions included adding a digital feature, such as a custom spotify playlist or QR code to watch a movie together virtually. This would allow to gifters and receivers to better connect across long distances. We also proposed additional research be done on potential products and customer’s preferences.

Another step would be to develop packaging that is beautiful and specific to SweetFleet’s brand. Boxes and reusable bags from our favorite brands inspired us around the design of the site. Users also responded very positively to beautiful packaging in our interviews.

Conclusion

Overall, the SweetFleet project taught us so much and produced our first web prototype in Axure. The team worked well and hard to create a simple, functional and minimalistic website to present our client’s concept for a business. For more on our team dynamic, check out my last Medium post.

If you liked my case study, or have any thoughts on Axure and web design, claps and comments would be appreciated. If you want to connect about UX or just want to say hi, feel free to reach out via my Linkedin.

Thanks!

--

--

Emilia Nardi
UX Station

Wanderer, UX Designer, constantly learning how little I know.