For a process that is essentially e-commerce and a booking system under the hood, two very common IT solutions, it’s surprisingly broken and disjointed. Not to mention it was inevitable that as a society we would want to travel again in earnest. Whilst many are willing to jump through any hoops necessary to go on that holiday they missed out on last year, it’s not an excuse for test providers to skimp on the User Experience — let alone the security.
Here’s a rapid UX expert analysis of the booking process I took for my recent trip to Poland from…
Design Sprints are amazing for startups. They were designed to kick off new opportunities at Google Ventures after all. Whilst some have made their mark instilling a Sprint into more traditional corporates as-a-Service and within their own teams, it seems many have struggled (myself included) to provide it as a service to pre-seed clients in a commercially sustainable way. Drawing on my experience with startup, scale-up, and corporate environments, I want to show you why a pre-seed startup is hands-down the trickiest arena to apply a Design Sprint.
I want to start by sharing how my very first Sprint went.
Overlays are straightforward when they fit on the screen, but making overlays that are scrollable isn’t so intuitive. Also, depending on how you’ve set up your screen designs, the solution will differ. I’ll be walking you through the reasons why your overlay doesn’t work as you’d expect, the way to solve it, and some subtle limitations you’ll encounter when incorporating scrollable overlays into your designs.
There a few principles you need to be aware of, to understand how to best work with a scrollable Overlay.
Can Mockitt really “scale your design thinking”? Let’s benchmark it by creating a Google Search prototype.
I’ve been mastering the Figma design tool over the last couple of years as my UX and UI tool of choice. The more I learn, the more curious I am about other tools and how they compare — so curious I’ve developed my own preferred method of benchmarking these tools if I ever had the chance. …
Putting a Frame inside another Frame sounds like madness, but it’s a core prototyping technique you’ll need to learn for truly immersive prototypes. Not only is it key for basic interactions like scrolling, but also for some advanced techniques needed for a scalable Design System. I’ll give you an overview of what they are, why they’re helpful, and how to get started with Frame nesting.
Imagine a world where your pages will grow and shrink to fit its content with perfect alignment, even when you have a side navigation bar or static elements. All of a sudden, you can grow from managing ten pages, to a hundred pages or more without ripping your hair out. Gone are the days of manually resizing your pages and Components in order to accommodate that last-minute change and align properly in preview mode.
I’m going to show you how it’s done.
Tables are often harder to prototype than to code, but taking a single cell design strategy can make them responsive and maintainable. What’s more, all you need are Components, duplication and Auto-Layout techniques. I’ve experimented with a few ways and this method seems to have the best trade-offs. I’ll give you the whirlwind tour of the core visual styles of tables, how to build the single cell design, and the reasons why I opted for this as my preferred method of prototyping tables in Figma.
There are a few different visual styles that are floating around on the internet today…
Modern web solutions use responsive layouts that adapt to different devices, and it can be hard to design for it if you haven’t coded them yourself. If you setup your Design System Components in Figma correctly, you can make designing for responsiveness easier to understand and quicker to do. I’m going to show you how to design responsive Figma Components using the ‘double-glazing’ technique, and some limitations with a step-by-step worked example.
To create your responsive Components, you need to have some mastery of these concepts:
When these three techniques are combined together effectively…
Anchor Links aren’t the most exciting interaction to design, but they are a crucial design element for validating long form content and larger websites. It’s not intuitive to create Anchor Links but it’s possible with the Scroll Overflow technique, if you’re careful with layer management. I’ll show you how to create one, how you can organise your layers to keep it manageable, and a couple of limitations you may encounter.
Here’s the Figma preview link if you just want to see a proof-of-concept:
If you’ve been designing functional prototypes for mobile devices within Figma then this is a concept…