I used my Figma and UX skills to design a mobile eCommerce experience.

🍵6 min read

---

Overview

Bella Hot Sauce is a concept e-commerce project for an artisan hot sauce brand looking to grow its customer base, improve online conversion, and encourage repeat purchases.

The project focused on designing a mobile-first shopping experience that communicates product quality quickly, builds confidence in the brand, and makes it easy for customers to move from discovery to checkout.

Goals

• Create a clear, fast path from product discovery to checkout
• Encourage visitors to add hot sauces to their cart
• Support repeat purchases through trust-building content and an easy buying experience
• Give customers reasons to recommend the product to friends and social networks

Discovery

User persona

The primary customer persona for this project is Brayden, a status-conscious customer in their 50s who lives in Vancouver with a partner. Brayden is somewhat familiar with the product category, values quality, and is likely to look for social proof before purchasing from a brand online.

This persona helped shape the design priorities for the site. The experience needed to feel polished, credible, and easy to navigate while still giving the product enough personality to stand out in a competitive food and specialty goods market.

Customer journey

Using the persona and the goal of building a loyal customer base, I mapped the e-commerce customer journey to identify the most important moments in the buying experience.

This journey helped clarify where the prototype should focus: product education, trust-building, cart actions, and checkout. These touchpoints are critical because they directly influence whether a customer feels informed enough to buy and confident enough to complete the purchase.

I used FigJam in Figma to build the customer journey. The format made it easy to capture early ideas, organize observations, and create a collaborative working space that combined the flexibility of a whiteboard with the structure of a planning document.

Lo-fi prototype

Prototype focus

The low-fidelity prototype focused on helping customers understand the product quickly and move through the purchase flow with minimal friction. Based on the customer journey, I prioritized the product detail page and checkout experience because they are key points in the conversion path.

The product page needed to communicate flavour, quality, and credibility. The checkout flow needed to feel straightforward, with direct calls to action and simple payment options.

Early testing

I tested the prototype on a phone to confirm that page transitions, navigation, and key actions were easy to understand.

Using a low-fidelity prototype at this stage kept the feedback focused on structure and interaction rather than visual design or marketing copy. This made it easier to identify functional issues early, before investing time in higher-fidelity UI details that would be more costly to revise later.

Visual design

Mood board

The visual direction was inspired by spices, chilies, heat, and the layered flavour profile of artisan hot sauce. I wanted the brand to feel bold and energetic while still communicating craft and quality.

Warm colours such as yellow, orange, red, and green are strongly associated with spice, peppers, curries, salsas, and hot sauces. I used these associations to create a palette that would immediately signal flavour and heat to the customer.

Imagery of hanging chilies, spice markets, and ingredient textures also informed the direction. These visuals gave the design a sense of origin and helped connect the product to the ingredients and process behind it.

Logo

For the logo, I focused on the “Bella” element of the brand name. In Italian, “bella” means “beautiful,” which suggested a more expressive and crafted visual treatment.

The final logo direction combined a stylized handwritten font with a bold sans serif. This contrast reflects the product experience: the immediate kick of spice balanced with a more refined, complex flavour profile.

Colour palette and typography

The initial palette used colours pulled from the mood board: yellow, orange, red, and green. I added darker variations and neutral greys to create contrast and support practical UI needs.

For typography, I selected a clean sans serif for body copy and functional interface text. I paired it with a more expressive handwritten-style font for the logo and larger brand moments. This created consistency between the visual identity and the product experience while keeping the interface readable and easy to use.

Hi-fi prototype

Prototype refinement

The high-fidelity prototype combined the interaction model from the low-fidelity prototype with a more developed visual design system. This allowed the concept to feel closer to a finished product and made it easier to evaluate the experience with both users and stakeholders.

In Figma, I used visual details, icons, and transitions to demonstrate how the final experience could behave. At this stage, I also considered implementation trade-offs. Animation and visual polish can improve the experience, but they need to be realistic for the technology and budget behind the final build.

Design iteration

Testing and adjustments

User feedback on the first visual direction showed that the bright, varied palette created too much visual competition. The combination of strong red and green accents made the interface feel busy and reduced the clarity of the shopping experience.

I refined the colour system by removing colours that were too similar or difficult to use together. The revised palette used red as the primary brand colour, yellow as an accent, and a range of muted greys to support contrast, readability, and hierarchy.

I also added customer reviews and a fixed top header with the menu and logo. Reviews were especially important for this persona because Brayden would likely look for validation from other customers before making a purchase. Adding social proof helped strengthen trust at a critical point in the buying journey.

Iteration is the Way

The process followed a practical product design cycle: discover the customer need, map the journey, prototype the key interactions, test assumptions, and refine the design based on feedback.

This approach helped keep the work focused on business goals and user behaviour rather than visual preferences alone.

Final Design Prototype

Conclusion

This project reinforced the value of iteration in product design. Discovery, prototyping, testing, and refinement each surfaced opportunities to improve the customer experience and reduce risk before a final build.

While the design process often appears linear, effective product work depends on the ability to revisit earlier decisions as new feedback emerges. In this project, user feedback helped simplify the visual system, strengthen the purchase flow, and add trust-building elements that better supported the customer’s decision-making process.

My approach to design is to create enough structure to move quickly while leaving room to adapt. Strong product decisions do not always require perfect certainty upfront. They require a clear direction, thoughtful validation, and a willingness to iterate as the work becomes more informed.

Products are typically built for a wider userbase. But sometimes, value is unlocked when you tailor a product for a specific user. 😎

☕ 5 min read

---

From Market Signal to Product Launch

Gift cards are often treated as simple consumer products. Someone buys one card for a birthday, a thank-you, a holiday, or a personal reward. But when I looked more closely at purchasing behaviour, I saw another kind of customer hiding in the data: organizations buying gift cards at scale.

As a Product Manager (and UX Designer), I explored how this behaviour could become a new growth opportunity. The result was a B2B Gift Card Portal designed to help business buyers place, manage, and repeat large orders while reducing the manual work required from internal teams.

The opportunity

The existing gift card product served a broad B2C audience. Anyone could buy a gift card without creating an account, which made the experience fast and accessible for everyday purchases.

That model worked well for one-time buyers. However, it did not fully support organizations that needed to buy multiple cards, manage repeat orders, or send rewards on behalf of a company.

I started with a simple product question:

What would change if we designed the gift card experience for business buyers instead of individual consumers?

The opportunity was not only to increase order value. It was also to create a more useful experience for customers who already had different needs.

What the data showed

Order data revealed patterns that pointed to a distinct B2B customer segment. These buyers behaved differently from individual purchasers.

Common signals included:

• Orders with more than 10 cards
• Repeat purchases over time
• Messages that included phrases like “thanks” or “on behalf of”
• Sender names entered as company names
• Business email domains
• Generic card designs rather than highly personal ones

These patterns suggested that some customers were not buying gifts for a single occasion. They were using gift cards as part of broader business workflows, such as employee recognition, client appreciation, customer rewards, or promotional campaigns.

From manual process to scalable product

The company had already started serving some B2B demand through manual operations. This was a practical first step. It allowed the team to validate demand without immediately investing in a full product build.

However, the manual process had clear limits. It worked best for pre-vetted buyers and required internal teams to handle tasks that customers could eventually manage on their own.

That created a strong case for a self-serve portal. The product needed to help business buyers move faster while also reducing operational overhead.

Defining the MVP

The B2B Buyer Portal launched in late 2021 after six months of product discovery and design.

The MVP focused on the highest-value workflows:

• Registering and reviewing business buyers
• Placing eGift and physical gift card orders
• Applying custom discount structures in real time
• Searching historical orders
• Viewing order details
• Supporting multiple brands with configurable styling

The goal was not to build every possible feature at once. The goal was to create a strong foundation that solved the most painful parts of the business buying experience.

Designing for buyers, brands, and internal teams

The UX had to serve several audiences at the same time.

Business buyers needed a clear and efficient purchasing flow. They also needed enough flexibility to customize orders with sender information, messages, card designs, and delivery details.

Brand clients needed the portal to reflect their own visual identity. Since the company often operated behind the scenes, the experience had to support configurable logos, colours, fonts, and styling.

Internal teams needed a product that reduced manual work and created better visibility into buyer activity.

As a designer, I focused on making these needs feel simple to the end user. The experience had to handle complex business rules without making the interface feel complicated.

Prototyping the customer journey

I built the prototype in Figma to test the core workflows before development began. The prototype covered both purchase flows and account management tasks, including searching for historical orders and reviewing order details.

This helped the team move faster in several ways:

• Prospective buyers could react to a realistic experience instead of abstract requirements
• Stakeholders could understand product scope through screens and flows
• Development and QA teams could align around expected behaviours
• Feedback could be gathered and incorporated before build decisions became expensive

The prototype also helped shift conversations from “what should the product include?” to “how should this experience work for the customer?”

Building accessibility into the product

Accessibility was a core requirement, not a final layer of polish.

The portal needed to follow WCAG 2.1 AA guidelines. Buyers had to be able to complete key tasks using keyboards, assistive technologies, and mobile devices.

This influenced the structure of the purchase flow, the clarity of form fields, the use of colour, and the way users moved through each step. A business tool still needs to be easy to use, especially when buyers are placing high-value or time-sensitive orders.

Key product features

The launched portal included features designed specifically for B2B use cases:

• Multi-brand styling so clients could present their own logos, colours, and visual systems
• Buyer registration with review and audit checkpoints
• eGift and physical card ordering
• Real-time discount structures based on cart contents
• Accessible purchase flows designed for a wide range of users and devices
• Custom messaging and sender information
• Custom card imagery
• Historical order search and order detail views

After the MVP launched, the product continued to evolve. Later features included reporting, custom photo uploads for gift cards, and scheduled direct delivery of eCards by email.

What this project demonstrates

This project shows how product strategy and UX design can work together to uncover a new market.

The opportunity started with behavioural data. Product discovery helped define the customer segment and the business case. UX design translated that opportunity into workflows that buyers, clients, and internal teams could understand and use.

The B2B Gift Card Portal turned an operational workaround into a scalable product experience. Within 6 months, the Company saw a growth in revenue. Three clients extended their product dept, to include B2B Portal in their offering.

More importantly, it showed that even a familiar consumer product can open new growth opportunities when we look closely at how different customers actually use it.

How I used vibe-coding to validate a years-old idea — and what it showed me about modern product tools available to PMs today.

---

Tools: Lovable · Timeline: 1 day

---

TLDR; The Hook

What if, instead of opening a social media app and accidentally doom-scrolling for 20 minutes, you had a quick alternative — something fun, low-stakes, and done in under a minute?

That’s the idea behind this project: a tap-as-many-spots-as-you-can game where targets get faster as the clock ticks down. Simple to learn, repeatable, and capped at 60 seconds. Using Lovable, the idea went from concept to published game in a single day.

Context & Problem

THE GAP

Social media is engineered for engagement — and that’s the problem. I’ve been trying to reduce my screen time, and I noticed I often reach for my phone out of habit, not intention. I just wanted a “Brain Break” between tasks, and social media is no longer the way to do that.

TARGET USER

Myself — someone who enjoys simple games and wants an alternative to passive social media consumption. This is classic dogfooding: build for the person you know best.

WHY NOW?

I’d had this game concept in my head for years but always assumed it would take days of development to execute. Vibe-coding tools changed that assumption. This project was also a chance to personally validate how fast modern AI-assisted development has become.

Goals & Success Metrics

This project has a specific goal. It’s nothing Earth shattering.

GOAL: Build a Game.

Ship a playable, published game by end of day. This was the primary target, and it was intentionally binary: done or not done.

Bonus — HYPOTHETICAL PRODUCT KPIS

If this were a real product, I’d track these engagement metrics to determine whether the game itself was working:

• Conversion: page visits vs. “Start Game” clicks

• Engagement depth: session time longer than 60 seconds (indicating replays or exploration)

• Retention signals: repeat visitors and score-sharing rate

Framing both goals upfront kept me honest about what I was actually building — a prototype, not a product launch. Outlining KPIs (while not critical) did help in identifying what was important in the product itself.

More on that later.

Process & Decision-Making

SCOPING THE MVP

My initial vision was ambitious: multiple levels, false targets mixed in, increasing difficulty tiers. I had been thinking about this game for years. But as I started writing out the initial prompt, I hit a natural gut-check.

If you need more than three sentences to describe how a game works, it’s too complicated. Vibe-coding successfully relies on keeping things simple. Agents are still very linear, so keeping prompts tight and direct is best.

I stripped it back to the bare minimum. I used the classic arcade game as my mental model — simple rules, escalating speed, immediate feedback. Everything else got cut.

RESEARCH (HONEST TAKE)

I did zero user research. I didn’t validate demand, check if similar games existed, or identify a market. For a real product, that would be a red flag. For a one-day prototype meant to test a tool and prove an idea was buildable — it was the right call. Being honest about what kind of project this is matters.

TOOL SELECTION

There are several vibe-coding IDEs available right now — Lovable, Base44, Replit, Cursor, Claude Code, and others. I chose Lovable specifically because of timing: they were running #SheBuilds, a free-to-use hackathon on International Women’s Day , which lowered the cost of experimentation to zero. Good enough reason to pick a tool when you’re prototyping.

Challenges & How I Solved Them

CHALLENGE 1: LEARNING A BRAND NEW TOOL

I had never used Lovable or vibe-coded before, so I had no mental model for the workflow. My first move was to find a micro-course before touching anything. I came across Little Parrot: Build Your First App with Lovable that covered the basics. Front-loading the learning paid off. The course took an hour, and I moved faster in the actual build because I wasn’t figuring out the tool at the same time as the product.

CHALLENGE 2: DEBUGGING WITHOUT TOUCHING THE CODE

My instinct when something breaks is to go into the code. That’s not how vibe-coding works. In the early iterations, spots kept spawning after the game ended and I didn’t know why. I had to shift my approach: describe the problem in chat, use Lovable’s “plan” mode to reason through it, and stay focused on one issue at a time. The agent wanted to solve things immediately — I had to resist letting it spiral into multiple changes at once and get confused.

CHALLENGE 3: KNOWING WHEN TO STOP

Scope creep is real, even on one-day projects. It happened in this project, too. I added a pause mode and a share button that weren’t in the original plan. I even started experimenting with colour-coded targets for added complexity. But I didn’t end up adding it because of an external factor: Lovable began rate-limiting usage toward the end of the hackathon day. Sometimes external constraints are the best product manager. 😎

Outcome & Learnings

DID IT MEET THE GOAL?

Yes. I shipped a playable, published game in one day. I shared it with friends and family — and they played it. For a zero-research, one-day prototype, that’s a meaningful signal.

Give it a try yourself! Follow the link -> SPOTS: Test Your Reflexes Spots: Tap the circles as fast as you can. They get faster. Play Now!

WHAT I’D DO DIFFERENTLY

I wouldn’t use Lovable for my next project. Making UI changes through a chat interface felt slow when I just wanted to click and adjust directly. I want to try another tool and compare the experience firsthand.

BIGGEST TAKEAWAY

We’re in a genuinely new era of prototyping. I didn’t need to learn React, configure hosting, or fiddle with UI components. What would have taken days took hours. When I need to validate an idea quickly, vibe-coding is now my default starting point — not a fallback.

Skills Demonstrated

• MVP Definition
• Rapid Prototyping
• Tradeoff Thinking
• Tool Judgment
• Shipping Discipline
• Experimentation Mindset