# Grayhat Blog Tag: UX > Expanded public blog context for posts tagged UX. ## Page - [UX Tag](https://grayhat-company-blog.grayhatstudio.workers.dev/blog/tag/ux) - [UX Tag LLM Context](https://grayhat-company-blog.grayhatstudio.workers.dev/blog/tag/ux/llms.txt) - [Root LLM Context](https://grayhat-company-blog.grayhatstudio.workers.dev/blog/llms.txt) - [Root Full LLM Context](https://grayhat-company-blog.grayhatstudio.workers.dev/blog/llms-full.txt) - [Tag API](https://grayhat-company-blog.grayhatstudio.workers.dev/blog/api/public/v1/tags/ux) ## Tag Details - Slug: `ux` - Description: Not provided - Post count in current snapshot: 3 ## Current Posts - [Reflections from executing a Design Sprint](https://grayhat-company-blog.grayhatstudio.workers.dev/blog/reflections-from-executing-a-design-sprint) - How we (partially) applied the Google Design Sprint Kit in a project, and its reflections. - [Building Blazingly Fast with Material Design](https://grayhat-company-blog.grayhatstudio.workers.dev/blog/building-blazingly-fast-with-material-design) - In our fast-evolving world of web and mobile design, it's essential to stay in sync with cutting-edge design ideas. At the forefront of this design revolution lies Google's Material Design – a beautiful blend of precision, functionality, and visual charm. But what's the magic behind it for developers and designers? Beyond its eye-catching visuals, Material Design gives your projects wings, propelling them into captivating user experiences. I’ve been recently working on a project that, for some - [Design to Scale](https://grayhat-company-blog.grayhatstudio.workers.dev/blog/design-to-scale) - Look beyond tech, trends, and fancy buzzwords; look back to humans. ## Child Route Content ### [Reflections from executing a Design Sprint](https://grayhat-company-blog.grayhatstudio.workers.dev/blog/reflections-from-executing-a-design-sprint) - Slug: `reflections-from-executing-a-design-sprint` - Published: 2025-10-30T14:00:46.000+05:00 - Updated: 2025-10-30T14:00:46.000+05:00 - Reading time: 5 min - Tags: Design, Product Design, UI, UX - Authors: Aniqa Sadaf - Visibility: public We're experimenting hard in Grayhat right now to figure out a design flow that actually *works*. We're throwing everything at the wall, trying out all the best practices, using both physical tools (like, chart papers on walls, stickies, real Kanbans, paper and pens... the works) and digital ones (Figma, obviously 💃), and seeing how far we can push AI to help us out. We're not starting from zero, though. We're taking a lot of inspiration from the Google Sprint Kit and mixing it with solid SDLC/GDLC principles. It's important that we first learn the basics, and don't reinvent the wheel. We started with a startup, called Camply (now it's called Enrichly). We were in the "Planning Phase," just trying to figure out what we were even building, who for, and what problem it was going to solve. Camply is a web app for finding and signing up for camps, and the whole goal was to make it super smooth and hassle-free for customers. Our main focus was on fixing two big pain points for users. To do that, we had to dive into research - checking out competitor websites like Outschool, Allschool, you know, the ones our client used and recommended. The cool part was our client *was* the user, so she knew exactly where all the problems were on these other sites. She was our Onsite Customer. I moodboarded all these competitor sites in Figma. Compared their features, their flows, what worked and what totally didn't. From talking to our client and looking at the pain points, we realized we needed a design that was just… intuitive. Something that guides the user on its own, you know? Easy to understand and just fixes their problems. We had a bunch of features to think about - camp listings, search and filters, authentication, all that. But with the budget and timeline, we had to pick what would have the biggest impact. We narrowed it down to the search mechanism. We really had to put our brains into designing the best search. We even looked at sites like Amazon because, let's be honest, their search is just good, and users are familiar with the patterns in it (especially moms!). Then came the system design phase. The team set milestones and planned out the Camply flow for the POC. We had a ton of collaborations just to make sure the design and the tech architecture were compatible and could actually solve the business problems. We did the usual stuff - daily standups, cross-disciplinary meetings, weekly sprints, design handoffs. During the design phase, I made user personas for the "parent" and the "camp manager." Started with rough sketches, got initial client feedback, and discussed everything with the team. I had to constantly update the system architect on every little design change so we could track compatibility. Every design decision I made, I had to be sure it could actually be built well and on time. After the initial sketches (which we did with the system architect using paper and colored pens, lol), I turned them into wireframes in Figma and got the client's feedback. Once the flows were locked, I moved to high-fidelity prototypes. I used the Material Design library because it's neat, has great guidelines, and makes everything consistent. Client feedback was a constant loop until everything was finalized. Once the functional Figma prototypes were ready, we shipped them to the business team. They did the initial user surveys and interviews to test the designs. That led us into the development phase. When development started and the first version of the app went live, I was deep in design QA. I had to make sure the experience was smooth, the flows were accurate, and all the features worked as designed. We recorded all the issues, prioritized them, and got them fixed by the devs systematically. After version one was out, we planned to test it with real users: usability testing. Usability testing is ideal to: - Validate your hypothesis - Fix issues before the big launch - See how users actually use your product vs. a competitor's You should do it at every step. Depending on the stage, you ask different questions. There are three main times to ask users questions: before the test (to screen them), during the test (to answer your research questions), and after the test (for overall feedback). The most important thing? You gotta have the *correct audience*. Not everyone is your user. So you do a quick screening test first with questions like: - How does your everyday life look? - How often do you use products like this? - What do you identify as? etc. Then, during the test, your questions shouldn't lead the user. Let them think aloud. You just watch them interact, notice their body language, and ask things like: - I noticed you did [this action], why so? - What features do you find the most valuable? - Can you try performing [this specific action]? After the test, you ask more open questions: - How was your overall experience? - How likely are you to use this product? And as a designer, you HAVE to note the "critical incidents." - You expected the user to do one thing, but they did something totally different. - They seemed frustrated, or happy, or confused. - You assess what was a success and what was a failure. Tools like website heatmaps also help a ton. They show you the hottest areas on your site - where people click, scroll, move. It helps you understand where to focus on improving the experience. And lastly, you HAVE to document all the test feedback properly. Spreadsheets, screen recordings, audio notes… everything. You'll be amazed at what you notice when you rewatch it. So what do you do after usability testing? You analyze all that data. Look for patterns and common pain points. You need to look at both the numbers (quantitative data, like task completion rates) and the observations (qualitative data). Then you make informed decisions. But listen, NOT EVERY ISSUE IS IMPORTANT. You have to prioritize. Think about how often a problem happens, how much it messes up the user experience, and the potential ROI for fixing it. Collaboration between design and dev is crucial here. You gotta discuss possible solutions together. And then you make iterative changes. Don't try to fix everything at once. After you've made the initial changes, you go for another round of testing. See how the experience has improved and track the data. **So what could we have improved?** In our case, we did apply the best practices for usability testing. We went through all three stages, but we didn't record the feedback in a systematic way. Which led us to just assume we had to change everything a user didn't like. We really needed to group the common user issues and prioritize them properly. And you can't forget that as you move from a POC to an MVP, the client always has new feature demands. If we had recorded what needed to be worked on *after* the usability testing, and also tracked the new features, in a proper, systematic way… it would have led to a much happier client and way more realistic deadlines. We still have a long way to go... We're trying to incorporate technologies like Dev Mode, AI, scripting and more. Also, our Design offering has expanded beyond just UI/UX: We now also focus on Graphic Design, Character Design, Animation and more (coming soon - 3D is exciting!). I'd love to learn more about what your design process is, and how you think we can improve. ## **Some resources** - https://designsprintkit.withgoogle.com/ - https://designlab.com/blog/guide-to-usability-testing-methods - https://designlab.com/blog/what-is-the-ux-design-process - https://www.lyssna.com/guides/usability-testing-guide/usability-testing-methods/ - https://www.lyssna.com/blog/website-heatmaps/ - https://www.linkedin.com/pulse/next-steps-after-conducting-ux-testing-your/ ### [Building Blazingly Fast with Material Design](https://grayhat-company-blog.grayhatstudio.workers.dev/blog/building-blazingly-fast-with-material-design) - Slug: `building-blazingly-fast-with-material-design` - Published: 2023-10-13T16:01:00.000+05:00 - Updated: 2024-05-09T16:23:02.000+05:00 - Reading time: 5 min - Tags: Material UI, Flutter, UI, UX, Design - Authors: Wasif Sadiq - Visibility: public *Build fast and stable, and get MVPs done faster.In our fast-evolving world of web and mobile design, it's essential to stay in sync with cutting-edge design ideas. At the forefront of this design revolution lies Google's Material Design – a beautiful blend of precision, functionality, and visual charm. But what's the magic behind it for developers and designers? Beyond its eye-catching visuals, Material Design gives your projects wings, propelling them into captivating user experiences. I’ve been recently working on a project that, for some reason, started off with a totally custom UI. It was quite painstaking, trying to nail down multiple screen sizes, ensuring consistency, etcetera. That’s when our team brainstormed and decided to redesign the entire app, Figma and Flutter both, in Material UI. That's when I decided to delve into the world of Material Design. Using it immediately gave the app a fresh and engaging user interface. The client was passionate about creating an application that not only served a purpose but also left users with a memorable experience, so Material UI fit perfectly into the users’ native systems, Android, and gave them a seamless experience. *Let's take a deeper dive into Material Design, shall we?* Back in 2014, Google unveiled its masterpiece - Material Design. It's like a special design guide for making digital interfaces look and work better. It uses grids, smooth movements, and cool lighting and shadows. It's all about grid-centric layouts, fluid animations, and those subtle yet striking lighting and shadow effects – all coming together to create a user experience that feels as intuitive as a well-worn path. As I delved deeper into Material Design's guidelines and principles, I could immediately sense the attention-to-detail the designers at Google had. They’ve worked on almost every aspect of the design system, and made it super general so it can adapt to almost any system. It wasn't just about making things look beautiful; it was about making them work seamlessly too. You can learn more about the design side of Material in our previous article. *Now, **why** did Material Design supercharge our process?* ***A Unified Visual Language. ***Embracing Material Design means joining a conversation that Google has been perfecting for years. It's like speaking the same language as Android enthusiasts – a familiar, comforting dialogue. Since most of our users were on Android, it was a no-brainer to use Material to make our app blend in with the OS. Our designers made sure to take hints from Google’s own Drive and Mail app, and from the native Dialer app. We had to bring in a Pixel 4 specially for this (thanks to our team member, Syed Abdullah Nasir, for his phone 😅) ***Ready-Made Building Blocks.*** Material Design gives developers a treasure trove of premade UI components. No need to start from scratch; these elements are like LEGO blocks that speed up your prototyping and development process. Both design and development teams were super happy with this; the designers used the Material 3 Design Kit, and used the standard Android frame in Figma, to design the base screens. Then, all the Flutter team had to do was see the name of the components in the design, go to the Flutter Material 3 Docs, look up the same names of components, and simply use them in our code. ***Seamless Across Platforms.*** As we embrace cross-platform tools, Material Design shines as a beacon of consistency. It ensures your design looks and feels the same, no matter where it's experienced. This was super important for the folks at the development team; our client wanted a consistent look across all Android screens, from Pixels, to Samsungs. The best part of Material was that it was consistent; Heading1 was Heading1, in Figma, in a Samsung phone, in an iPhone, and almost any device. So we were never worried that something might look odd according to screen size. ***Engaging User Experiences.*** Material Design puts user interactions front and centre. It's all about giving users immediate feedback, creating interfaces that feel like second nature, and ultimately, making users smile with delight. We were just glad we got the ripple animation out-of-box. It brought a hint of professionality and polish to our work. ***Continuous Evolution and Community Support.** *With Google's watchful eye, Material Design keeps evolving to stay in tune with the latest UI/UX trends. Plus, there's a vibrant community out there, offering plugins, extensions, and wisdom in forums. The transition from Material 2 to 3, and from color themes, is pretty seamless. *But… I’m not a Flutter guy 😞 How can I use Material?* Here, let's talk about *how *to incorporate Material Design into your projects with frameworks and libraries that make it a breeze: **For the Web.** - If you're a React enthusiast, MUI is your go-to choice. - Vue.js lovers can embrace Vuetify for a rich suite of Material components. - Angular devotees are in luck. Since Angular is also maintained by Google, it has pretty much the best Material library possible, Angular Material! Best docs ever. **For Flutter (Google's darling).** Google's Flutter inherently champions Material Design. Just tap into package:flutter/material.dart to unlock a world of Material widgets. **For Android.** If you want a true Material experience on Android, look no further than AndroidX's Material Components. They're tailor-made to adhere to Google's Material guidelines. **For iOS.** Even in the Apple ecosystem, Material Design has a presence. Material Components for iOS gracefully bridges the gap, ensuring a consistent experience, however, they are entering maintenance mode and recommend shifting to native iOS components, SwiftUI and even Flutter. *I’m pumped! 🤩 Now what?* Leveraging these frameworks and libraries not only streamlines your development process but also guarantees an authentic Material Design experience, staying true to its core principles. I recommend you to read its principles and familiarize yourself with the concepts. That way, you won’t always have to rely on a designer to tell you exactly what to do; you can use your own Material-intuition to solve things yourself, along the way. Therefore, as you embark on your Material Design journey… **Dive into the Guidelines. **Immerse yourself in Google's official guidelines. They're like your North Star, guiding you through the vast sea of typography, motion, and more. **Harness Material Components. **Whether it's web development with Material Components for Web or conquering the mobile realm with iOS and Android versions, Material Components are your trusty companions. **Designer's Arsenal. **Prototype in style with design tools like Sketch, Figma, and Adobe XD. They offer Material Design kits that'll make your designs sing. **Stay Ahead.** Engage with Material Design-focused communities or forums. It's how you ensure you're always at the forefront of design evolution. In closing, remember that Material Design is more than just a pretty face. It's a catalyst for efficiency and aesthetic brilliance. By embracing its philosophy, you're not just hopping on a design bandwagon – you're supercharging your journey in the world of development. Whether you're a developer, designer, or a visionary crafting digital experiences, Material Design is your indispensable ally in shaping the future of the digital landscape. It certainly was mine, and it might just be yours too. **Author: **Wasif Sadiq **Editor:** Fatima Majid ### [Design to Scale](https://grayhat-company-blog.grayhatstudio.workers.dev/blog/design-to-scale) - Slug: `design-to-scale` - Published: 2023-08-23T16:37:00.000+05:00 - Updated: 2024-08-17T13:22:00.000+05:00 - Reading time: 3 min - Tags: Design, UI, UX, Product Design, System Design - Authors: Saad Bazaz - Visibility: public Picture yourself driving down a road and making a left turn at the end, only to be confronted by a roadblock due to ongoing construction. Swiftly, you reverse your vehicle, alter your path, and embark on a detour to ultimately reach your intended destination. Now, expand this scenario on a larger scale. Imagine a crowd of *ten thousand* other individuals navigating the same road, and among them, *one thousand* encounter the obstructed route. Like you, they also backtrack, change directions, and adopt an alternative route. Another possible scenario: Someone else witnessing both your car and the one ahead of you taking an unplanned detour promptly deduces that something is off. They might assess the situation from a distance and perceive it as an anomaly and follow your lead without seeing what's wrong for themselves. **Paulo Coelho says, “The problem is, sometimes you stop and think you understand the world. This is not correct. The world is always moving.”At an individual level, making mistakes is a natural part of life's journey. But when these mistakes are magnified on a grand scale, they can become a costly hiccup. Mistakes can inspire systems, but can also mold them like a shell around themselves. Nature has a keen tolerance to mistakes - it embraces them as part of its change mechanics. A zebra has an instinct to save its life from a threat like a lion, but that instinct is actually the absence of the love of death, which… died. Countless zebras with a will to die had to die, before the ones which didn’t could become the majority. Designing and scaling systems with a "natural" mindset, often referred to as biomimicry or biologically inspired design, involves drawing inspiration from the efficiency, adaptability, and sustainability found in natural systems. By integrating these principles into human-made systems, it's possible to create solutions that are better aligned with the natural world and more conducive to scalability. What is natural, though? Is it something which has been iterated over countless times? Can, one day, our robotic and cold systems be called “natural”? If I simulate a system through a genetic algorithm, test every possible edge-case of it, and let it figure out the best way to do something… can I now call that system “natural”? Perhaps the building of systems, whether inspired by the nature around them or not, is inherently “natural” to a human being. Systems don’t also have to be invented or thought from scratch. They can build upon existing systems, or be a subset of them. You can build a system by connecting a few other systems with one another. Almost every ecosystem on earth is symbiotic in nature; the output of one, becomes the input to another, and vice versa. Shouldn’t our systems be strict, and built to prevent mistakes? I think otherwise. Keeping things stupidly simple, and building a robust framework of iterative improvement, while keeping a large vision in mind, may still be the best approach to building systems. The objective is always to maintain a balance, while moving progress - a key point of nature’s systems is sustainability. Of course, yes, there could be a “catastrophic event” which changes the course of the system, but good systems will always find a way forward, or, die out and leave a vacuum for better ones. "Nature has already solved many of the problems we are grappling with. Animals, plants, and microbes are the consummate engineers. They have found what works, what is appropriate, and most important, what lasts here on Earth." — Janine Benyus In the business world, this “balance” usually translates to burn rates, cost-profit charts, etcetera. As humans and their technology evolves, these iteration cycles may become shorter, but they will always exist. Perhaps one day, we humans could escape the labor which goes into these cycles and become strategic thinkers and visionaries. This evolution would augment (not replace!) human capabilities, and would force us to redesign and rethink some of our inefficient and “unnatural” human systems which have crept into our world. The first question I ask at Grayhat when designing systems is “How would this system exist if there was no technology in the world?”. In most cases, when software translates to the real world, there is almost always a way to achieve the objective without even touching a screen. Playing around real-world perceptions and experiences is a key stepping stone in the road to invention - only once you’ve understood how humans perceive the existing world, can you bring them out of their everyday lives and blow their minds. In the words of Albert Szent-Gyorgy: **"Innovation is seeing what everybody has seen and thinking what nobody has thought."**Author: **Saad Bazaz **Editor: **Aniqa Sadaf