bundle organics final report
TRANSCRIPT
Bundle Organics: UX Research & Design
Lisa Martens | [email protected] | in/lisamariemartens
Justin Araujo | [email protected] | in/justinaraujo
Kelli Vanover | [email protected] | in/kellinicholevanover
Concept Created By:
Table of Contents
Research
Design
Next Steps
1
2
3
User Surveys Purchasing Habits During Pregnancy SiteNavigationIn-Depth InterviewsContextual Inquiry In-Store Purchase Online PurchaseUser Persona DevelopmentComparative Analysis Product Page Account Management Product&CompanyInformation Social & ReferralsTechnical Research Requirements&Restrictions
Site MapUser FlowsWireframes & Usability TestingHi-Fi Mock-Ups w/TechnicalSpecificationsInteractive Prototypes Web Mobile
RecommendationsContact Info
Research
User Research
User Surveys
User Surveys
1 2 3
In-Depth Interviews
1 2 3
Interview 1
Interview 2
Patricia, mother of three, 32, Long Island
Insights gained from our first interview were particularly interesting as they highlighted further what we discovered in our survey--pregnant women seek information from doctors first and foremost. The internet was a secondary resource. We also discovered that each pregnancy is different--cravings, morning sick-ness, energy level, etc. Every mother experiences every pregnancy differently. The most impartant thing to Patricia was knowing that the product is healthy for the baby--understanding how the ingredients benefit the baby and mom. It is also important to understnad that for this particular mother, time is key. She says “moms don’t have time to click around”. We translated this into our main page redesign. The information that is most crucial to mothers deciding to purchase Bundle Organics needed to be front and center--a way to educate consumers and legitimize the product--in order to get the consumer to make it past the home page.
Valerie, currently pregnant and mother of one, 42, Washington DC.
Insights gained from our second interview were particularly interesting as they highlighted something that was not necessarily uncovered by our survey--pregnant women are uncertain of how they will react to the taste of the product. This particular mother provided insight that she would not be convinced to buy some-thing without trying it first. She would rather purchase in store first, then determine if she wanted to buy more. Additionally, she would need to be convinced that the product was better than what she could buy at a Whole Foods--needed a clear understanding of why the product is beneficial. This mother also trust-ed the recommendations of other mothers and appreciated their advice--she would speak to friends who were pregnant as well as trust annonymous sources on the internet.
User Personas
1 2 3
User Personas
1 2 3
User Personas
1 2 3
Introduction
Contextual Inquiry
1 2 3
In-Store Purchase
Online Purchase
Upon entering the store we all assumed we would be able to find the product near the cash reg-isters. after making a full round through buy buy baby. We made it to the cash wrap and just be-fore the exit doors we noticed the product in the cooler mixed with the Coke products. There was signage for pricing for the coke products alone. We asked a buy buy baby employee if the product was offered in multi packs in shop. she replied ‘I don’t think so let me check”. This automatically tells us that your brand has no inshore representation and this sales person had no knowledge of you.
Shipment came carefully packaged with the box but we noticed the 3 pack we ordered came as three individual bottles not a packaged 3 pack. Other package contents included a promo card for a radiation blocker which we questioned was approved by the bundle team and brand card with a hashtag “pregnancy problems”. Which is counterproductive to wanting to bring light and joy to pregnancy.
ComparativeAnalysis
1 2 3
User FlowsSite Map
Blue Apron
•FAQs
•Get Started Today (4)
Learn More On The Menu Pricing Gifts Market Sign In | Sign Up
Get Free Recipes From the Blog Gifts
Links to Endorsements & Press
Follow Us
Blog Contact & FAQ Cookbook Suppliers Gifts Jobs Press Team Privacy Terms
Footer
Menu Bar
•Select 2-Person OR Family Plan
•Links to (6) Recipes
•Cookbook
•Get Started Today (2)
•FAQs
•Select (3) Knives & Prep
Cookware & Bakeware
Pantry
Cookbooks
Gift Sets
Basket
•Welcome
•Preferences
•Delivery
•Payment
Blog
Careers
Terms
Interesting Features Process Page Browse Flow & Navigation Subscription FlowProduct Page
2/4/2015 screencapture-www-blueapron-com-market-products-chef-petty-knife-set.png (1172×1769)
filesystem:chrome-extension://fdpohaocaechififmbbbbbknoalclacl/temporary/screencapture-www-blueapron-com-market-products-chef-petty-knife-set.png 1/1
2/4/2015 screencapture-www-blueapron-com-pages-sample-recipes.png (1172×1366)
filesystem:chrome-extension://fdpohaocaechififmbbbbbknoalclacl/temporary/screencapture-www-blueapron-com-pages-sample-recipes.png 1/1
2/4/2015 screencapture-www-blueapron-com-pages-learn-more.png (1172×2627)
filesystem:chrome-extension://fdpohaocaechififmbbbbbknoalclacl/temporary/screencapture-www-blueapron-com-pages-learn-more.png 1/1
2/4/2015 screencapture-www-blueapron-com-pages-pricing.png (1172×1795)
filesystem:chrome-extension://fdpohaocaechififmbbbbbknoalclacl/temporary/screencapture-www-blueapron-com-pages-pricing.png 1/1
2/4/2015 screencapture-www-blueapron-com-market.png (1172×4466)
filesystem:chrome-extension://fdpohaocaechififmbbbbbknoalclacl/temporary/screencapture-www-blueapron-com-market.png 1/1
2/4/2015 screencapture-www-blueapron-com.png (1172×3230)
filesystem:chrome-extension://fdpohaocaechififmbbbbbknoalclacl/temporary/screencapture-www-blueapron-com.png 1/1
2/4/2015 screencapture-www-blueapron-com-users-sign_up.png (1172×734)
filesystem:chrome-extension://fdpohaocaechififmbbbbbknoalclacl/temporary/screencapture-www-blueapron-com-users-sign_up.png 1/1
2/4/2015 screencapture-www-blueapron-com-account.png (1172×994)
filesystem:chrome-extension://fdpohaocaechififmbbbbbknoalclacl/temporary/screencapture-www-blueapron-com-account.png 1/1
Meal Options Market Product Page How It Works Page Plan Options Main Page—MVP Market Product Categories Sign Up Process
Account Page
Main
Sign UpWelcome
•Email•Zip Code
Preferences Delivery Payment Subscription Complete
Sign Up Process
Main
Market Cookware & Bakerware Product: Non-Stick Pan Add to Basket Checkout Place Order
Purchase Product
ComparativeAnalysis
1 2 3
Interesting FeaturesProduct Pages Browse Flow & Navigation
Menu Bar
Footer
Site Map
Clover Juices
•Juices (15)
Clover Juices Nutritional Benefits Our Story Press FAQs Blog
Mission From the Blog
Clover All Over
Footer
Menu Bar
Contact Us
•Fresh Produce (22) •Mission•Clover Community•Clover Culture
•Press Links (24), blog style
•5 W’s drop downs •Blog Posts•Search function in blog
•Locations•General Inquires•Press & retail inquiries
Contact UsMission PageMain Page
ComparativeAnalysis
1 2 3
Dollar Shave Club
•Shave Butter
•Dollar Shave Club
•Post Shave
•Wipes•Products
•Shipping Details
•Share the Club
•MembershipSettings
•More Information
•Select Blade
•More Information
•Select Product
•Add Quantity
•Home•Our Blades•Our Products•How It Works•Club Reviews•Gift
•Buy Gift Card•Redeem Gift Card
•Your Account•Share the Club•Logout•FAQ•Contact Us
•Do It
•Join
•Read Reviews
Menu Our Blades Our Products How It WorksHow It Works How It WorksReviews AccountMenuMenu Our Blades Our Products How It WorksHow It Works How It WorksReviews Account Box
•Dollar Shave Club
•Shave Butter
•Post Shave
•Wipes
Interesting Features
Process Page
2/3/2015 screencapture-www-dollarshaveclub-com-how-it-works.png (1238×1844)
filesystem:chrome-extension://fdpohaocaechififmbbbbbknoalclacl/temporary/screencapture-www-dollarshaveclub-com-how-it-works.png 1/1
Product Page
2/3/2015 screencapture-www-dollarshaveclub-com-our-blades.png (1238×1287)
filesystem:chrome-extension://fdpohaocaechififmbbbbbknoalclacl/temporary/screencapture-www-dollarshaveclub-com-our-blades.png 1/1
Browse Flow & Navigation
2/3/2015 screencapture-www-dollarshaveclub-com-blades.png (1238×1205)
filesystem:chrome-extension://fdpohaocaechififmbbbbbknoalclacl/temporary/screencapture-www-dollarshaveclub-com-blades.png 1/1
Menu Bar
Footer
Side Navigation (Hamburger Menu)
2/3/2015 screencapture-www-dollarshaveclub-com-your-account.png (1238×2065)
filesystem:chrome-extension://fdpohaocaechififmbbbbbknoalclacl/temporary/screencapture-www-dollarshaveclub-com-your-account.png 1/1
2/3/2015 screencapture-www-dollarshaveclub-com.png (1238×1275)
filesystem:chrome-extension://fdpohaocaechififmbbbbbknoalclacl/temporary/screencapture-www-dollarshaveclub-com.png 1/1
Main Page
Subscription Flow
2/3/2015 screencapture-www-dollarshaveclub-com-our-blades.png (1172×1945)
filesystem:chrome-extension://fdpohaocaechififmbbbbbknoalclacl/temporary/screencapture-www-dollarshaveclub-com-our-blades.png 1/1
2/3/2015 screencapture-www-dollarshaveclub-com-our-blades.png (1172×1640)
filesystem:chrome-extension://fdpohaocaechififmbbbbbknoalclacl/temporary/screencapture-www-dollarshaveclub-com-our-blades.png 1/1
2/3/2015 screencapture-www-dollarshaveclub-com-our-blades.png (1172×1661)
filesystem:chrome-extension://fdpohaocaechififmbbbbbknoalclacl/temporary/screencapture-www-dollarshaveclub-com-our-blades.png 1/1
2/3/2015 screencapture-www-dollarshaveclub-com-our-blades.png (1172×1658)
filesystem:chrome-extension://fdpohaocaechififmbbbbbknoalclacl/temporary/screencapture-www-dollarshaveclub-com-our-blades.png 1/1
User FlowsSite Map
Main Page
Our Blades Choose Blade Choose Products Shipping Info Billing Info Order Complete
Account
Manage Account
Add Products
Share the Club
Membership Settings
Main Page
Menu Buy Gift Card Customize Gift Card Finish Up Order Complete
Main Page
How It Works Read Reviews Our Blades Choose Blade Choose Products Shipping Info Billing Info Order Complete
Main Page
Account Management
Buy Gift Card
Skeptic Purchase
Quick Purchase
FAQ Press Privacy PrivacyPrivacyLocation
Contact Us Our Blades Our Products
Club Reviews Our Blades
Social Media
Location
Footer
Main Page “Do It” “Enlightened Customer”
“Our Blades” “Delivered Each Month”
“Free Blades for Life”
Links on Main Screen
Menu Bar
Technical Research
1 2 3
Backend Advice from John Bell, Web Design Intensive Student at General AssemblyContact: [email protected]
Taking Bundle Off ShopifyAs a developer, I noticed Shopify and Chargify are your two forms of accepting payment.I recommend that you eliminate having dual shopping carts, as it offers no benefit to Bundle or the end-user. In fact, the lack of continuity between the two carts is what I would think is the main cause of confusion for customers. Furthermore, it seems the framework that Shopify was written with (batman.js) is depreciated, and no longer being maintained. Where this may not cause any problems at the current moment, it is likely that security flaws will be exposed that CANNOT be patched/updated.
SolutionsBecause you have a small number of products (under 500), it is my professional opinion that using an entire shopping cart suite is more difficult that it needs to be, and provides little benefit. To solve this problem, I would recommend having a cus-tom “back end” built for the site. While this sounds daunting, it will ensure that you have the exact functionality you need (i.e. managing subscriptions).
Details about a custom back end that would benefit you:
•Database containing products: contains each product and associated information. These can be updated, added and re-moved.•The site will display all products in the cart, or whichever you specify.•Each product will link to an ‘order page’ (more on this later)•Database containing ‘subscriptions’: A backend designed this way can handle thousands of products without issues, giving you the ability to show individual or multiple products as you see fit. Categories and ‘product groups’ can exist and easily be manipulated.•Database containing ‘subscriptions’: By saving the subscription data directly to the server, we can allow users to modify their subscriptions. They can change what drinks they want to receive and receive a confirmation of the edited order. They can also receive emails periodically reminding them to check or change the status.
By having a custom back end, the options for editing/maintaining are endless:
Ordering with PayPalBecause the total number of products is small (anything under 500, we consider small) I recommend using a pre-existing system to receive payments and process orders. Something like Paypal would be PERFECT to work as the “middle man.” This is easy to set up and will provide a quicker, easier to use cart for customers. It will also eliminate the split between Shopify and Chargify. Paypal can handle individual items, as well as recurring charges.
Coding Language•I recommend using a backend built with Ruby/Ruby on Rails, because it is powerful, easy to use, quick to maintain and de-ploy. It also scales extremely well. Front end work should stick to HTML5/CSS to ensure compatibility across all browsers. •In order to be mobile-responsive I’d recommend using Skeleton’s framework. (getskeleton.com)
Time/Cost to Build•The rebuilding of the site and the associated back end should roughly be a 1 to 2 week project (@40hrs/week)•Junior-level rails developers and front end designers have a working rate of $75/hr.•Senior level rails developers are roughly $125-$175.•This will ensure you have a site that can grow with your business, rather than being limited by the shopping carts the site is currently built around. Adding and removing features are limited to your imagination, rather than the limitations of the pre-existing framework.
Other BenefitsFeeds of images from Instagram can easily be incorporated by making simple API calls in the rails back end. This will allow you to have an Instagram account of your own, where you ‘like’ appropriate images related to the brand, and the site will show a feed of these specific images.
Design
Site Map
1 2 3
Bundle Organics
Site Map
•Currently goes directly to juice product page•List product(s) in drop-down format to allowfor product expansion
Our Products Our Story Give a Bundle Our Blog
Newsletter Sign Up
Follow Us
Footer Navigation
Menu Bar Navigation
Account
•Link to Gift Card Page•Bundle Organics “story”•Product creation process
•Link to Blog Page; Access all blog posts
Our Products Our Story Give a Bundle Our Blog Account
Contact Us
FAQs
Terms & Privacy
MoreTo Press
Page
Press
•Links to Account Management Page
On Bundle Organics Site
Off Bundle Organics Site
Key
User Flows
1 2 3
Subscription: Edit Membership
Main Page Account Next Order
Personal Details
Refer a Friend
Email Notification
Pause/Start
Payment Info
Addresses
Name & Email
Copy/Paste Code
Social Media
Subscription Details
Favors
Amount
Frequency
User Flows
Main Page
Purchase Flows
Our Products
Look over main page:•Products•Our Process•Doctor Recommendations
Juice Product Page
Subscribe
At this time only one productWill require choice when more added
Determine Product Details:•Product Flavor•Product Amount*Variety Pack or Not•Product Frequency (1-time or subscription)
Add to Cart
Create Account
Guest Checkout
•Create an Account (intended for people ordering for self)•Guest Checkout(intended for gifts, select gift option,will change type pf packaging)
Enter the following:•Name•Email (password for Account)•Shipping Address•Billing Address•Payment Info(Information stored if account created)
Confirm Information Page Completed
Wireframes&Testing
1 2 3
Our$Products Our$Story Give$a$Bundle Our$Blog Account
Our$Products Our$Story Give$a$Bundle Our$Blog Account
OrdersPayment infoRefer a friend
JuicesOur Doctors
Process
Seen in…
More
Follow Us
Sign up for our Newsletter!
Contact.UsFAQsTerms.&.Condi7ons
Menu Navigation
Footer Navigation
1.1
1.2
2.1
2.2
3.1
3.2
1.1 1.2 2.1 2.2 3.1 3.2
Testing revealed that this was the first place users clicked, so we wanted this to link directly to product pages.
Like the Products drop down, this allows you to see many of the main services provided on the account management page.
The account tab was a new edition to the menu to account for users need to manage subcrition orders once created.
Drop down menu allows for users to view products avail-able. We eliminated the redundancy of a multi-product page .
User testing revealed the press was better served at the forfront of the main page--placed on footer so consistant throughout site.
More links to the priginal press page for more infor-mation, which is buried within the site. This placement provides direction to user.
Wireframes&Testing
1 2 3
Products
Produce
Process
Advisors
Doctor&Norwitz Doctor&Erick
Doctor Norwitz’s info and contributionsDoctor Norwitz’s info and contributionsDoctor Norwitz’s info
Doctor Erick’s info and contributionsDoctor Erick’s info and contributionsDoctor Erick’s info and contributions Doctor Erick’s
Fruit Veggie Fruit Veggie
Seen in…
More
Follow Us
Sign up for our Newsletter!
Contact&UsFAQsTerms&&&Condi?ons
Step&1 Step&2 Step&3 Step&4
Our$Products Our$Story Give$a$Bundle Our$Blog Account
Home Page
1
2
3
4
1
This showcase on the main page high-lights the products that are available--this is the second place users thought to look for contaxt on site and products offered. This links directly to the corre-sponding product page.
2
This section indicates the ingredients used within the products--but could be used to communicate in a high-level manner they “types” of ingredients and sourcing of those ingredients. Users re-vealed they wanted to know more about the product ingredients-and this section serves this purpose.
3
User interviews and testing revealed that user trust doctors above all other sourc-es when it comes to preganacy matters. Based on this feedback, we felt it is im-portant to highlight the role the advisors play within the product creation process. Not just a bio, but speaking more to their input into the product.
4
This space is used to explain the pro-cess--basically what the user should expect. It acts as a guide to the process of --let’s say subscribing--choose these 3 things, place order, recieve order in 5 days, edit subscription anytime. It doesn’t have to be a step process, but testing revealed there was little underst-nading of what to expect when ordering from the site.
Wireframes&Testing
1 2 3
Fruits'&'Veggies''''''''''''A good source of potassium, plus a powerful combo of
Other'Flavors
The hint of sweetness – that’s the apple talking. The little kick - that’s the ginger and lemon, which also combats energy slumps and fights nausea (Can you say first trimester? And sometimes second… and third!). The bit of wow – that’s the perfect combo of folic acid and calcium (hello, kale, you little wonder!).
Add to cart3
$18
Subscribe
Make'a'variety'pack
Vitamins Reviews'''''''''''''''''''''''Store'Locator'''''''''''''''
orange carrot berry ginger
A good source of potassium, plus a powerful combo of A good source of potassium, plus a powerful combo of A good source of potassium, plus a powerful combo of
Product Page
1
2
3
4
5
Seen in…
More
Follow Us
Sign up for our Newsletter!
Contact.UsFAQsTerms.&.Condi7ons
Our$Products Our$Story Give$a$Bundle Our$Blog Account
6 7
9
9
11
1
2
3
4
5
6
7
8
9
10
11Select flavors options--same productDisplay 2
views--same as current
Ability to create variety pack on product pageimages
showing ingredient qualities
Users preferred ability to add to cart ..testing shows
quantities were confus-ing-wanted to see it displayed
Lists of ingredients and how they specifi-cally benefit mom&baby
...and subscribe from same product page
Users want-ed reviews on product page-utilized Amazon instead
how added vitamins benefit mom & baby--us-esrs wanted explanation
users want-ed ability to taste first--may locate in store
8
Wireframes&Testing
1 2 3
Next Order
Email&Reminder
Pause
5 Oct2015
Subscription Details Order History
Flavors
Amounts
Frequency 1 2 3
3 3 3
1 1 1G P O
Month Month MonthDateDateDateDate
Personal Details Refer a Friend
Social Media Code
EmailNicole Rodriguez [email protected]
2425 Northcrest DrivePort Washington, New York 11203
Payment Info-8181 01/15
Our&Products Our&Story Give&a&Bundle Our&Blog Account
Message here
Item DescriptionItem DescriptionItem DescriptionItem Description
Shipping Address
Name & Email Address
Seen in…
More
Follow Us
Sign up for our Newsletter!
Contact&UsFAQsTerms&&&CondiAons
Account Management Page
5
6
7
8
4
10
11
9
1
2
3
4
5
6
7
8
9
10
11email re-minder on/off option
Users wanted to know next-shippment date
ability to edit personal details: name,email, addresses, payment
Ability to pause sub-scription and restart
...amounts...
Ability to edit subscription de-tails: frequency...
Lists of ingredients and how they specifi-cally benefit mom&baby
...and flavors
or utilize copy/paste for code
refer a friend through social media
or send email with message to friends to recommend product
1
2
3
Hi-Fi Mock-Ups
1 2 3
Menu Navigation
Footer Navigation
1 542 3
1 542 3
Links to product pages--drop down displays all products offered
our story links to the our story page
give a bundle links to giftcards page
blog links to the cur-rent blog page
my account links to the my account page
6 1097 8
Social media links Links to the press cov-erage of Bundle--links directly to each coverage page
Sign up for email news-letter--remains same as is currently
Links to Bundle’s press page with all press showing
Links to Contact Us, FAQs, and Terms & Conditions pages
67
8
9
10
Hi-Fi Mock-Ups
1 2 3
Home Page Our Story Page
Links to our story page--explains how things work and what customers should expect--broad values of Bundle Organics
1
2
3
4
5
6
7
8
1
4
2
3
5
6
7
8
Explanation of advisor’s role in the product creation pro-cess--links to our story page
Ingredients and sourcing of ingredients that go in prod-ucts-links to our sotry page
Links to prod-uct page--in this instance only 1 product with different flavors
Ingredients and how they are sourced
Bundled Life--social media feed that enhances the brand experi-ence
Bio of advisors and how they are involved in the product development process
Story of Bundle Organics--why do you exist?
Hi-Fi Mock-Ups
1 2 3
Product Page
1
2
3
4
5
7
6
1
5
42 3
6 7
Selecting one of these images changes large image display and infor-mation relevant to that flavor of product
Checking the box for variety pack displays a drop down of three flavors with boxes for each amount--quantity and cart/subsribe drop down
Quantity box darkens when selected and changes price displayed
Available options are in red, unavailable options remain greyed out until criteria, displayed un-derneath, are met.
Subscribe is greyed until 12 or more in the quantity section is selected. Will turn red once criteria is met.
Accordion will minimize and maximize based on selection of + or - sign.
Store locator shows nearest locations based on current location where products are sold
Hi-Fi Mock-Ups
1 2 3
Account Management Page
12
3
4
5
7
1
5
42 3
6 7
Email reminder toggles on and off
Pause button displays when subscription ser-vice is turned on. Same button displayes resume when subscription is turned off.
Month drops down revealing 1, 2, or 3 months selection
Quantity of bottles is drop down reflecting that numbers available on product page--12,24,36--as those are the quantities available for subscription
Quantities per flavor dirctly correlate with the total quantity selected.
Ability to edit message sent ot social media and through email.
Links to customer Face-book, Twitter, and email accounts.
6
Hi-Fi Mock-Ups
1 2 3
Mobile Navigation Menu
Mobile Navigation Footer
Hi-Fi Mock-Ups
1 2 3
Mobile Home Page
Hi-Fi Mock-Ups
1 2 3
Mobile Product Page
Next Steps
Recommendations
1 2 3
Design Recommendations
•A hero image/text that shows an active, vibrant woman who happens to be pregnant, but is not defined by her pregnant belly•Bringing the nutritionist and doctor to the front and making press more apparent to increase trust in the brand•Putting the store locator on the product page so moms-to-be can try sampling •Bundle before committing to a subscription•Adding reviews to product pages so gifters can see that moms would want a Bundle•Describing the process in detail so moms-to-be can see why this product is special•An Account page where moms can manage their subscription and send coupon codes to their friends
Developer Recommendations
•Move away from Shopify because the framework it was built on is no longer being maintained, and this could mean security weaknesses down the road•Use Ruby to develop a back end that would allow for an account page to manage sub-scriptions on-site and to reward members who recommend Bundle•Cultivate your feed so only photos you ‘like’ or approve of show in your feed (preserve brand image, prevent ‘accidents’)•Skeleton’s framework will ensure that the site is responsive and works on all devices, not just desktop or one particular type of phone
Thank You!
Concept Created By:
Web Development Consultants:
Please let us know if you have any additionalquestionsorcomments.
It has been a pleasure working with you!
1 2 3
Lisa Martens | [email protected] | in/lisamariemartens
Justin Araujo | [email protected] | in/justinaraujo
Kelli Vanover | [email protected] | in/kellinicholevanover
John Bell | [email protected] | in/johnrbell
Ed Brooks | [email protected] | in/edbrooksio
Zac Messinger | [email protected] | in/zacmessinger