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
Let’s start your next project together.
ⓒ 2025 — Guylaine Bernardez