Unveiling the Magic Behind Everyday Designs: My UX Design Journey

Hey everyone! I’m thrilled to share my learnings from the UX design workshop. This article dives into the eye-opening experiences and genuine insights I gained about the exciting world of UX design

️ Ever wonder why a simple switch seems so intuitive?

We just “know” how to turn it on or off, right? This is exactly what sparked my UX journey. During our first session, our mentor, challenged us to ask these “common-sense” questions about everyday designs—physical or digital. By doing so, we begin to understand the thought process behind them and appreciate why they were designed a certain way.

In short, good UX design priorities ease of use. It’s about creating products and experiences that are clear, intuitive, and efficient for users.

The world of UX design can seem complex, but at its core, it’s about creating products that are user-friendly, solve real problems, and ultimately make people’s lives easier.

This workshop instilled several key principles that serve as a roadmap to effective UX design:

1. Design for Users, Not Yourself:

Forget the “me” factor! UX design demands empathy. We learned to prioritise user needs by shedding our own assumptions and understanding their challenges.

2. Embrace lifelong learning:

Student for life! The industry is constantly evolving, and staying up-to-date with new tools and trends is crucial.

3. Functionality over Flash:

While aesthetics play a role, UX design prioritises functionality. Beautiful interfaces are great, but they need to be intuitive and effective to truly serve users.

4. See the World with a “Design Eye”:

Develop a keen eye for everyday interactions with products. Question why things are designed the way they are, and see opportunities for improvement everywhere you look.

5. Unlearn misconceptions:

There are many misconceptions about UX design. It’s more than just creating pretty screens or fancy animations. It’s a strategic process that prioritizes users needs and delivers impactful solutions.

➡️ Decoding the Design Thinking Process:

Anudeep, used the example of a ceiling fan to demonstrate the design thinking process, a powerful framework for tackling problems creatively and collaboratively.

Here’s a breakdown of the key stages:

• Empathy: Understand the user’s perspective and the problems they face.
• Define: Clearly identify the problem and its impact on users, businesses, and any existing limitations (time, budget, etc.).
• Ideate: Brainstorm potential solutions to the defined problem.
• Prototype: Develop a low-fidelity or high-fidelity prototype to visualize your ideas.
• Test: Gather feedback by testing the prototype with real users and iterating based on their insights.

➡️ Learning from Everyday Design

We learned to stop and ask simple questions about everyday things—light switches, apps, and water bottles. Why are they designed that way?

By understanding the “why” behind existing designs, we discovered how common sense plays a huge role in good UX. Think about it—a water bottle’s easy-to-open cap? That’s a clever design!

This exercise wasn’t just fun, it was empowering. It showed us how our everyday experiences hold valuable design lessons. By learning from what already works, we can all become better problem solvers in the future!

Learning from Everyday Design — Relise the basics of UX Design by observing existing design around us

• Focus on the learning process: It emphasizes how the workshop helped participants develop their design intuition.
• Uses active voice and engaging examples: It creates a more dynamic reading experience with clear examples.
• Highlights the user-centric approach: It reinforces how existing design prioritizes user expectations and common sense.
• Connects learning to problem-solving: It emphasizes how learning from existing design empowers participants to become problem solvers themselves.

Drill Exercise: Learn by making a calculator UI

Drill Exercise 1 — Day 2

Figma 101:

• Building Blocks: Creating fundamental shapes—tthe foundation of any interface.
• Visual Hierarchy: Mastering text and color application to elements for user engagement.
• Alignment Techniques: Ensuring visually balanced and aesthetically pleasing compositions.
• Layout Fundamentals: Understanding “why” elements are arranged the way they are for optimal usability.

By actively working with Figma, we gained practical experience and a solid foundation for crafting user-friendly interfaces in the future.

➡️ Introduction of UX Principles: A Practical Exploration

Jakob’s Law

The users spend a lot of time on other websites. So they expect your website to work the same way as another website they already know.

This reinforces the importance of:

• Consistency: Maintaining a cohesive design language across an interface minimises confusion.
• Leveraging Established Patterns: Successful existing designs offer valuable insights for creating user-friendly experiences.

My Example: Youtube, Nykaa & Instagram.

Fitt’s Law

The time to acquire a target is a function of the distance to and size of the target.

The law translates into actionable design principles:

• Prioritize Size: Larger buttons and icons are easier for users to see and tap on, minimising the time and effort required for interaction.
• Strategic Placement: By positioning frequently used features or primary call-to-action (CTA) buttons closer to the user’s natural hand or cursor path, we can significantly improve interaction speed. This is especially important for mobile interfaces, where screen space is limited.

My Example: Spotify, Iphone Camera & Safari search bar

Drill Exercise 2: Creating a Music app UI in Figma

Redesign the music app UI with a splash of gradients. The play/pause button is also repositioned for easier tapping, prioritizing user interaction.

➡️ ️UX Career Fit Workshop

The workshop began with a unique exercise—the “work on yourself” workbook. This introspective exercise wasn’t about design skills, but about understanding ourselves and how we fit into UX design.

The Workbook Steps:

1. Knowing Yourself: This section involved self-reflection. We listed things we already knew about ourselves, our experiences, interests, and strengths.
2. Inner Child Exploration: Next, we took a nostalgic trip down memory lane. We listed the things we loved as kids — these passions often hold clues to our inherent skills and motivations.
3. Unearthing Our Core: By analysing our self-reflections and childhood loves, we identified our fundamental qualities. These core traits would become the foundation for our UX design aspirations.
4. The UX Skillset: This section provided a map of the specific skills and knowledge needed for a UX career.
5. Matching Our Strengths: Armed with newfound self-awareness and a clear picture of the UX skillset, we embarked on a self-discovery treasure hunt. We matched our fundamental qualities with the UX skills they aligned with, highlighting our natural strengths for this exciting profession.

➡️ ️ Animated Prototypes

Initially, we worked on a basic animated prototype in Figma.

Animated prototypes mimic real-world interactions, enhancing the user experience by showcasing how the final product will feel and function.

Part 1

Mega UX Learning with Anudeep

The session covered a wide range of essential concepts, equipping us with the tools and knowledge to excel in the field.

What is the responsibility of a UX designer?

• Design for users: They research what users need and design interfaces that feel natural and intuitive.
• Impact business: By creating happy and engaged users, UX design helps businesses achieve their goals.
• Learn all the relevant tools to go and impact business and design for the user.

➡️ Key Takeaways:

• UX Design Fundamentals: We delved into the core principles that guide user-centered design, ensuring products are intuitive, efficient, and address real user needs.
• Prototyping Power: The art of crafting low-fidelity and high-fidelity prototypes was explored. These practical tools allow designers to visualize ideas and gather valuable user feedback before investing in full development.
• Design with Business Impact: This session shed light on how good design can positively impact a business’s bottom line. We learned how to translate design value into measurable metrics.
• Jakob’s Law in Action: Jakob’s 10 Heuristics for User Interface Design, a set of valuable principles that guide us in creating user-friendly interfaces. We explored real-world examples to understand how these principles simplify user interactions and improve the overall user experience.

Seamless Interactions: Consistency is Key

Users should not have to wonder whether different words, situations, or actions mean the same thing. Failing to maintain consistency may increase the users' cognitive load by forcing them to learn something new.

Prioritizing Recognition over Recall: A User-Friendly Approach

Minimize the user’s memory load by making elements, actions, and options visible. The user should not have to remember information from one part of the interface to another. Information required to use the design should be visible or easily retrievable when needed.

Escape Routes: Giving Users Control

User control and freedom users often perform actions by mistake. They need a clearly marked “emergency exit” to leave the unwanted action without having to go through an extended process. Users shouldn’t feel trapped in a confusing sequence of steps. Clear “back” buttons, “cancel” options, or the ability to easily return to the previous screen are essential.

Keeping Users in the Loop: Visibility of System Status

Clear feedback is king! Users shouldn’t be left guessing. UX design prioritizes keeping them informed with timely messages and visual cues (think loading bars) about what’s happening — minimising frustration and building trust.

Friendly Guidance: Designing for Error Recovery

Help user recongize, diagnose & recover from errors is an error messages should be expressed in plain language (no error codes), precisely indicate the problem, and constructively suggest a solution.

The Power of Minimalism : Aesthetic & Minimal Design

Interfaces should not contain information which is irrelevant or rarely needed. Every extra unit of information in an interface competes with the relevant units of information and diminishes their relative visibility.

Adaptable for Everyone: Designing for Flexibility

Flexibility and efficiency of use is hidden shortcuts, revealed as users gain experience, cater to power users while keeping the interface uncluttered for beginners. The ability to personalise frequent actions is crucial. Imagine keyboard shortcuts ( CTL C & CTL V) — these features empower users to tailor the interface to their specific needs, increasing efficiency for everyone.

Speaking the Same Language: Matching System and Real World

Use words and concepts familiar to users, ensuring everyone understands what’s on screen. Presenting information in a natural and logical order allows users to navigate the interface intuitively. Think about how we file documents or organize things in real life. By bridging the gap between the system and the real world, we create interfaces that feel familiar and user-friendly.

Preventing Mistakes Before They Happen: Error Prevention

Good error messages are important, but the best designs carefully prevent problems from occurring in the first place. Either eliminate error-prone conditions, or check for them. Even with good design, mistakes happen. Allow users to undo or redo actions to easily fix them.

Safety Net : Help and Documentations:

Aim for clarity first, with on-demand support (like docs or tutorials) available for those who need it. Think training wheels on a bicycle : there for initial support, but the goal is an independent rider.

By doing above exercise, we learned Jakob Nielsen’s Usability heuristics

➡️ ️Part 2 :

Why Low-Fidelity Prototypes ?

Low-fidelity prototypes are like the first draft of a story — they get the core ideas down quickly without getting bogged down in details. Here’s Why ?

They allow us to move “from ambiguity to clarity” by providing a tangible starting point for feedback and iteration. Rough sketches are easier to modify than polished prototypes, enabling us to explore different ideas and refine our vision as we go.

Developing low-fidelity prototypes is fast and inexpensive. This means we can test a wider range of design concepts early on, identifying potential issues and saving valuable time and resources later in the development process.

Low-Fidelity Prototyping on Marvel Application.

Why High-Fidelity Prototypes ?

They closely resemble the final product, allowing users to interact with a prototype that feels more like the real deal. This provides more realistic user testing and helps identify issues with usability, workflow, and overall user experience.

With high-fidelity prototypes, users can provide feedback on specific design elements like buttons, icons, layouts, and information hierarchy. High-fidelity prototypes are a great way to showcase the product vision to stakeholders and team members. The realistic look and feel fosters better communication and can help secure buy-in for the design direction.

A well-crafted high-fidelity prototype can serve as a blueprint for developers. The detailed design elements and interactions provide a clear roadmap for building the final product, minimizing discrepancies and ensuring a smooth development process.

High-Fidelity Prototyping on Figma.

➡️ The Hook Model

Imagine the Hook Model as a cycle that keeps you glued to an app. It has four parts:

1. Something catches your eye (trigger): A notification pops up, you get bored, or something sparks your interest.
2. You take action: You open the app to see what’s up.
3. Surprise! There’s something new (a variable reward): New messages, funny videos, or a game level-up keep you engaged.
4. You invest your time (investment): The more you use the app, the more you get hooked because of the things you’ve created or achieved within it.

This cycle makes you want to come back for more, turning occasional use into a habit.

➡️ ️Business Impact of UX Design:

Conversion Rate: Turning Visitors into Customers

Conversion rate measures your success in converting website visitors into paying customers. It’s like a scorecard for your marketing funnel, tracking how many users complete key actions (purchases, signups) at each stage. The goal? Minimize “drop-off” (lost visitors) with engaging content that guides them towards becoming paying customers.

Session Length Metrics: Time Spent Engaged

Session length metrics track how long users spend on your website or app during a single visit. This data helps you understand user engagement and identify areas for improvement.

Daily Active Users (DAU): A Pulse Check on Engagement

DAU metrics track the number of unique users who interact with your product on a given day. It’s a vital sign for gauging user engagement and product health.

Retention Metrics: The Key to Customer Loyalty

Rentention Metrics is how well your business retains customers and how satisfied those customers are throughout the entire customer journey.

By doing above exercise, we learned Business Impact of UX Design.

Hick’s Law

The time it takes to make a decision increases with numbers and complexity of choices.

The law teaches us that users presented with fewer choices make decisions faster and with less confusion. This principle is crucial for designing clear and concise interfaces that minimize user frustration.

My Example: Spotify, Myntra & Urban Clap

The workshop introduced us to the powerful concepts of affordances and signifiers. We learned how to apply them through an exercise — designing an OTT platform UI

Emphasizes the importance of affordances and signifiers. It highlights an engaging approach to learning these concepts.

• Affordance: A design signal that tells users how to interact with an element. Like a play button—an inherent ability to be clicked.
• Signifier: The visual cues that tell users what that action is essentially translate affordances into clear user understanding.—the play button communicates its clickability.

Replicating OTT Screen

Key Takeaways

We learned that limiting choices makes it easier for users to make decisions. This aligns with Hick’s Law, which emphasizes the correlation between fewer options and faster, less confusing choices.

The importance of clear and easily understandable options was used. When replicating a UI screen, we applied Jakob’s Law by keeping the home page design consistent with existing OTT app layouts. This leverages user familiarity and minimizes the learning curve.

Understanding how users interact physically with interfaces was crucial. By placing the Play button in the center and making it larger, we applied Fitt’s Law. This principle ensures the button is easier to see and tap, minimizing user effort.

The law of proximity was introduced. Elements placed closer together are perceived as related. Understanding this principle allows for the creation of organised interfaces where users can easily grasp the relationships between different elements.

Doherty Threshold

Productivity soars when computer and users interact at a pace (<400ms) to ensure that neither has to wait for the other.

It basically states that a system need not wait for the users or user wait for the system to interact with each other.

• Minimize Misclicks: When feedback is slow, users might get impatient and tap repeatedly, leading to accidental misclicks. A smooth and responsive interface minimises frustration and keeps users engaged
• Respect User Time: People value their time. Speedy responses demonstrate respect for the user’s experience.

My Example: Chrome gamifying the wait, Instagram & LinkedIn skeleton view.

➡️ ️ Animated Prototypes

Finally, we worked on a advanced animated prototype in Figma.

Stage 1 & Stage 2 Animation On Figma

Zeigarnik Effect

People remember uncompleted or interrupted task better than completed task

Motivate Through Interruption?

The effect states that interrupting users strategically can actually motivate them to complete a task. This is because unfinished tasks create a tension that users want to resolve.

• Progress Indicators: Show users how much they’ve accomplished and how much is left. This creates a sense of incompleteness that motivates them to finish. Think of a progress bar filling up.
• Save Drafts: Allow users to save unfinished work. Knowing their progress is saved creates a sense of “almost done” and encourages them to return and complete it later.
• Strategic Reminders: Send gentle reminders about abandoned tasks, but avoid being too pushy. A timely nudge can reignite interest and get users back on track.

My Examples: Dominos reward of 10 free pizza, Cider purchase promotion to different levels, iBook’s Daily reading goals.

➡️ ️ Figma Component Based Design

Figma empowers component-based design, where reusable UI elements (buttons, menus) act like building blocks. This approach saves time, ensures consistency, and simplifies future updates.

That’s a wrap! This UX design workshop packed a punch, equipping us with valuable tools and knowledge to create user-centered experiences. Now it’s time to put our learnings into action

Thank you for reading, hope you enjoyed!