E-Commerce Website for I’m Vegan Nuts Cookies

Project Duration:

March 2022 (1 mo)


I’m Vegan Nuts


Figma, Miro, Adobe XD


Responsive Web Design


Product Designer


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.


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.


A responsive website design. UI, Logo and Brand Design.


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


Final Screens



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.

Interview Findings


  • 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.


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.



“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 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.


  • 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 task flowchart

assessing the flow

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.



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.


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.

ui kit






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


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.


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.



Creating your own cookie package


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.


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.





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.


Although my usability for my task had a 100% direct success rate, accessibility issues, and improvements still caused me to iterate on my original design.

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.

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.

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.


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.


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.


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.