Laptop and smartphone displaying a website related to Japanese culture and candies, with vibrant red and yellow colors.

Updating and Modernizing

Joybox is a Japan-focused snack box subscription service that delivers unique flavor profiles to customers' doors every month.

Try the Prototype (mobile)
Try the Prototype (desktop)

Introduction

Background

Joybox is a local business offering subscription surprise boxes for those seeking a unique cultural taste of Japan. As a relatively new startup, it faces fierce competition from brands like “Bokksu” and “SakuraCo”.

The business owner is seeking a designer to reimagine the website with a more “modern” aesthetic to attract more clicks and increase page view time.

Project goals

The website must be fully responsive, ensuring a seamless experience across mobile and tablet devices.

Provide a vastly improved experience for users looking to purchase a subscription service from Joybox.

Completion time

2-month project completion

My role

User Experience Designer and Researcher

Tools

Colorful abstract design with five shapes forming a stylized letter 'F' on a black background.
Adobe Photoshop logo on a dark background.

The Solution

Through my research, I designed an enhanced experience for future Joybox users, modernizing the website and improving its clarity and readability.

Research

Research Objectives

1. Determine what a subscription to the product accomplishes in daily life.

2. Understand how the site’s design alters the likelihood of a subscription.

3. Understand the process of subscribing and exploring the site’s many features.

4. Learn if there are triggering events.

Secondary Research

To gain a comprehensive understanding of the subscription box industry, I wanted to look beyond just the immediate competition. I also aimed to analyse other popular subscription box services to understand why those websites are successful at retaining users and converting them into customers.

Logo with Japanese character and the text 'BOKKSU SNACK BOX' on a brown background.

Homepage is compact

Green checkmark icon on black background

You can subscribe from the homepage easily

Green check mark inside a black circle

Testimonial takes up a whole screen

Red X symbol on a black background
Crunch Labs logo with a red gear symbol and blue stylized text.

Social proof stands out and has a subsection of live updated gallery following its own hashtags

Green check mark on black circle

Very clear brand identity, every element feels on brand and immerses you in the purchase

Green check mark icon on black background.

Cannot subscribe from the homepage

A red X mark on a black background.
Gray banner with a gold cherry blossom graphic, Japanese characters for cherry blossom on left, and the word 'Sakuraco' in large white letters.

Plenty of CTA’s encouraging you to join

Green check mark symbol

The ability to buy the product from the homepage

Green checkmark on a black background

Random non-purposeful PNG in middle of the screen

Red X mark

Primary Research

For this project, I gathered participants to interview for our primary research.

I interviewed 6 potential customers.

Interview Format

Firstly, after housekeeping, I asked general questions linked to subscription purchases

How do you feel about physical subscription packages?

I stay in quite a bit so I find the service really helpful!

The second step was getting the participants to use the current website

I can’t see what’s inside the box so I have no idea if I am getting my moneys worth.

What would turn you away from a subscription package like Joybox?

Finally, I got the participants to try some of our competitors sites

What would be a deciding factor to subscribe to a subscription package?

As I can see from these other products, I feel like the background and theming of the website has a large impact for me.

Affinity Mapping

I took all the answers I acquired from the interviews and whisked them up into a much easier to discern affinity map.

A collection of colorful sticky notes and charts related to subscription frequency, product information, motivators, dislikes, and user feedback.

Here I identified that 3 of my participants’ motivations to become a customer is down to the clarity of purchase information and/or the cost of the product itself.

Since I have no control over the cost we can just put that reason to the side, but the contents not being visible is something interesting we play with later in this project.

Personas

I created two personas to represent the needs and wants of potential Joybox customers

A digital profile of a man named Todd, a software engineer, with a photo and information about his demographics, traits, needs, and preferences, including an interview quote and various interest indicators.

Todd is a software engineer interested in learning about the cultural backgrounds behind the products he buys. Very well travelled and culturally conscious.

A user profile card for Cassie, a cashier at a retail franchise, with a headshot photo, personal information, and characteristics. Includes a quote about shake preferences, traits sliders, demographics, device info, different personality traits, needs, and preferences like young, proactive, organized, introvert, responsible, hobbyist, passionate, family-oriented.

Cassie is a cashier, working with a low budget, she wants to know exactly what she is about to purchase.

Users are eager to purchase a Joybox to enjoy Japanese snacks and immerse themselves in Japanese culture from home. However, they are not subscribing to Joybox due to poor presentation of information, confusing navigation, and website structure. As a result, they are unable to explore all of Joybox's offerings to make an informed purchase decision.

Problem Statement

How Might We Questions

➢ How might we provide users with a simple and cohesive experience when purchasing a product from joy box so that they will have a positive experience and potentially recommend our products to other customers?

➢ How might we aid users with less confusing navigation and a more accessible experience when exploring the website?

➢ How might we turn the homepage into a narrative experience leading the user through the process of making the product so that they will have more confidence in their purchase later?

Ideate

The Vision

Task flows for this project are as follows

Flowchart outlining two processes: purchasing a box subscription and reading a blog article. Key provides symbols for user decision, input, page, and start/end, with main path and alternative path indicated.

Mid-Fidelity Wireframing

After discussing the wireframes with the client, I came up with these mid-fi representations of the new vision for the website.

Wireframe layout of a website homepage with sections for Japanese culture promotion, subscription plans, product details, testimonials, and footer, all shown in grayscale with placeholder text and images.

Design

High Fidelity Designs

A website with a subscription box for Japanese confectionery. The page displays options to choose a plan, featuring a colorful box design with Japanese art. A pop-up describes caramel corn, showing an image of popcorn.
Three screenshots of a Japanese confectionery subscription box service. The first shows a box with traditional Japanese packaging and design. The second displays subscription plans priced per month for 1, 3, 6, or 12 months. The third features a close-up of caramel corn snacks with a description of the product.

Features Completed include:

A full homepage

Green checkmark inside a black circle

Product page

Green check mark icon on a black background

Revamp purchase portal on the homepage

Green check mark on a black background

Contents preview

Green checkmark inside a black circle

Interaction Design

Before the design can be sent to potential users for testing, it needs to be responsive and feel as closely as the final product should feel.

A detailed wireframe diagram of an e-commerce website showcasing various pages, product images, and navigation elements related to Japanese cultural products and chocolates.

The most important interactions that needed to be built for demonstration include:

  • Selection of product for purchase

  • Navigating to and from the home page and product page

  • Viewing information about what is featured in the package

Iterations

Usability testing

Number of Participants

A black background with a large white circle in the center.

5

Goals

We want to match the user’s keywords that describe Jobox box as closely as possible with the client's ideal branding words

A red dot inside a black circular background.

Gain as much insight as possible to make positive changes to the design

Close-up of a bottle cap with a red dot in the center.

Ask questions that lead to measurable outcomes

Close-up of a red dot on a black background.

Keyword Matching

Before the project began, we asked the client what Joybox meant to them and to describe their brand in 6 keywords:

Joyful, Delicious, Curiosity, Curated, Hand-picked, Community, Culture Rich

We then asked this question during our initial interviews and gain a colourful spectrum of keywords:

Warm, Dated, Japan, Multicultural, Boxes, Farmers, Heat, Pressure

When asked again we did not get the exact same keywords but they much more closely aligned with how the client perceived the brand:

Curious, Fanciful, Cultural Connection, Community, Collection, Joyful

Considering I did not give a list of keywords to choose from, the words chosen are very close to the brand identity the client imagined.

Key Results

A red symbol of a cross inside a circle on a black background.

Confusion about how to get home

Not realising they can click the carousel to get more info about the images

Knowledge about the premium box was very sparse even after the exploration phase of testing had concluded

A blue checkmark inside a circle, indicating approval or completion.

I was able to gather a gargantuan amount of feedback to improve the design for the handoff

… Also, some very positive quotes

I still feel like I am looking at the same brand and product, but it feels a lot smoother to explore!

I think I might actually buy one of these when my next pay cheque comes through!

The website feels handcrafted and like professional product

Improvements

Improvement #1

Comparison of three features for choosing Joybox: Handpicked unique selection with cartoon sushi, authentic cultural experience with a cartoon cat, and customizable dietary requests represented by a gear icon. Orange

A quick UI improvement was to frame the “pitch” icons to draw more attention to them, and adjust the location of the CTA on that section to be more accessible.

Improvement #2

I reduced the density of information around some of the info cards. A lot of user expressed that they would most likely just scroll past so much small text rather than read it.

Collage of four images: person making handmade crafts, conveyor belt with rolled snacks, boxed Japanese souvenirs, farmer inspecting produce in a farm.

Improvement #3

I adjusted the styles in the product purchase sections of the design to reflect a more obvious information hierarchy to improve information clarity. I also added addition information about the exclusive products, as most of my test participants couldn’t identify how or where to get the premium box.

Online subscription plan options for a Joybox box with a choice of 1 month, 3 months, 6 months, or 12 months, featuring a colorful box with a mountain and wave design, and a checkout button.

Improvement #4

I added navigation arrows to the carousel. 3 of the test participants had no idea how to view other items.

A digital presentation slide titled "What to Expect From Your First Joybox" featuring an image of a pink snack bag with a cartoon face and blue eyes, labeled "Caramel Corn".

Improvement #5

The testimonial section was formatted to be more consistent with clear visual hierachy.

A website page titled 'Don’t Just Take Our Word For It...'. It features quotes from multiple people praising Joybox, with their photos and names. The main quote by Barry Target says, 'The snacks that arrive at my door are always so varied and interesting, Joybox really understands what I want from a sub box.' There are three additional quotes below, from Polly Imaginary, Jane Public, and Allen Fakeman, praising Joybox's impact on Japanese snacks and packaging. The background is light beige, with the quotes and images arranged in a clean layout.

Improvement #6

I added clearer allergen information and placed navigation arrows, as 2 people mentioned they clicked to the side of the modal to go to the next item.

Product page showing caramel corn in a bowl with a pink snack bag and a description box beside it, on a yellow background.

Quick Side By Side

Old Homepage

(Desktop)

A woman dressed in traditional Japanese attire holding a colorful Japanese-themed box with a mountain and wave design, with additional images of Japanese sweets and cultural scenes on the webpage.

New Homepage

(Desktop)

A webpage promoting Japanese cultural snacks and subscription boxes, featuring an image of a red and gold box with a dragon design, a monthly subscription plan, and a black-and-white photo of a man.

Old Homepage

(Mobile)

A vertical advertisement for Japanese flavored treats, showcasing colorful packaging, traditional motifs, and customer reviews, emphasizing handcrafted and curated quality.

New Homepage

(Mobile)

An advertisement promoting Japanese cultural products, featuring an art piece with a gold wave design on a red background, and sections highlighting Joybox's features such as handcrafted selection, cultural experience, customizable dietary requests, and subscription plans.

Final Thoughts

This was the first real world I worked on that:
- I worked with a real world client
- My design had a real world impact
- I made a fully functioning responsive designed website… for the real world!

A Japanese-themed subscription box featuring a bright red and yellow box with a wave and Mount Fuji illustration.

What I Learned

Justify, justify, JUSTIFY!

The project made me more conscious of the “why” in design over the creative “what”. At every client meeting I felt obligated to explain and give arguments to what I was changing and what the potential outcomes of these changes were with justification and evidence.

This really drilled home to why research and justification was so important, and not just the creative pen-to-paper moments of the process.

Experimentation kills time

I noticed in this project I tried to experiment with my creativity and to limit test my Figma skills.

What ended up happening was a lot of time loss due to miss match formatting and incorrect labelling where I had tunnel-visioned a mechanic I was not comfortable in implementing.

Want To Hear More About Joybox?

CONTACT ME