Crafting an e-commerce platform for a local chocolate brand

🍫 Project Overview

Ricci Chocolates is a proudly local, artisanal chocolate brand based in Baguio City. Known for its handcrafted truffles, pralines, and specialty chocolate creations, Ricci uses high-quality cacao sourced from local farmers in the Philippines. Each product reflects the brand's passion for fine craftsmanship, distinct flavors, and sustainable practices.

While Ricci has a strong local presence through in-person sales, it currently lacks a fully functional online platform to reach customers beyond the city.

Duration
My Role
Tools
The Challenge
Objective/Goal

6-8 weeks

UX/UI Design, Visual design, Branding, User flow, Research, Prototyping, and Testing

Figma, FigJam, Google Meet, Google Forms

Ricci Chocolates is renowned for its handcrafted truffles and commitment to supporting local cacao farmers and sustainable practices. However, the brand struggles with limited online presence, inconsistent communication of its advocacies, and a lack of convenient purchasing options for customers outside its physical store. The challenge is to create a responsive, user-centered e-commerce website that not only boosts sales but also showcases Ricci's values, enhances brand storytelling, and offers a seamless shopping experience for both local and nationwide customers.

To design and develop a responsive, user-friendly e-commerce website for Ricci Chocolates that strengthens its brand presence, increases accessibility to its products, and effectively communicates its advocacies.

My Design Process

  • Stakeholder Interviews

  • User Interviews

  • Competitive Analysis

  • Affinity Mapping

  • Problem Statement

  • User Personas

  • User Journey Mapping

  • Sitemap

  • Wireframing

  • UI Style Exploration

  • Prototyping

  • High-fidelity Wireframes

  • Usability Testing

  • What I learned

🍫 Empathize

The Empathize stage focused on deeply understanding both the brand's mission and its customers' needs. This began with stakeholder interviews to uncover Ricci's vision of promoting locally sourced cacao while delivering a premium chocolate experience. User interviews followed, gathering insights from potential customers about their buying habits, taste preferences, and frustrations with current online chocolate shopping options. To ground the project in market reality, competitive research analyzed local and international chocolate brands, studying their pricing, packaging, and e-commerce experiences. The data collected was organized through affinity mapping to identify recurring themes such as the importance of elegant packaging, convenient payment methods, and fast delivery.

stakeholder interviews

I conducted a stakeholder interview with the owner of Ricci Chocolates to gain a deeper understanding of the brand's vision, values, and business goals.

summary findings

Brand Identity and Vision

Business Goals

Target Audience

Current Challenges

  • Ricci Chocolates is rooted in Baguio City, specializing in premium chocolates made from local cacao and fresh ingredients.

  • The brand's mission combines delivering world-class flavors with supporting local cacao farmers and sustainable practices.

  • Increase online sales by offering a seamless ordering experience.

  • Extend reach beyond physical store visitors, targeting tourists after their visit and nationwide customers.

  • Showcase the brand's advocacies and unique sourcing process to differentiate from competitors.

  • Local Baguio residents purchasing for gifts and special occasions.

  • Tourists looking for premium souvenirs.

  • A growing segment of health-conscious consumers seeking quality ingredients.

  • No centralized online system for orders and inventory

  • Brand's reach is restricted by its reliance on in-store sales, which makes it difficult to attracts customers outside of Baguio City.

  • Brand storytelling is inconsistent in current online presence.

User interviews

After conducting user interviews with a mix of current Ricci Chocolates customers, potential buyers, and chocolate enthusiasts, several key patterns emerged. Many customers value Ricci's high-quality, artisanal products and unique flavors but express difficulty in accessing them outside of the city. Convenience was a recurrent theme; many preferred the option to order online with nationwide delivery, citing busy schedules or distance as barriers to visiting the physical store.

key questions

How do customers currently discover and purchase Ricci Chocolates?

What challenges do customers face when trying to buy Ricci products?

What do customers value most about Ricci Chocolates?

What features would encourage customers to buy more often?

findings

Product Quality & Taste

  • Most customers discover Ricci Chocolates through word-of-mouth, social media, or visiting Baguio.

  • Purchases are often made as gifts or souvenirs

Pain points

  • Lack of nationwide acessibility: difficult to buy outside Baguio.

  • No official online store, leading to confusion about ordering process.

  • Limited payment methods and unclear delivery options.

Website & Shopping expectations

  • Desire for an attractive, easy-to-navigate website showcasing products and Ricci's story

  • Clear product descriptions with pricing, ingredients, and nutritional info.

  • Convenient checkout with multiple payment options (GCash, cards, COD).

  • Reliable shipping across the Philippines.

competitive analysis

To better understand Ricci Chocolates' position in the Philippine artisanal chocolate market, I conducted a competitive analysis comparing key players. By evaluating their locations, product ranges, pricing, website capabilities, and brand positioning, we can identify gaps in the market and strategic advantages for Ricci. This analysis not only highlights the competitive landscape but also informs design and marketing decisions that will help Ricci build a stronger presence both online and offline.

affinity mapping

I created the affinity map by first gathering qualitative data from stakeholder and user interviews, focusing on direct quotes and recurring feedback. I then sorted these insights into related categories. By grouping similar thoughts together, I was able to identify key themes and patterns in how customers perceive Ricci Chocolates. This process helped transform scattered individual comments into clear, actionable insights, making it easier to pinpoint the brand's strengths, weaknesses, and opportunities for improvement in both product offering and digital presence.

Buying habits

"The truffles taste rich but not too sweet - perfect balance."

"I like that it's locally made but feels premium."

"The texture is smooth and melts in the mouth."

Packaging & Presentation

"I would buy more if the packaging looked more premium."

"I want packaging I can give as a gift without needing extra wrapping."

"The branding feels warm but could be more modern."

Online Shopping Experience

Price & Value

Availability & Accessibility

"I can't find Ricci Chocolates easily online."

"I wish there was a website where I could order directly."

"I don't know if they deliver outside Baguio."

"The price is fair for the quality, but I'd like smaller, more affordable gift packs."

"I buy only during special occasions because it feels like a treat."

"I usually buy when I visit Baguio, but I want them in Manila."

"Delivery should be faster, especially for gifts."

🍫 Define

In the Define stage, I synthesized all the information gathered during the empathize stage to create a clear direction for the project. This involved crafting a concise problem statement that outlined Ricci Chocolates' core challenge: bridging the gap between its premium local products and its limited online presence. I developed user personas representing Ricci's target audiences to ensure that design decisions remain human-centered and aligned with real customer motivations and behaviors and created a customer journey map to be able to determine the pain points of each user.

Problem Statement

Ricci Chocolate, a premium artisanal chocolate brand based in Baguio City, faces the challenge of having limited online visibility and accessibility despite offering high-quality, handcrafted products that support local cacao farmers. Without a strong digital presence, the brand struggles to reach a wider audience, showcase its unique story, and provide customers with a seamless way to discover and purchase its products online. This gap limits Ricci's potential to grow sales, strengthen brand recognition, and expand its impact on the local chocolate industry.

The Premium Gifter

user personas

I created the user personas for Ricci by synthesizing insights gathered from stakeholder interviews, user interviews, and competitive analysis. First, I identified key audience segments based on demographics, purchasing behavior, and motivations observed during the research phase. I then grouped similar patterns in user goals, frustrations, and preferences, ensuring that each persona represented a distinct customer type.

Anna Reyes

Age: 28

Occupation: Marketing Associate

Location: Manila

Background: Loves giving unique, premium gifts for birthdays, anniversaries, and holidays. Travels to Baguio once or twice a year and enjoys artisanal products.

Goals:

  • Find elegant, locally made gifts

  • Support small businesses and local artisans

  • Convenient online ordering and delivery

Frustrations:

  • Limited premium chocolate options online

  • Difficult ordering process for provincial brands

  • Inconsistent product availability

Preferred Channels: Instagram, Facebook, Shopify website

"I want my gifts to feel special and have a story behind them."

Carlo Mendoza

The Chocolate Enthusiast

"Chocolate is more than dessert, it's an experience."

Age: 35

Occupation: Architect

Location: Baguio City

Background: Passionate about gourmet food and artisanal chocolate. Willing to pay more for high-quality, ethically sourced products.

Goals:

  • Discover new flavors and brands

  • Learn the story behind the chocolate and sourcing

  • Enjoy premium chocolate as a personal treat

Frustrations:

  • Lack of information about ingredients and origins

  • Few local brands match international quality

  • Limited seasonal flavors or variety packs

Preferred Channels: Food blogs, Instagram, specialty stores

Maria Lourdes Garcia

The Thoughtful Tourist

"When I travel, I want to bring home something unique and worth sharing."

Age: 42

Occupation: Entrepreneur

Location: Cebu (frequent Baguio visitor)

Background: Visits Baguio yearly for leisure and buys local delicacies as pasalubong. Looks for products that represent the city's charm and quality.

Goals:

  • Buy premium souvenirs for friends and family

  • Support local businesses during travel

  • Easily find store location and prices online before visiting

Frustrations:

  • Not knowing store hours or exact location

  • Difficulty reserving items ahead of a trip

  • Limited marketing outside Baguio

Preferred Channels: Facebook, travel blogs, Google Maps

user journey mapping

For Ricci Chocolates, I created the user journey map by first identifying the key stages a customer goes through, from discovering the brand to making a purchase and eventually becoming a loyal customer. Using information from the research phase, I mapped out the touchpoints, actions, emotions, and potential pain points along the way. This process allowed me to visualize the complete customer experience, uncover opportunities for improvement, and ensure the website design would address real user needs while aligning with Ricci's brand goals.

🍫 Develop

In the Develop stage, the design process transitioned from research and definition into tangible solutions by structuring the website's content and visual direction. I began by creating the sitemap, which outlined the logical hierarchy of pages and ensured intuitive navigation for users. This provided the foundation for wireframing, where I mapped out the layout and placement of key elements to prioritize usability and guide the user's journey. Next, I explored UI style directions, experimenting with typography, color palettes, and visual elements that would reflect Ricci Chocolates' premium and artisanal brand identity. Finally, these elements were combined into interactive prototypes, enabling stakeholders to visualize and experience the proposed design in action and setting the stage for feedback and refinement before development.

sitemap

I created the sitemap by organizing Ricci Chocolates' content into clear categories like Home, Shop, About Us, and Contact, ensuring intuitive navigation and quick access to key pages such as Cart, Checkout, FAQs, and Search. The structure balances user needs with business goals, guiding visitors smoothly from browsing to purchase.

Wireframing

I began the wireframing process by sketching initial layouts on paper to quickly explore different design ideas and page structures for Ricci Chocolates' website. These low-fidelity sketches allowed me to focus on functionality and user flow without being distracted by visuals. Once the best concepts were identified, I recreated them in Figma as mid-fidelity wireframes, refining the layout, spacing, and hierarchy to ensure a smooth browsing experience before moving into high-fidelity design.

Paper Wireframes
mid-fidelity Wireframes
UI style Exploration

For the UI style exploration process, I focused on creating a visual style that reflected Ricci Chocolates' premium yet approachable brand identity. I carefully selected a font that balanced elegance and readability, ensuring it conveyed a sense of sophistication without sacrificing clarity. The color palette was inspired by rich chocolate tones paired with warm, inviting accents to evoke indulgence and comfort. To complement the design, I chose clean, minimal icons that enhanced navigation and reinforced the brand's refined yet modern feel.

PROTOTYPING

In the prototype process, I translated the wireframes and UI elements into an interactive model using Figma. This allowed me to simulate the user journey, from browsing products to learning about Ricci Chocolates' story and making a purchase. By linking screens and adding basic interactions, I was able to visualize how users would navigate the website and test the overall flow. The prototype served as a valuable tool for identifying usability issues early and provided a realistic preview of the final website experience.

🍫 Deliver

In the Deliver stage, I developed a high-fidelity prototype that closely reflected the final website, complete with polished visuals, refined typography, consistent color schemes, and real product images. This stage emphasized creating a seamless and visually engaging experience that aligned with Ricci Chocolates' brand identity. Once the prototype was complete, I conducted usability testing with potential users to observe how they interacted with the design, uncover pain points, and gather feedback. The insights from testing guided refinements, ensuring that the final product was both user-friendly and effective in communicating Ricci's story and offerings.

high-fidelity wireframes

I created the high-fidelity wireframes by refining the mid-fidelity wireframes with Ricci Chocolates' branding—fonts, colors, and imagery—while adding interactive elements for a realistic feel. This ensured consistency, visual appeal, and a true-to-brand experience that stakeholders could review before development.

desktop Wireframes
mobile Wireframes
usability testing

For usability testing, I shared the interactive prototype with selected users and asked them to complete key tasks, such as browsing products, adding items to the cart, and finding store information. All users were able to complete the core tasks, achieving a 100% task completion rate for both desktop and mobile. I observed their interactions, noted areas of confusion, and gathered feedback on ease of navigation and overall experience. These insights helped identify usability issues and informed design improvements to make the website more intuitive and user-friendly.

"It would be nice to have a wish list so I can save the chocolates I want to try later."

user feedback

"I want to add items to my cart directly from the product list instead of clicking into every product page."

"There should be a review section on the product page so I can read what other customers think before buying."

iteration #1:
adding a wishlist page

I added a wishlist feature so users could save products they liked but weren't ready to purchase yet. This gives them flexibility and encourages return visits, while also helping Ricci understand customer preferences.

iteration #2:
adding an add to cart to product listings
iteration #3:
adding a ratings & reviews section on the product page

I included an "Add to Cart" button directly on the product listing pages to reduce unnecessary steps. This allows users to quickly add items without navigating into each product page, making the shopping flow more efficient.

I designed a ratings and review section on each product page, allowing customers to leave ratings and feedback. This provides social proof, builds trust, and influences purchasing decisions, especially for first-time buyers.

experience the prototypes

The final design successfully met the project's objectives by delivering a responsive and visually engaging e-commerce website that highlights Ricci's premium handcrafted chocolates while reflecting the brand's advocacies. The site was structured to provide seamless navigation, clear product presentation, and essential features, ensuring a convenient and enjoyable shopping experience.

🍫 Next Steps

Moving forward, the next steps for the Ricci Chocolates website involve refining features and expanding its capabilities to support long-term growth. This includes integrating advanced e-commerce functions such as subscription boxes for regular customers, loyalty and rewards programs, and improved analytics to track customer behavior and optimize sales strategies. Additionally, future updates may focus on content expansion, such as blogs or stories about Ricci's sourcing, artisans, and advocacies, to deepen customer connection. Continuous usability testing and customer feedback will also guide improvements, ensuring that the website evolves with user needs while staying true to Ricci's brand values and mission.

  • I learned how important it is to really listen to both the client and the users so the design reflects their needs and values.

  • I realized that good design isn't just about looks; it's about telling the brand's story in a way people can connect with.

  • I gained more confidence in my process, from sketching simple ideas to creating a website that feels complete and true to Ricci's vision.

  • I saw how design can have a bigger impact by supporting advocacies and making a positive difference in the community.

  • Most importantly, I learned that patience, curiosity, and empathy are just as important as design skills in creating something meaningful.

what i learned