Cella
Responsive eCommerce website for a wine delivery service
What’s the problem?
Cella an online wine subscription service that pairs wines to each individuals palate preferences I was tasked with designing a responsive eCommerce website that would be attractive to millennials and to both experienced and inexperienced wine drinkers. Optimized for viewing on all devices, the new responsive website is to open up more avenues of delightful interaction between visitors and the Cella brand, so as to make a wine subscription more accessible and enjoyable.
Project Goals
Design a brand for the company that is modern and neutral enough to attract all types of people and styles.
Design a responsive e-commerce website that gives their global customer base easy access to their products in order to expand the reach of their business.
Who’s it for?
Cella’s target audience are successful, trendy, and youthful crowd. Cella will be directly targeting millennials and Gen-X- a demographic that traditional wineries have trouble reaching. The largest consumer group in the market sector, at 73M strong, Millennials tend to value transparency, quality, experience, and convenience above all when determining loyalty toward a product or service.
Research
To best inform design decisions, I developed and executed a research plan starting with competitive analysis and user interviews.
These were my research goals:
Identify the target users and learn about their previous experience with online subscriptions.
Identify customer’s unmet needs, current user’s needs, desires, and pain points when shopping for wine.
Understand preferred shopping modality of users. Do they prefer to shop with desktop, mobile, tablet?
Learn about the competitors’ strengths and weaknesses and how we can innovate to improve the overall shopping experience.
Research Methodologies
Primary Research: User Interviews
User research was conducted through 1-on-1 interviews with 6 users to learn about their experiences and patterns they follow when signing up for subscriptions and purchasing wine. I gathered as much as I could from users to gain insight about their goals, frustrations, motivations, and analyze the scope improvement by empathizing with them.
Secondary Research: Competitive Analysis
Identifying and analyzing some of the major competitors products, sales, and design strategies helped gain some insight into wine industry trends. Specifically how they are appealing to younger audiences and connecting their users to the wines they will most enjoy.
Research Findings
After reviewing notes from the interviews, these three themes emerged as high priority needs for Cella’s users:
Confidence
Users need confidence in the quality of the subscription before signing up. Reviews play a vital role by informing and encouraging the user that others are enjoying the subscription and so will they. The idea of the user reviewing each selection after delivery to improve the wine selection process was very well received and added to the confidence of these potential users.
Convenience
The majority of my research volunteers voiced that convenience was important to them when both singing up managing a subscription. Having the ability to easily customize their subscription options was very well received. Four of our six volunteers said that they don’t engage in any sort of subscription because of the financial commitment but being able to actively manage their subscription would greatly increase the chances of them signing up.
Clarity
The majority of my research volunteers said that the descriptions and information regarding the wine should be clear, informative, and easy to find. The experienced wine drinkers from my volunteer group shared that learning about the tasting notes greatly added to the anticipation of enjoying the wine and greatly increased the chances of them purchasing a wine if the description is prominent and well designed.
Quotes from interviews
User Journey Map
To understand a product or service from a user’s perspective, I use a user journey map. This user journey map describes the visualization of the steps the user takes achieve their goal: Take the palate preference quiz, review wines, checkout.
Some key insights that informed my design decisions came from this process of stepping into the users shoes and processing what tasks the user needs to accomplish, what they’re feeling, and beginning to visualize solutions to pain points the user are confronted with.
Competitive Analysis
I reviewed other competitors that offer a wine subscription service to better understand the expectations users may have and what solutions can be offered.
During the research, I identified a few products that offer similar features:
User Persona
Meet Ashley & Mike
I gained a lot of insight from my user interviews so I was ready to create Cella’s user personas. Kate and Mike were created to help us understand the potential users pain points and goals when signing up for a wine subscription.
Kate & Mike are both busy young professionals who make enjoying their free time off work a priority. Kate is a long time wine enthusiast and Mike doesn’t know much about wine but is interested in more familiar with wine and hopes a subscription could be helpful. Throughout the design process it helped to refer back to both personas and think about how I could best tailor my design to meet their needs.
Information Architecture
Site Map
I was ready to start mapping out what should be included on the site and what the foundational structure would look like. I created a site map which allowed me to envision what the site should include for the best user experience. From my research I knew I needed to already be thinking about features and pages that would solve existing problems in the wine shopping experience. Figuring out the best way to organize these pages was challenging but it always helps to have an idea of where you’re headed before diving into wireframes.
Interaction Design
User Flow
This user flow was a great way for me to see step-by-step how a user would get from the homepage, to selecting an item, adding it to their cart and then checking out. There are multiple paths a user could take to end up on the check out page and a task flow is very helpful in putting together the pieces. This process also helped me prepare to create my responsive wireframes.
Design
Lo-Fi Wireframes + Sketches
I sketch and design Lo-Fi wireframes early in the development process to establish the basic structure of a screen before visual design and other content is added. In earlier versions I struggled with how to best translate the desktop homepage to mobile. After iterating my wireframes I decided to keep the design minimal and focus on the collections with cards and engaging photography.
User Testing
I did two rounds of testing, once on the Lo-Fi wireframes and once on the interactive prototype. Once the interactive prototype was designed, I was able to conduct usability testing to study how users interact with the design and how it can be improved. I was curious to see how users navigated themselves around the site and to see if the checkout process made sense to them.
Test Goals:
Observe how users react to the design of the prototype
Observe how much time it takes users to complete tasks
Discover elements of the website that are frustrating to the user
Determine ways to improve the website for an optimal user experience
User testing was conducted with 6 users and was helpful to improve on the latest draft of the total product design. Two of the users had trouble viewing product details like tasting notes and wine descriptions. I was able to tweak some of the elements to improve the visibility of the wine descriptions in an engaging way. Another one of the users mentioned they would like to know how accurate the description was to actual Cella users. I added a description accuracy meter into the reviews to increase user confidence in the descriptions. I also received feedback that it would be helpful to easily customize your subscription preferences on the profile page. I designed and added a subscription customization section to the profile page. All of these iterations worked out wonderfully in the next round of testing. See below for a more detailed description of the changes:
Homepage
Product Page
Palate Preference Quiz
Membership Preferences
Responsive Wireframes
I made time to be sure that users could use the functionality of this product with multiple devices by also designing wireframes for tablet, and mobile (see the responsive homepage design below).
Prototype
After creating high-fidelity wireframes, I created a prototype for the user to accomplish a defined task.
Task 1: Take palate preference quiz, view wine selections, checkout
Task 2: Sign in and customize your subcription
Home
Product Page
Palate Preference Quiz
Wine Selections
Design System
Conclusion
My next steps for this product are to further improve the ability of the user to have as little or as much control over what wines they will receive in their order and make that part of the process a more captivating experience. I would also like to research other methods of subscription customization. From my research subscription customization was one of the major themes of importance and I think there’s a lot of room for improvement in this area. I’ve thoroughly enjoyed working on this product and hope to improve on it in the future. Thanks for viewing!