E-Commerce Website for I’m Vegan Nuts Cookies
Project Duration:
Client:
Tools:
Platform:
Role:
Overview
I’m Vegan Nuts, LLC is an independently owned and operated vegan bakery that offers extravagant and delicious cookies delivered right to your door. I’m Vegan Nuts has no storefront or website but an established social media channel where they are currently funneling all their sales.
PROBLEM
I'm Vegan Nuts does not have any branding or a website. Without a proper brand and website business, I'm Vegan Nuts is missing out on a substantial customer base and therefore capping its growth.
APPROACH & DELIVERABLES
A responsive website design. UI, Logo and Brand Design.
Process
The process for this project includes the following:
User Interviews and findings
Competitive Analysis
Use Cases
High Level Design Goals
User Persona
Site Map
Task Flow
Lo-Fi Wireframes
UI Kit
Usability Test
Affinity Map
Iterations
Final Screens
Research
USER INTERVIEWS AND FINDINGS
To get better insights into this market space, I went into a research phase focused on two methodologies: user interviews and competitive analysis. First, user interviews were conducted to understand customer experiences better when ordering cookies online. I recruited four people who had purchased cookies online before.
.png)
Interview Findings
Motivation
- Seamless searching and purchasing process when ordering cookies online.
- Purchase cookies for themselves, friends, and family members.
- Explore and have all questions regarding the product, manufacturing and shipping answered.
- Find unique and tasty treats to send their loved ones.
Pain Points
- Not having a lot of options of packages to send to their family and friends.
- Lack of detail of cookies on Instagram when shopping.
- Not being able to track or follow your order when ordering.
- Have to wait for the owner to respond to a direct message on Instagram before placing an order.
Primary Goals
- Order favorite cookies and packages online.
- Entice appetite. Enhance mood.
- Purchase cookies as a gift to their loved ones.
- Ease-of-use
- Assurance.
Competitive Analysis:
Many companies sell cookies and baked cookies online. I conducted a competitive analysis to analyze the top bakers locally and nationally to understand the critical product offerings and features to include in this design.
.png)
SUMMARY OF COMPETITIVE ANALYSIS:
Current popular bakery websites such as Milkbar, Levain, and Insomnia Cookies offer a vast selection of detailed information and reviews of the different cookies/baked goods. I have seen that Milkbar has done the best job representing its product details, ingredients, and delivery methods. In addition, the beautiful imagery of their products gives the user a sense of desire, comfort, and assurance when ordering.
Summary of research findings:
Selling cookies on an e-commerce site applies to all demographics, male or female, old and young. The process of interacting and purchasing said cookies should be a fun and enjoyable experience. Therefore the branding for I'm Vegan Nuts should be fun, energetic, and creative. Their website design should be engaging and showcase their cookies with high-resolution imagery. The UX of the website should incorporate features seen in competitors to make browsing, adding, and purchasing cookies a pleasurable experience. Lastly, there should be transparency within the brand to showcase the company's background and vision.
Synthesize
USE CASES
“I need a cute gift for my mother for mothers day.”
“I want to send tasty treats to my team members.”
“Those cookies look amazing, I want one right now!”
HIGH LEVEL DESIGN GOALS
Needs
- High resolution large imagery of cookies and packages.
- Have different selections of curated cookie packages.
- Show cookie details, ingredient and shipping information.
- Offer customizable packages for users to build there own boxes.
- Feature social media channel to grow more audiences.
- Design a brand identity and logo to reflect company's goals.
Motivations
- Show that they care about their employees.
- Showing love to their significant others, family members, and friends.
- See all relevant product information about the cookie ingredients, allergens, and shipping details.
- To track their order to oneself or desired recipient.
- Learn more about I’m Vegan Nuts as a company, story, and background.
USER PERSONA
I synthesized a user persona based on my user interviews and competitive analysis. This persona will help me stay aligned with my user goals and motivations and set key pain points that must be solved users.
Ideation
SITEMAP
I conducted a tree testing study to evaluate the hierarchy and findability of information on the website. Keeping the layout straightforward and clean was essential to highlight the core products and packages of I'm Vegan Nuts.
User task flowchart
I established a user flow from a customer migrating from I'm Vegan Nuts' Instagram page to their new website. I used this flow to enhance the ease of movement through the I'm Vegan Nuts website and explore possible patterns a user may take to purchase a product. In addition, this user flow helped me determine what worked and needed improvement while assessing the efficiency of the interface I was creating.
LOFI WIREFRAMES
For these lo-fi wireframes, I began to set my blueprint to see if I was heading in the right direction. I wanted clear images on the "Shop all" page with a detailed product description to entice and inform the user.
UI DESIGN
reflecting company vision to design
After establishing the structure of my design, I created a UI Kit first to echo the I’m Vegan Nuts brand values. I wanted to capture the fun, informative, and outgoing nature a cookie company should have in this kit. I also created a logo to build a company persona of an enjoyable and charming bakery.
.png)
ui kit
colors
buttons
Images
TEST & ITERATION
USABILITY TESTING
After creating the branding and design, I created a prototype to test the functionality and to determine any necessary revisions. 4 users participated in this test.
Purchasing a pack of cookies
TASK INSTRUCTIONS
You just received an Instagram from I'm Vegan Nuts. After browsing their profile and delicious pictures, you decide that you want to place an order of an 8-pack of cookies for yourself. Starting on I'm Vegan Nuts, successfully purchased an 8-pack of "Coco Loco Butter" cookies.
TESTING NOTES
During this test, participants successfully selected and ordered the correct cookie package. However, there were some issues with accessibility issues within the footer and middle page break on the homepage. Testers also reported that the cookie tiles seemed unaligned and wanted more information for each cookie.
TASK COMPLETION RATE
Creating your own cookie package
TASK INSTRUCTIONS
After browsing the I'm Vegan Nuts cookie packages, you see an option to customize your cookie package. Starting on the homepage, navigate to the cookie customizer page, build your custom package and add it to your cart.
TESTING NOTES
Participants could complete this task with a 100% direct success rate. In addition, the feedback for the cookie customizer page had a positive reaction from testers, with the selection process for building your package being understandable and easy to interact with. Some testers had mentioned that the text under each cookie was hard to read.
TASK COMPLETION RATE
ITERATING ON DESIGN
During this usability testing, participants brought issues with the accessibility of some aspects of the design. There were also questions raised by the "All Cookies" page, with the layout being hard to digest and the lack of information for each cookie.
.png)
ITERATIONS
Creating your own cookie package
Cookie customizer tile.
- I had participants also review the cookie customizer screen. Many had said the cookie card text was difficult to read for some.
- To fix this, I encapsulated each cookie with a separate text underneath. I also altered the scrolling tile slightly with a more visible “X” button for each cookie tile.
.png)
Purchasing a pack of cookies
Optimizing structure and information on "All cookies page".
- Some participants mentioned that the cookie cards seemed “unaligned” and compacted. Others had said that it lacked essential information on allergens and ingredients.
- I aligned the text and imagery and increased the size of the fonts. I also included drop-down selections of more information about the cookie, including allergens, ingredients, and shipping details.
Homepage
Making footer and middle banner more accessible and engaging.
- The same contrast issues were present on the footer of the website.
- I corrected the contrast on the footer for better readability.
final screens
Home page
This design was to highlight all product offerings with a simple minimal Navigation Bar. In addition, these designs allow the company to input any future products the company may like to include.
CooKIE pAGE
The cookie page allows people to purchase a minimum of a four-pack to a maximum of 12 groups of one type of cookie. The user can also select the quantity of each pack. I wanted to include fantastic imagery and a descriptive description of each cookie to entice the user into purchasing. Below each cookie is further information if a customer has an allergy or is worried about the shipping.
COOKIE cUSTOMIZER PAGE
The cookie customizer page allows customers to build or curate their packages. I kept this design straightforward in steps. The user first selects their number of cookies per package, then selects their cookie, and selects an optional cookie wrapping and box sleeve. Building this gives I’m Vegan Nuts a unique feature as their offerings that separates them from their competitors.
conclusion
Creating this E-commerce design for them, the I’m Vegan Nuts cookie project was both an enjoyable and arduous experience. Knowing the importance of a new website for a company and being able to provide them with a design has been the most rewarding part of the process. In addition, creating a brand identity and building a company persona was a lengthy process, but satisfying to see it all tie in together.
My next endeavors for this project are to build out the rest of the website and to have it ready to be developed. Overall, I hope to work on similar projects in the future.
Creating brands and logos and crafting a website for a product was a truly gratifying experience.
