Mohamed Mahdi

📱 Day 3/15 – UX Audit Series App: BookMyShow 🎬 | Screen: Region Selection What works ✅ - Clear intent: user immediately understands that location drives the experience. - Direct task flow: no clutter, just a single focus: pick your city. - List view: familiar, alphabetized layout makes scanning easier. What could improve ⚠️ - Forced step: no “skip” or explore option; first-time users might drop off. - Accessibility: light placeholder + thin icon strokes may miss contrast targets. - Long lists = long scroll: no A–Z index or jump shortcuts under “Other Cities.” UX takeaway (laws to remember) 💡 - Jakob’s Law: users expect standard patterns (search + skip); removing them adds friction. - Peak-End Rule: first impressions matter; forcing choices too soon can create negative recall. 👉 What’s your take? Would you prefer being forced to pick a city, or given the freedom to explore first? #UXAudit #MobileUX #BookMyShow #ProductDesign #UXDesign #JakobsLaw #UXResearch

٣٠

٢ تعليق

I have spent hundreds of hours analyzing design systems. One of the things that confused me for many years is how to structure color scales and tokens. I have experimented with multiple structures at different sizes of design systems, and at a high-level recommend the following approach: 1. Primitive Colors Your design system foundations should always start with a full color scale that is based on your brand identity. We call these colors Primitives, and your variable/token collection should look like this: - purple-600 - purple-500 - purple-400 - And so on.. To create a Primitives palette you will want to start from your main brand colors and use a tool like UIColors, Supapalette, Colorbox to expand to the full scale. (links in comments) This is a great foundation to have, as it gives you a set of shades that can be used in different ways, and ensures all of them have consistent hues, saturation and brightness. However, Primitive colors are simply not effective when used directly in your designs: - They create ambiguity - Their names have no contextual meaning - They are often misused due to similarity If you have had the “why are there 20 different shades of gray?” conversation with an engineer, you know what I mean. So let’s see how we can improve that. 2. Semantic Colors This is my default recommendation to all product design teams that don’t have a highly complex design system. What you will want to do here is create a new variable collection named Semantic, which is what’s visible in your design files, and comprises of: - Brand / Action - Text - Link - Border - Icon - Surface / Background - Bias - Data / Charts Each color should point to a primitive value, e.g. - text-primary → gray-800 - text-secondary → gray-600 - text-tertiary → gray-400 This takes a bit of setting up, but creates immense long-term value. A great example of a simple, theme-level Semantic structure is Shopify’s Polaris (link in comments) 3. Component-level Semantic Lastly, if you are working on a design system with a lot of complexity and, ideally, a dedicated design systems team, you might want to add another level of hierarchy and specify colors at a component-level. In this structure, you would want to create color tokens based on how they are used in each component. - input-text-filled → text-primary - input-text-placeholder → text-secondary - input-text-disabled → text-tertiary This eliminates all guesswork, but also increases the complexity exponentially. It does serve a purpose though. As design systems scale, you may find that: - A theme-level semantic structure is too restrictive - There is still some guesswork - Decisions need to be documented. An example of this is Uber’s Base and Adobe’s Spectrum design system, linked in the comments. I’m curious to know, what structure are you using for your design system and what has worked well for you? — If you found this useful, consider reposting ♻️

٥٥٦

٣٥ تعليق

💡How To Capture Users' Emotions During User Research User research is a foundation for any product design process. The better you understand your target audience, the more chances you will succeed in building the right product for them. And capturing users' emotions is crucial for understanding how they feel about a product. Here are 4 UX techniques that can help you capture emotions: 1️⃣ Practice contextual inquiry. Observe users in their natural environment to see how they interact with the product and note their emotional responses 2️⃣ Use emotionally-focused questions during the interview. Include questions specifically designed to elicit emotional responses, such as "How did you feel when you used this feature?" 3️⃣ Do experience mapping. Track the entire experience of using the product, identifying key moments that trigger emotional responses (both positive and negative) 4️⃣ Create emotion-specific surveys. Utilize surveys designed to capture emotional responses, such as the PANAS (Positive and Negative Affect Schedule) or the SAM (Self-Assessment Manikin). ❗ Things to remember ✔ Use a think-aloud protocol to let users verbalize their thoughts and feelings as they interact with the product. ✔ Speak less, listen more. Give people time to express their thoughts. Ask follow-up questions to probe deeper into initial responses to uncover underlying emotions. ✔ Don't take words for granted. What people say might be different from what they really feel. Pay attention to users' body language for additional clues about their emotional state. ✔ Be mindful of surface-level responses (smiling and nodding). Users may smile and nod during the interview to be polite or conform to social norms, not necessarily because they agree or support what is being discussed. ✔ Users often hide criticism and tend to exaggerate positive feedback. It happens because they are uncomfortable expressing their true feelings.  ✔ Don't ask what people like or dislike (i.e., "What did you like about this experience?"). The response rarely matches the actual feelings of the user. ✔ Be mindful of bias. It's important to avoid making assumptions about users' thoughts and feelings based on superficial cues. The goal of UX research is to gain a deeper, more accurate insight into users unique contexts and needs. 📕 Guides and tools: ✔ Implementing Emotional Metrics in SaaS Products (by Odette Jansen) https://lnkd.in/dYaxWSVN ✔ User journey mapping, step by step https://lnkd.in/dNzt3NxX ✔ Feelings Wheel for Figma (by Christian Lunde)  https://lnkd.in/d8krqdcp 🖼️ The Spectrum of Empathy by NNGroup #UX #design #uxresearch #productdesign #design

٢٣٠

٩ تعليق

💡 Looking for the right research or design method for your next project? This interactive Methodology Selector helps you find the best fit based on your goals, stage, and team needs. A great tool to support evidence-based design decisions. 🔗 https://lnkd.in/dYrgfn2J 📸 Credits: UXR.cl #UXResearch #UXDesign #DesignMethods #ProductDesign #ServiceDesign #DesignThinking #ResearchOps #UXTools

٣٨

١ تعليق واحد

Let's understand the design system with a simple example. Let me break it down: 1️⃣ Seed = Token • What it is: The invisible design properties that form the foundation of your UI. • Examples: Colors, spacing, typography sizes, border radius, shadows. — 2️⃣ Mango Slice = Element • What it is: The smallest usable UI building blocks built using tokens. • Examples: Buttons, input fields, icons, badges, checkboxes. — 3️⃣ Full Mango = Component • What it is: Functional UI units made by combining multiple elements. • Examples: Modal dialogs, search bars, navigation cards, form sections. — 4️⃣ Branch of Mangoes = Template • What it is: Structured page layouts organizing components for specific purposes. • Examples: Dashboard layout, checkout page, product listing page. — 5️⃣ The Tree = Design System • What it is: The complete ecosystem that brings structure, consistency, and reusability to your product design. — ✨ Why is it used? To build faster, stay consistent, and scale design without reinventing the wheel. — 🏆 Follow Raunak Das for daily tips and stories on Product Design P.S. Have you ever created a design system? #designsystem #uiux #design

٤٤

٤ تعليق

If I were starting my design journey today, here’s how I’d approach it: 1. Learn the fundamentals: Layout, typography, and color theory are the building blocks of strong design. 2. Recreate to learn: Study existing designs by breaking them down and understanding why they work. 3. Seek feedback early: Sharing your work and inviting critique accelerates growth far more than working alone. 4. Build consistency: Progress comes from regular practice, whether daily or weekly. 5. Think beyond visuals: Design is about solving problems and creating clarity, not just making things look appealing. Starting out can feel overwhelming, but each step you take sharpens your eye, builds your confidence, and deepens your understanding. With time and practice, the process becomes clearer and far more rewarding.

٢٤

٥ تعليق