Product Designer
Bay Area, California
Available Now
Summary
I redesigned Desiflavors to create a seamless and enjoyable experience that reflects the brand’s rich tradition and modern convenience. By combining vibrant, culturally inspired visuals with intuitive navigation, detailed product information, and a streamlined checkout, I ensured the site is both engaging and user-friendly.
Hypothesis
I believed that redesigning Desiflavors would resolve key user pain points by improving navigation, product visibility, checkout efficiency, and mobile responsiveness. With these enhancements, I was confident it would lead to higher user satisfaction, reduced cart abandonment, and increased sales.
Introduction
Desiflavors, a brand known for its authentic plantain chips, faced challenges with its outdated website. Key issues included poor navigation, insufficient product details, and a frustrating checkout experience, which impacted user satisfaction and sales. The redesign focused on creating an intuitive, visually appealing, and mobile-responsive platform while highlighting the cultural authenticity of the brand.
Problem
The Desiflavors website struggled to provide a seamless shopping experience due to a non-intuitive menu, a cumbersome checkout process, and cluttered, inconsistent visuals that reduced user trust. Additionally, the lack of detailed product descriptions, nutritional information, and customer reviews hindered users from making informed purchase decisions, leading to dissatisfaction and lost sales opportunities.
Solution
A simplified navigation system with a restructured menu and streamlined layout made product discovery seamless. To enhance efficiency, the checkout process was optimized with fewer steps and prominent “Add to Cart” buttons. Product pages were enriched with high-quality images, detailed descriptions, and customer reviews to build trust and aid informed decision-making. A mobile-first responsive design also ensured accessibility and a smooth experience across all devices.
The Process: Designing for Users, With Users
The redesign of Desiflavors followed a meticulous, user-centered approach, ensuring the website was tailored to the needs and expectations of its audience. The process involved:
1. User Interviews:
Engaging with Desi Flavors’ primary audience provided invaluable insights into their pain points, preferences, and expectations. Interviews revealed key frustrations, such as navigation challenges, insufficient product details, and an outdated design. This feedback served as the foundation for the redesign, ensuring the changes addressed real user concerns.
2. Competitive Analysis:
A thorough analysis of competitors like Barnana and Chifles helped identify industry best practices and unique opportunities. This included studying seamless navigation systems, mobile optimization, and visually appealing layouts that competitors excelled at. The insights guided the integration of modern, user-friendly features that helped Desi Flavors stand out.
3. Affinity Mapping:
User feedback was meticulously organized through affinity mapping to prioritize pain points and potential solutions. This exercise highlighted recurring themes such as the need for simplified navigation, detailed product information, and a visually engaging interface. The mapping process ensured that the redesign focused on the most impactful areas for users.
This user-centered methodology addressed critical issues and aligned the redesign with the habits, preferences, and expectations of Desi Flavors’ audience, ensuring a more intuitive and satisfying shopping experience.
Key Insights
1. Intuitive Navigation: Simplified and user-friendly navigation is essential to minimize frustration and enhance the browsing experience.
2. Comprehensive Product Information: Detailed descriptions, reviews, and nutritional facts helps users make informed purchasing decisions.
3. Visually Appealing Design: A clean, consistent, and aesthetically pleasing design builds trust and fosters user engagement.
Rejected Ideas and Concepts in the Design Process
Overwhelming Homepage Design
Description: I initially designed a homepage featuring multiple product categories, banners, and promotional offers prominently displayed.
Reason for Rejection: User feedback showed that the homepage was visually overwhelming, making navigation difficult and distracting users from key actions like exploring products.
Lessons Learned: By simplifying the homepage and prioritizing key categories with a single, prominent promotion, I significantly improved usability and user engagement.
Advanced Search Filters
Description: I came up with a detailed search filtering system that allowed users to sort snacks by dietary preferences (e.g., vegan, gluten-free), flavor profiles, and price ranges.
Reason for Rejection: Although the filters seemed beneficial, usability tests revealed that users found them too complex and time-consuming for quick snack searches.
Lessons Learned: A simpler search bar with only basic filters, such as product categories and price ranges, worked much better and aligned with user behavior.
Conclusion
By reflecting on these rejected ideas, I was able to refine my approach and focus on solutions that truly aligned with user needs and project goals. These experiences highlight the importance of exploring multiple directions and learning from what didn’t work, ultimately leading to a more user-centered design process.
My Design and UI Choices for Desi Flavors
For the Desi Flavors redesign, I focused on addressing usability challenges and creating a seamless shopping experience by
prioritizing user needs and iterative testing
Simplified Navigation
I organized clear categories and dietary filters to help users find products in 2-3 clicks.
This reduced frustration and made navigation intuitive.
Streamlined Cart and Checkout
I minimized the steps in the checkout process and included clear product summaries with convenient payment options like PayPal and Google Pay.
This made the checkout faster and reduced cart abandonment.
Responsive Design
I ensured the layout was fully responsive to work seamlessly across all devices.
Key elements, like buttons and images, scale effectively for better usability.
Detailed Product Information
I added clear product descriptions, ingredients, and nutritional information to build trust.
This helped health-conscious users make informed purchasing decisions.
Customer Reviews
I made reviews more prominent and included search and sort options to make them easy to find.
This boosted user confidence in their purchases.
Modern Visual Design
I created clean layouts with vibrant colors to enhance credibility and engagement.
This made the site feel professional and welcoming
Competitor analysis
Competitors like Barnana and Chifles offered seamless navigation, mobile optimization, and engaging visuals. These elements served as benchmarks for improving Desi Flavors’ website
Synthesizing Insights
Through user feedback, I identified three key needs:
1. Clean, Professional Interface:
Users wanted a polished and organized layout with consistent design, better use of white space, and a trustworthy appearance. I focused on delivering a clean and visually appealing interface.
2. Efficient Cart and Checkout:
The checkout process needed to be streamlined with fewer steps, clear calls-to-action, and visible cart details. I aimed to reduce friction and make the process faster to minimize cart abandonment.
3. Better Product Categorization and Visibility:
Users emphasized the need for intuitive product grouping, improved search functionality, and prominent placement of high-demand items. I prioritized making product discovery quick and effortless.
These insights shaped my redesign decisions, ensuring the new website delivered a seamless, intuitive, and visually appealing shopping experience.
Building Empathy
I developed “Foodie Rajesh” through user interviews and research, identifying patterns in shopping habits, pain points, and needs. These insights revealed challenges like poor navigation, insufficient product information, and a cumbersome checkout process. Based on this data, I defined Rajesh’s goals, such as a hassle-free shopping experience and precise product details.
To make the persona relatable, I crafted a detailed backstory that reflected his busy professional life and focus on convenience. Finally, I organized the findings into a clear, visually appealing format to guide design decisions, ensuring the user remained at the center of the redesign.
User Flows
I created optimized user flows to streamline key tasks and improve the overall experience:
1. Browsing Products: I ensured users could quickly and intuitively explore products through simplified navigation and improved categorization.
2. Adding Items to the Cart: Adding products to the cart was made seamless with clear “Add to Cart” buttons and instant feedback to confirm selections.
3. Completing the Checkout Process: I designed a streamlined checkout flow with minimal steps, reducing friction and ensuring clarity at every stage.
These user flows minimized clicks, eliminated confusion, and guided users effortlessly from product discovery to purchase completion.
Wireframes
Lo-Fi Wireframe
The low-fidelity wireframes for Desi Flavors focused on creating a functional and user-friendly layout to address key pain points. Key features included:
1. Simplified Navigation: A clean navigation bar for easy access to categories and pages.
2. Organized Product Display: Clear layouts with placeholder images, concise descriptions, and “Add to Cart” buttons.
3. Filters and Options: Intuitive dropdowns for refining product searches.
4. Streamlined Checkout: Minimal steps for a frictionless checkout process.
5. Product Information: Sections for reviews, FAQs, and descriptions to aid decision-making.
6. Mobile-First Design: Responsive layouts optimized for mobile users.
These wireframes laid the foundation for testing and feedback, ensuring the redesign addressed user needs effectively.
Time to Test
Visual Design
The high-fidelity prototype for Desi-Flavors.com focuses on a modern, user-friendly design aligned with the brand’s identity and user needs. I created a clean, structured layout for better navigation, incorporating vibrant tones and cultural accents to reflect authenticity. Product pages feature high-quality images, detailed descriptions, and reviews to build trust and inform decisions. The streamlined checkout process includes clear CTAs like “Add to Cart” and a step-by-step flow for a seamless experience. With a mobile-first, responsive design, the interface remains intuitive and accessible, addressing user pain points and supporting Desi Flavors’ vision for a smooth shopping experience.
Iterations on Visual design
1. Improved Cart Visibility
The cart modal background was adjusted to a lighter color, enhancing visibility and reducing distractions. This change allowed users to review and manage their selections more easily before checkout .
2. Added One-Liner Descriptions
Quick, concise one-liner descriptions were introduced for each product. These provide users with essential insights at a glance, aiding faster decision-making and improving user engagement
Lessons Learned
Designing Desi-Flavors.com taught me the importance of user-centered design in creating a seamless and enjoyable experience. Balancing the brand’s cultural authenticity with a modern, intuitive interface was key to engaging users while keeping the design functional. Simplifying navigation, providing detailed product information, and streamlining the checkout process significantly improved usability and built trust. Prioritizing a mobile-first design ensured accessibility across all devices, while maintaining visual consistency strengthened the brand’s identity. Continuous user feedback and iterative improvements were crucial in refining the design and delivering a user-friendly platform. These lessons reinforced the value of thoughtful, user-focused design in creating meaningful digital experiences.
Next Project
© 2024 Amulya Varma. Designed and built with Framer.