Category: UX Design

  • Bella Hot Sauce: Mobile eCommerce

    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.

  • From Idea to Playable Game in One Day

    From Idea to Playable Game in One Day

    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.

    Spots The Game - Product overview became the prompt for the game

    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