Hot Mama Chili Oil
Landing Page Design
Problem
Hot Mama chili oils need to stand out from the crowd of other hot sauces, chili oils, and salsas in the condiment arena.
Solution
Campaign with landing page sales funnel that emphasizes the history and tradition of Hot Mama chili oils.
Tools
Adobe XD, Figma, HTML, CSS, Bootstrap, Visual Studio Code
Team
2 UX/UI Designers
My Role
UX Research
UX Writing
Timeline
3 weeks
This project was completed as a class assignment for the University of Oregon's UX/UI Bootcamp.
1. Discover
Competitive Analysis
We began by analyzing three competing brands - two in the Asian chili oil arena, and one local Portland brand that gives chili oil an American spin. The most impactful web impressions featured high quality imagery of the chili oil in action.
Fly By Jing
Bold branding reflects bold flavor. Website integrates video and is honestly, awesome.
Lao Gan Ma
Cult following, available worldwide. Website is barebones, and features some recipes.
Flavor Society
Handcrafted in Portland, uniquely American flavor profile. Emphasizes texture.
User Interviews
We sent out a survey that received 18 responses, and interviewed 5 people. At the beginning of our interview process, we worded our questions with phrasing like "spicy sauces," but once we learned that chili oils were widely recognized, we were able to adjust with more specific questions about chili oil brands, supporting our competitive analysis.
We asked users... what factors influence your purchases?
We were excited to connect with Josue Bravo, a chili oil enthusiast.
His family is from Mexico and he is familiar with Mexican chili oils, but had only really ever found them in Mexico.
This was incredibly similar to the back story we came to learn about Hot Mama's origin story.
Affinity Diagram
When we compiled our findings into an affinity diagram, we were able to decipher that most users were familiar with Asian chili oils, but few users were familiar with Mexican chili oils. Most users do like hot sauce, to varying degrees - and when asked about their favorite spicy sauces, there was a ton of variety.
2. Define
Insight
People like to enhance foods by integrating new layers and depths of flavor, keeping things fresh and exciting. The majority of users are motivated to purchase foods that are handmade , small batch crafted, family recipes and minority-owned.
Challenge
Users often associate chili oils with Asian cuisine. The hot sauce scene is saturated and users expressed concerns with extreme heat. How might we highlight the strengths of Hot Mama's handmade family recipes?
Hypothesis
If we can emphasize compelling imagery and storytelling, creating a style that emphasizes Mexican traditions, then we can increase Hot Mama’s chili oil sales.
3. Ideate
Inspiration
The visual style should represent Mexican tradition. The existing brand does this by utilizing bright colors alongside Mexican textiles.
We loved the idea of alluding to traditional Mexican embroidered textiles called “tenangos," derived from an Indigenous Mexican community, the Otomí. These feature bright colors, local vegetation and wildlife.
Sales Funnel
Because the final product will be a landing page, we ideated a sales funnel structure that integrated our insight, challenge and hypothesis into an actionable marketing strategy.
The funnel begins introducing the history of the brand, weaving through the narrative with storytelling and photography that highlights the variety of the oils.
The design will have a sticky "buy now" button, but will also end with two calls to action - buy online or view a map with stores that have the oils in stock.
Style Guide
We chose two fonts that created a bold balance - Bungee resembled the display font on the chili oil, but with a little street style. New Kansas feels rustic and traditional - legible and heavy enough to stand on its own in white over dark imagery.
The writing style should circle back constantly to family, tradition, and history - emphasizing the pieces of Hot Mama's chili oils that motivate customers, and also differentiate these oils from the rest.
Custom photography by collaborating designer, Ryan Barajas, speaks for itself. These became the fundamental visuals of the final design.
4. Design
Iterations and User Testing
We conducted user testing at low-fi, mid-fi and hi-fi design stages - integrating feedback at every turn.
Early interviews suggested that the "Buy Now" button needed to be present at all parts of the funnel to maximize conversion.
Compelling stock images of food created the right effect with users - suspending reality and appealing to the stomach.
Our initial body font choice was not quite legible, and needed improvement.
Users appreciated seeing a list of foods that pair well with the oils - but the arrangement outside of the primary information chunk was confusing. Users also liked seeing a number indicating the heat level.
Received overall positive feedback about the design direction.
Final Design
The design process culminated in a hi-fidelity prototype in Adobe XD, as well as a functional landing page built with HTML, CSS, Bootstrap, Visual Studio Code and GitHub.
View PrototypePresentation
We presented a case study and demonstration of this landing page design to a cohort of UX/UI students, introducing the brand with a reflection on the ties between family, food, and a comforting sense of home.
Conclusion
If this project were to come to life, with more time and resources, we would recommend implementing the following:
See more projects →
