Wireframe/Low-Fi Mobile Design
After analyzing the persona and aligning user needs with business goals, I designed foundational wireframes to map out each step of the task flow, ensuring a seamless experience.
Tiger Sauce Goes Digital : A Mobile Web Experience
This project was part of an advanced UX/UI course where I was randomly assigned a brand, product, and user persona.
My task? Design an optimized mobile web experience for Tiger Sauce, a hot sauce brand catering to spice lovers. This case study showcases my approach to crafting a seamless, engaging, and user-friendly mobile website experience.
Created using Figma
Meet Adam :
The User Persona
👤 Name: Adam
📍 Location: California
🚀 Occupation: Business owner
Adam is in their 70's and is married with children. They are a high school graduate and run a large company. Adam lives in California, is familiar with our product and is constantly on the go commuting/travelling.
.jpg)
My UX Vision Before Designing
Design Thinking Phases : Emphatize & Define
🧠 Cognitive Load: Adam is in his 70s, so the design must minimize reading complexity with short text and large fonts.
🛤️ Navigation & Simplicity: Since he is constantly traveling, the site must have fewer clicks and direct, simple paths to purchase.
👀 Readability: A high-contrast design with larger buttons and clear CTAs is crucial.
🛒 Effortless Checkout: Adam is a regular customer, so checkout needs to be fast, with minimal input fields and an easy re-order system.
My UX Spell in Action
Design Thinking Phase : Ideate
🧠 Prioritized Accessibility → Large, high-contrast text and easy-to-read fonts improve readability for all users.
🛤️ Simplified Navigation → Minimal scrolling, clear categories, and large, prominent CTAs for quick, intuitive interaction.
📦 Effortless Checkout → Only essential steps, fast re-order options, and saved preferences for returning customers.
⚡ Optimized for Speed & Mobile → Larger touchpoints, simple UI structure, and fewer buttons to streamline the experience.
🎯 Content with Clarity → No unnecessary descriptions—short, direct messaging keeps cognitive load low.
Creating Components
Creating components is one of my favorite steps—it ensures consistency across all screens and makes design updates effortless. It also prevents errors, so every change I make is applied universally, keeping everything seamless and aligned.
Prototype/High-Fi Mobile Design
After finalizing the typography, color palette, and mood board, I transformed the wireframes into a fully interactive high-fidelity prototype. This step brought the mobile web experience to life, ensuring a visually cohesive and user-friendly interface that aligns with both the brand identity and user needs.
back to the top
Let’s Grow Your Brand to New Heights!
From strategic marketing campaigns to compelling content creation, I craft digital marketing solutions that not only capture attention but also drive real growth. ✨