Naturebox | product design
Designing key features for a ground-breaking digital product in the online food space
(opens in new window)
My Role
I joined Naturebox in 2012 as the company’s second hire, in charge of all design-related responsibilities in addition to wearing many other hats that an early-stage startup requires.
As our nimble e-commerce company grew to a team of over 100, we evolved our subscription box business model from monthly curated selections to fully customizable boxes. Our goal was to revolutionize snacking and reinvent the way people get healthy groceries!
Our website expanded from a simple shopping cart to a complex user interface allowing members to manage multiple accounts, filter products, write reviews, and edit their upcoming boxes.
My role in relation to the website was to dream big with the idea of customization by brainstorming possibilities, develop user flows, wireframes, and eventually polished high fidelity designs. I led company-wide design presentations and worked closely with our engineering team on a daily basis.
The Challenge
Understanding all levels of the business
Developing many of the different user interfaces required a deep understanding of all levels of the company’s operations - I spent time understanding our customer touchpoints and feedback, how fulfillment works, how and where our products are sourced, and how our company utilizes technology to recommend and filter snacks, much like Netflix’s algorithm for displaying new content.
It was also critical to understand the company’s vision for the future so that we could build a foundation and grow at a flexible yet rapid pace.
The Process
Our team took advantage of several different methods when developing features for the website and for envisioning the future.
Wireframes
We created wireframes using UX tools and checked in as a team so that there were plenty of opportunities from key stakeholders to ask questions
User Testing
I observed live and recorded user testing run by our product manager, which helped us refine our designs. We provided both wireframes and low-fidelity mockups during this process.
Site Flows
We mapped out site flows to understand how a user typically moves through the site while completing certain tasks.
Group Sessions
We held group sessions to list and assign value and priority to different feature ideas, asking questions like how relevant the feature is, how long will it take to build, and does it hold a certain ‘wow’ factor.
Sneaking a photo at the start of a branding white boarding session
The Solution
We created a user experience that was deeply personalized and delightful to use, and unique in the online food space!
The new site allowed us to gather important user behavior data to help guide future business decisions, do more strategic testing, and grow exponentially.
Highlighted Features
Design iterations of a product page, the snack pantry (queue) as a side bar vs. a top-down list
Catalog
The catalog allows users to see our full collection of snacks and easily filter based on several different categories, including dietary preferences, flavor profiles, and types of snacks. Each product page provided nutrition facts, photographs, reviews, related articles like recipe suggestions, and a CTA to add to your box.
Pantry
The snack pantry is a queue users build from catalog selections. It allows the user to see what snacks are coming in upcoming boxes. Users can drag snacks up and down the queue or include add-on snacks. As the business model evolved, we eventually allowed snacks for immediate purchase outside of the monthly subscription.
Screenshot of Dashboard view used for UX testing, observing users complete specific tasks to manage their accounts
Alternative layout for the dashboard with tabs at the top, highlighted pills to help onboard the user
Mobile view of the dashboard with an accordion UI for different sections
Dashboard
The dashboard allows the user to manage his or her account including seeing past and future orders, monitoring credits and referrals, and editing subscriptions.
We wanted to give users total control over the products that arrive each month. We allowed them to add additional snacks, update the quantity of each snack, save snacks so they are included every single month, choose a surprise snack, and even block snacks that they didn’t like.
Onboarding
After initial sign-up, we guide users through a brief snack quiz to get an understanding of their taste preferences, and then highlight the key functions of the dashboard.
Ratings
After each month’s box has been delivered, when the user returns to their dashboard we invite them to rate their snacks, which gives us more data to suggest snacks that they’re likely to love!
Results & Reflection
Naturebox offered the greatest learning experience of my design career so far. Working as part of a growing team with evolving business needs presented many challenges and rewards. I was with the company when we were just four people at a table in Palo Alto, and we grew to have a large office in Redwood Shores and multiple warehouses.
In the beginning as we first took on the idea of customization, we followed an agile approach, iterating on design and constantly working to improve at a rapid pace. Simultaneously, we were still figuring out who we were as a brand. I was still figuring out who I was as a designer, working as a Product Designer while also managing the other aspects of design at the company. We underwent an evolution in our brand voice, tone, and logo, before really finding our stride as a solution for smarter snacking. I was grateful as a designer to help form our Product & Engineering team which grew to include a stellar product manager and data scientist. Collaborating with great people made all the difference in developing a great product.
I’m proud of all of the work that we did in the early years which set the foundation for Naturebox’s evolved offerings today!