Awaken Your Senses

Elevate your daily ritual with our curated coffee experiences

Awaken Your Senses

Elevate your daily ritual with our curated coffee experiences

The Roasters Pack

The Roasters Pack company is rebranding and launching a more in-depth version of their coffee subscription. They want the UI/UX team to redesign their onboarding quiz webpage with a prototype.

The Roasters Pack

The Roasters Pack company is rebranding and launching a more in-depth version of their coffee subscription. They want the UI/UX team to redesign their onboarding quiz webpage with a prototype.

The Roasters Pack

The Roasters Pack company is rebranding and launching a more in-depth version of their coffee subscription. They want the UI/UX team to redesign their onboarding quiz webpage with a prototype.

The Roasters Pack

The Roasters Pack company is rebranding and launching a more in-depth version of their coffee subscription. They want the UI/UX team to redesign their onboarding quiz webpage with a prototype.

The Roasters Pack

The Roasters Pack company is rebranding and launching a more in-depth version of their coffee subscription. They want the UI/UX team to redesign their onboarding quiz webpage with a prototype.

The Roasters Pack

The Roasters Pack company is rebranding and launching a more in-depth version of their coffee subscription. They want the UI/UX team to redesign their onboarding quiz webpage with a prototype.

The Roasters Pack

The Roasters Pack company is rebranding and launching a more in-depth version of their coffee subscription. They want the UI/UX team to redesign their onboarding quiz webpage with a prototype.

The Roasters Pack

The Roasters Pack company is rebranding and launching a more in-depth version of their coffee subscription. They want the UI/UX team to redesign their onboarding quiz webpage with a prototype.

The Roasters Pack

The Roasters Pack company is rebranding and launching a more in-depth version of their coffee subscription. They want the UI/UX team to redesign their onboarding quiz webpage with a prototype.

The Roasters Pack

The Roasters Pack company is rebranding and launching a more in-depth version of their coffee subscription. They want the UI/UX team to redesign their onboarding quiz webpage with a prototype.

The Roasters Pack

The Roasters Pack company is rebranding and launching a more in-depth version of their coffee subscription. They want the UI/UX team to redesign their onboarding quiz webpage with a prototype.

The Roasters Pack

The Roasters Pack company is rebranding and launching a more in-depth version of their coffee subscription. They want the UI/UX team to redesign their onboarding quiz webpage with a prototype.

The Roasters Pack

The Roasters Pack company is rebranding and launching a more in-depth version of their coffee subscription. They want the UI/UX team to redesign their onboarding quiz webpage with a prototype.

Project Duration

6 weeks (Oct 2023)

Tools

Product

Coffee Subscriptions

Project Duration

6 weeks (Oct 2023)

Tools

Product

Coffee Subscriptions

Project Duration

6 weeks (Oct 2023)

Tools

Product

Coffee Subscriptions

Project Duration

6 weeks (Oct 2023)

Tools

Product

Coffee Subscriptions

Project Duration

6 weeks (Oct 2023)

Tools

Product

Coffee Subscriptions

Project Duration

6 weeks (Oct 2023)

Tools

Product

Coffee Subscriptions

Project Duration

6 weeks (Oct 2023)

Tools

Product

Coffee Subscriptions

Project Duration

6 weeks (Oct 2023)

Tools

Product

Coffee Subscriptions

Project Duration

6 weeks (Oct 2023)

Tools

Product

Coffee Subscriptions

Project Duration

6 weeks (Oct 2023)

Tools

Product

Coffee Subscriptions

Project Duration

6 weeks (Oct 2023)

Tools

Product

Coffee Subscriptions

Project Duration

6 weeks (Oct 2023)

Tools

Product

Coffee Subscriptions

Project Duration

6 weeks (Oct 2023)

Tools

Product

Coffee Subscriptions

Team Members

3

My Role

Product Designer

Device

Desktop/Mobile

Team Members

3

My Role

Product Designer

Device

Desktop/Mobile

Team Members

3

My Role

Product Designer

Device

Desktop/Mobile

Team Members

3

My Role

Product Designer

Device

Desktop/Mobile

Team Members

3

My Role

Product Designer

Device

Desktop/Mobile

Team Members

3

My Role

Product Designer

Device

Desktop/Mobile

Team Members

3

My Role

Product Designer

Device

Desktop/Mobile

Team Members

3

My Role

Product Designer

Device

Desktop/Mobile

Team Members

3

My Role

Product Designer

Device

Desktop/Mobile

Team Members

3

My Role

Product Designer

Device

Desktop/Mobile

Team Members

3

My Role

Product Designer

Device

Desktop/Mobile

Team Members

3

My Role

Product Designer

Device

Desktop/Mobile

Team Members

3

My Role

Product Designer

Device

Desktop/Mobile

The Roasters Pack

The Roasters Pack company is rebranding and launching a more in-depth version of their coffee subscription. They want the UI/UX team to redesign their onboarding quiz webpage with a prototype.

Timeline

6 weeks

Tools

Product

Coffee Plan

Team

3

My Role

Product Designer

Device

Desktop/Mobile

What Problems?

Challenges - Constraints website design

Their website is built on Shopify, which limits their ability to develop highly unique webpage functionality and styles.

Challenges - Constraints website design

Their website is built on Shopify, which limits their ability to develop highly unique webpage functionality and styles.

Challenges - Constraints website design

Their website is built on Shopify, which limits their ability to develop highly unique webpage functionality and styles.

Challenges - Constraints website design

Their website is built on Shopify, which limits their ability to develop highly unique webpage functionality and styles.

Challenges - Constraints website design

Their website is built on Shopify, which limits their ability to develop highly unique webpage functionality and styles.

Challenges - Constraints website design

Their website is built on Shopify, which limits their ability to develop highly unique webpage functionality and styles.

Challenges - Constraints website design

Their website is built on Shopify, which limits their ability to develop highly unique webpage functionality and styles.

Challenges - Constraints website design

Their website is built on Shopify, which limits their ability to develop highly unique webpage functionality and styles.

Challenges - Constraints website design

Their website is built on Shopify, which limits their ability to develop highly unique webpage functionality and styles.

Challenges - Constraints website design

Their website is built on Shopify, which limits their ability to develop highly unique webpage functionality and styles.

Challenges - Constraints website design

Their website is built on Shopify, which limits their ability to develop highly unique webpage functionality and styles.

Challenges - Constraints website design

Their website is built on Shopify, which limits their ability to develop highly unique webpage functionality and styles.

Challenges - Constraints website design

Their website is built on Shopify, which limits their ability to develop highly unique webpage functionality and styles.

Challenges - High drop off

The drop-off rate on the subscription page is very high, and it seems that they cannot successfully convert potential users through the onboarding quiz.

Challenges - High drop off

The drop-off rate on the subscription page is very high, and it seems that they cannot successfully convert potential users through the onboarding quiz.

Challenges - High drop off

The drop-off rate on the subscription page is very high, and it seems that they cannot successfully convert potential users through the onboarding quiz.

Challenges - High drop off

The drop-off rate on the subscription page is very high, and it seems that they cannot successfully convert potential users through the onboarding quiz.

Challenges - High drop off

The drop-off rate on the subscription page is very high, and it seems that they cannot successfully convert potential users through the onboarding quiz.

Challenges - High drop off

The drop-off rate on the subscription page is very high, and it seems that they cannot successfully convert potential users through the onboarding quiz.

Challenges - High drop off

The drop-off rate on the subscription page is very high, and it seems that they cannot successfully convert potential users through the onboarding quiz.

Challenges - High drop off

The drop-off rate on the subscription page is very high, and it seems that they cannot successfully convert potential users through the onboarding quiz.

Challenges - High drop off

The drop-off rate on the subscription page is very high, and it seems that they cannot successfully convert potential users through the onboarding quiz.

Challenges - High drop off

The drop-off rate on the subscription page is very high, and it seems that they cannot successfully convert potential users through the onboarding quiz.

Challenges - High drop off

The drop-off rate on the subscription page is very high, and it seems that they cannot successfully convert potential users through the onboarding quiz.

Challenges - High drop off

The drop-off rate on the subscription page is very high, and it seems that they cannot successfully convert potential users through the onboarding quiz.

Challenges - High drop off

The drop-off rate on the subscription page is very high, and it seems that they cannot successfully convert potential users through the onboarding quiz.

What We Do?

A project plan ensures that all team members work in sync according to the schedule. Furthermore, our client will also be aware of what tasks we are undertaking at different stages, allowing them to provide targeted suggestions and raise specific questions.

What Problems?

Challenges - Constraints website design

Their website is built on Shopify, which limits their ability to develop highly unique webpage functionality and styles.

Challenges - High drop off

The drop-off rate on the subscription page is very high, and it seems that they cannot successfully convert potential users through the onboarding quiz.

What We Do?

A project plan ensures that all team members work in sync according to the schedule. Furthermore, our client will also be aware of what tasks we are undertaking at different stages, allowing them to provide targeted suggestions and raise specific questions.

User Experience and Product Research

In order to identify the root cause of the issue and determine the direction of the design, we have ultimately decided to conduct three types of analysis related to our product and user base:

User Experience and Product Research

In order to identify the root cause of the issue and determine the direction of the design, we have ultimately decided to conduct three types of analysis related to our product and user base:

This will assist us in quickly gaining insights into the coffee subscription service market and summarizing the unique features of subscription services.

This will assist us in quickly gaining insights into the coffee subscription service market and summarizing the unique features of subscription services.

Desk Research

Desk Research

Finding - Users care about

  • Convenience / Variety / Affordability / Sustainability

Finding - Users care about

  • Convenience / Variety / Affordability / Sustainability

Finding - Product Segmentation

  • Coffee Type / Roast Type / Frind Type / Shipment Choice / Place Of Production

Finding - Product Segmentation

  • Coffee Type / Roast Type / Frind Type / Shipment Choice / Place Of Production

This analysis will help us identify issues in web design and discover design patterns that can attract and retain users.

This analysis will help us identify issues in web design and discover design patterns that can attract and retain users.

qualitative research

qualitative research

Dan

Student


Dan

Student


Says

  • I need coffee to help me study, but I don't want it to be too expensive


Feels

  • I feel conflicted because good-quality coffee is expensive, and cheap coffee tends to be of lower quality


Thinks

  • I won't order coffee from online pages that don't look aesthetically pleasing because they don't seem reliable


Does

  • I prefer to find a coffee subscription from a well-designed website

Says

  • I need coffee to help me study, but I don't want it to be too expensive


Feels

  • I feel conflicted because good-quality coffee is expensive, and cheap coffee tends to be of lower quality


Thinks

  • I won't order coffee from online pages that don't look aesthetically pleasing because they don't seem reliable


Does

  • I prefer to find a coffee subscription from a well-designed website

May

Writer


Says

  • I wake up early every day for work, and coffee helps me stay alert


Feels

  • I'm not very knowledgeable about coffee, so sometimes I receive products that don't meet my expectations


Thinks

  • I need a straightforward subscription process to help me accurately find coffee products that suit my preferences


Does

  • I will use a matching process for coffee products to ensure that what I purchase is right for me

Julie

Biz Owner


Says

  • I have my own studio, and I subscribe to coffee for my employees


Feels

  • Sometimes, I find it challenging to determine how much coffee I need to subscribe to for my employees each month


Thinks

  • I need enough information and a simple, understandable process to help me figure out the quantity of coffee I need each month


Does

  • I wait for my employees to tell me when we're running out of coffee before placing an order

Mary

Writer


Says

  • I wake up early every day for work, and coffee helps me stay alert


Feels

  • I'm not very knowledgeable about coffee, so sometimes I receive products that don't meet my expectations


Thinks

  • I need a straightforward subscription process to help me accurately find coffee products that suit my preferences


Does

  • I will use a matching process for coffee products to ensure that what I purchase is right for me

Julie

Biz Owner


Says

  • I have my own studio, and I subscribe to coffee for my employees


Feels

  • Sometimes, I find it challenging to determine how much coffee I need to subscribe to for my employees each month


Thinks

  • I need enough information and a simple, understandable process to help me figure out the quantity of coffee I need each month


Does

  • I wait for my employees to tell me when we're running out of coffee before placing an order

This will assist us in quickly gaining insights into the coffee subscription service market and summarizing the unique features of subscription services.

This will assist us in quickly gaining insights into the coffee subscription service market and summarizing the unique features of subscription services.

Competitive Analysis

Competitive Analysis

Solutions

Solutions

Focus on branding and consistency

Even with Shopify's limitations, we can still customize the visual elements within the platform to make The Roasters Pack's website visually appealing and unique.

Focus on branding and consistency

Even with Shopify's limitations, we can still customize the visual elements within the platform to make The Roasters Pack's website visually appealing and unique.

Create a short and engaging onboarding quiz

Longer questions tend to lead to more drop-offs, so a quick and enjoyable questionnaire can reduce drop-off rates. We'll test this hypothesis in usability testing.

Short & engaging onboarding quiz

Longer questions tend to lead to more drop-offs, so a quick and enjoyable questionnaire can reduce drop-off rates. We'll test this hypothesis in usability testing.

Pricing Strategies

Implement pricing strategies to boost the purchase desire for products with less apparent price advantages through redesign, reducing drop-offs caused by price sensitivity.

Pricing Strategies

Implement pricing strategies to boost the purchase desire for products with less apparent price advantages through redesign, reducing drop-offs caused by price sensitivity.

Click - Zoom In

Tap - Zoom In

We obtained the onboarding quiz questions from the client. After multiple meetings and collaborations with our client, we finalized the redesigned version of User Flows.


This new User Flow serves the following purposes:

We obtained the onboarding quiz questions from the client. After multiple meetings and collaborations with our client, we finalized the redesigned version of User Flows.


This new User Flow serves the following purposes:

WireFlow

WireFlow

Traceable data layout

Traceable data layout

Cost-effective frontend code development

Cost-effective frontend code development

Simple and understandable workflow

Simple and understandable workflow

Accurate user preferences and product recommendations

Accurate user preferences and product recommendations

Streamlined quiz process

Streamlined quiz process

Our Client

" Before you design the wireframes, I have some design ideas. "

" Before you design the wireframes, I have some design ideas. "

Graphical variant options format

Graphical variant options format

Providing sufficient space for text editing

Providing sufficient space for text editing

A drop-down menu is a must (web development constraints)

A drop-down menu is a must (web development constraints)

April

April

As a coffee lover, I want to subscribe to an affordable monthly specialty coffee package plan so I can enjoy coffee at home.

As a coffee lover, I want to subscribe to an affordable monthly specialty coffee package plan so I can enjoy coffee at home.

User Story

User Story

Legend

Legend

Click - Zoom In

Tap - Zoom In

Before

After

Landing page:

  1. Complex navigation bar

  2. Muddled landing page themes

  3. Heighten reading distractions with excess information

  4. Jumbled color blocks disrupt reading flow

  5. Unbalanced text-to-image ratio

Landing page:

  1. Complex navigation bar

  2. Muddled landing page themes

  3. Heighten reading distractions with excess information

  4. Jumbled color blocks disrupt reading flow

  5. Unbalanced text-to-image ratio

Landing page:

  1. Complex navigation bar

  2. Muddled landing page themes

  3. Heighten reading distractions with excess information

  4. Jumbled color blocks disrupt reading flow

  5. Unbalanced text-to-image ratio

Improvements:

  1. Streamlined navigation bar

  2. Crisp landing page themes

  3. Minimize distractions from excess info

  4. Employ sizable color blocks for readability

  5. Balance text-to-image ratio for better engagement

Improvements:

  1. Streamlined navigation bar

  2. Crisp landing page themes

  3. Minimize distractions from excess info

  4. Employ sizable color blocks for readability

  5. Balance text-to-image ratio for better engagement

Improvements:

  1. Streamlined navigation bar

  2. Crisp landing page themes

  3. Minimize distractions from excess info

  4. Employ sizable color blocks for readability

  5. Balance text-to-image ratio for better engagement

Before

After

Q&A Pages:

1. Text-only display, no images

  1. Inconsistent design style

  2. Keep redundant progress bar

  3. Exclude unnecessary shadows

  4. Change the primary button design for a distinct call to action

Improvements:

  1. Enhance info presentation with images

  2. Unify text, color, and layout style

  3. Cut redundant elements like progress bars

  4. Omit unnecessary shadows

  5. Establish uniform primary button design

Before

After

Product info Page:
1. Dull and overwhelming content

  1. Unappealing pricing details

  2. Lackluster use of current moment bias

  3. Insufficient unconventional choices for specific users

Improvements:

  1. Sleek options with streamlined info

  2. Use the bandwagon effect to reduce price sensitivity (e.g. $/cup)

  3. Apply current moment bias to hasten decision-making (e.g. Best Value)

  4. Expand dropdown menu for unique

Before

After

Q&A Pages:

1. Text-only display, no images

  1. Inconsistent design style

  2. Keep redundant progress bar

  3. Exclude unnecessary shadows

  4. Change the primary button design for a distinct call to action

Improvements:

  1. Enhance info presentation with images

  2. Unify text, color, and layout style

  3. Cut redundant elements like progress bars

  4. Omit unnecessary shadows

  5. Establish uniform primary button design

Before

After

Product info Page:
1. Dull and overwhelming content

  1. Unappealing pricing details

  2. Lackluster use of current moment bias

  3. Insufficient unconventional choices for specific users

Improvements:

  1. Sleek options with streamlined info

  2. Use the bandwagon effect to reduce price sensitivity (e.g. $/cup)

  3. Apply current moment bias to hasten decision-making (e.g. Best Value)

  4. Expand dropdown menu for unique choices