team
Arjun - UX researcher, Harshil - UX researcher, Praveen - PM, Thomas - Full stack.
Timeline
June 2023 - August 2023
Overview
MAIN PROBLEM
Navigation is key within any digital interface. Smart Components enable us to create custom interactive navigation components that work perfectly with the rest of your prototype.In this guide, we will cover the concepts of nesting components, adding events to elements in a component using Event Variables, and passing these through your components. One of the main benefits of using nested components is that it provides full control over its states, such as unique hover states of elements within another component.
Starting at the atomic level
Framer allows you to create fully interactive and animated components, and even allows you to nest components within other components. We’re building a navigation bar component for a website that will contain two different kinds of nested components, with their own unique interactions. Our project will contain a Navigation bar that contains various nested components, namely five Nav items and one Shopping cart component. The design of our nested components, the nav list item and the shopping cart, will impact how we design our navigation bar. For this reason, an optimal workflow includes starting with the 'deepest' nested component and building up from there.
Nesting components
Once we have our two components ready, we can start creating the component in which we will nest these. Draw your navigation bar, select it on the canvas and click the Component tool in the Toolbar. To nest a different component in our new component, just drag any other component to the Component Canvas and place it within your designed navigation bar.
Triggering interactions from the navigation bar
Back on the main canvas, we’d like to be able to tap 'Clothing' and navigate to an entire new Screen. If you’d connect the component using the Prototyping Connector to a new screen, we could set up an Interaction. However, this would be triggered if we tap anywhere within our component. This isn’t what we want to do, as we want to trigger this transition only from a specific element. This is where Event Variables come in, which are special types of Variables not attached to properties (like opacity or fill) but instead to events.
what they faced
To gain deeper insights, I thoroughly analyzed the data provided by the UX researchers and product managers. This revealed key pain points in the user experience:
Dish Selection :
Users often felt overwhelmed when trying to explore and decide what to eat, leading to confusion during the selection process.
Preparing the Tray :
Many struggled with placing the correct ingredients in the right portions, making this step unnecessarily complex.
Challenging UI :
The interface elements were too small and unclear, causing users difficulty in understanding and making decisions as they progressed.
Pain Points
IMG
How user were affected
When we set out to design this AI-powered cooking robot, the goal was to simplify meal preparation for users. However, as we observed real interactions, it became clear that certain usability challenges were making the experience more confusing than convenient. To create a truly seamless journey, we needed to address these key gaps:
Lack of Guidance & Preview (Jakob’s Law & Mental Models)
Imagine using a completely new device without any instructions—frustrating, right? Many users found it difficult to understand how the cooking robot worked because there was no clear preview or onboarding process. Without proper guidance, they struggled to trust the system and complete their tasks with confidence.
Cognitive Load Due to Missing Visual Cues (Gestalt Principles & Fitts' Law)
Users expect intuitive visual elements like icons and images to guide their actions. However, the lack of these cues forced them to rely on trial and error, increasing mental effort and slowing down decision-making. This unnecessary cognitive load made the cooking process feel more complicated than it needed to be.
Ineffective Focus & Hidden Elements (Hick’s Law & Visibility Principle)
Preparing the cooking tray should be a straightforward step, but hidden components and inconsistent UI patterns made it unnecessarily difficult. Users found themselves second-guessing placements, disrupting their flow and making meal preparation more time-consuming.
Aligning with the expectations
After gathering key pain points from users, I sat down with the founder to understand their expectations for both the product and the redesign process. Through multiple discussions and deep dives into Nosh’s step-by-step cooking journey, I outlined the following key objectives to enhance the overall experience:
Frictionless Meal Discovery
The process of selecting a dish should be effortless, with AI-driven suggestions tailored to user preferences, dietary needs, and past choices, making decision-making quick and intuitive.
Guided Cooking Experience
Users should feel confident throughout the cooking process with clear, step-by-step instructions, visual cues, and automated assistance that simplify complex tasks.
Real-Time Control & Flexibility
Cooking should be adaptive, allowing users to track progress, pause, adjust cooking settings, and ensure the meal stays warm until consumption.
Personalized Customization
Every user has unique taste preferences. The system should offer granular control over spice levels, consistency, and doneness, ensuring every dish meets individual expectations.
Ideations and add-on features
IMG
Flow for better flow
I took the time to thoroughly analyze the pain points, requirements, and desired features. By combining these insights, I identified key opportunities to enhance the user experience. To address these, I started mapping out how the user journey should flow. After multiple reconsideration meetings and iterations, I created a comprehensive user flow—from the very first interaction to the final step.
User Flow
FIGJAM
Wireframes
With the user flow finalized, I shifted my focus to the design phase, diving into UI exploration. While creating wireframes and gathering user feedback, I discovered another challenge—the screen’s size and its placement on the device. Positioned at the top right, it made typing and interaction difficult, adding to the usability concerns.
I shared this concern with my team, and the industrial design head explained that they had already considered this challenge while designing the future version of the device. Their updated design aimed to address these usability issues, ensuring a more seamless interaction for users.
Screen of Nosh
IMG
Wireframes
IMG
Evaluating functionality
To ensure the redesigned experience was intuitive and seamless, I conducted iterative user testing through wireframes and prototypes. Early usability tests helped identify friction points, while high-fidelity prototype feedback loops refined key interactions, ensuring smooth navigation across the cooking journey. By measuring task efficiency and error rates, I optimized flows to reduce complexity and enhance user confidence.
Prototype testing
GIF
Redesigning the screens
After gathering sufficient insights, I began the redesign process, starting with the first frame using the "F" layout approach.
Home screen
IMG
Discovery screen
IMG
New screens
IMG
Impact
The revamped design significantly improved user experience by enhancing clarity, efficiency, and usability. Key improvements include:
• 20% increase in user satisfaction with a more visually appealing and intuitive interface.
• 15% improvement in usability and overall effectiveness.
• 25% reduction in errors, leading to a smoother experience.
• 30% boost in task efficiency, making interactions quicker and more seamless.
Learning
Working at Nosh Robotics was a game-changer in how I approach design. Under the guidance of a senior product designer, I learned to think more critically and structure my problem-solving process. Collaborating with UX researchers was not just insightful but also fun—I got to see real user struggles and find ways to fix them.
Diving deep into the product, I faced real-time challenges that pushed me to iterate, adapt, and refine my solutions. Taking feedback, not just on my designs but on myself, helped me grow faster. This experience didn’t just make me a better designer; it shaped how I think about user experiences in a more practical and impactful way.
Me (Right most) with UX Researchers
IMG