Chuck Rice

Sign in

What makes it so broken (and how I booked my UK arrival tests).

View from an airplane window at sunset, overlooking the right-side plane wing.

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…

Photo from behind the audience, me at the front with a microphone, and a projector hanging from the right.

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.

My first Sprint

I want to start by sharing how my very first Sprint went.

Screenshot of the talk organisers and guest speaker on theGoogle Meet platform.

We had our best turn out yet for the 13 July 2021 IxDF Manchester meet up community with 34 people signed up.

A basic mobile web page as a gif, opening the burger menu, scrolling down menu items, then closing it.

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.

Why an Overlay isn’t scrollable

There a few principles you need to be aware of, to understand how to best work with a scrollable Overlay.

  • your Overlay is placed on top of your screen
  • the screen moves to the ‘background’…

Can Mockitt really “scale your design thinking”? Let’s benchmark it by creating a Google Search prototype.

Screenshot of the Mockitt tool, in the browser, with my 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 required for true Figma mastery.

A page design, left, visualised using shadowed rectangles, right.

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.

Anatomy of a nested Frame

Visualisation of a nav bar, text content, and a footer hovering over a web page Made in Figma’s editor.

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.

Benefits of scalable web page layouts

Isometric view of cells in Figma creating a table, using the ‘blow-up’ diagram style.

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.

Visual styles of tables

There are a few different visual styles that are floating around on the internet today…

Visual diagram of how the ‘double-glazed’ effect is achieved for a Component with an Internal and External Frame.

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.

Techniques required

To create your responsive Components, you need to have some mastery of these concepts:

When these three techniques are combined together effectively…

A visualisation of how Page Content and the View Windows fit together to create the Anchor Link illusion.

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:

What is Scroll Overflow

If you’ve been designing functional prototypes for mobile devices within Figma then this is a concept…

Chuck Rice

Technical Lead @residently. Specialised in Design Systems, DevOps, and a certified Design Sprint facilitator. CrossFit and Travel 🏝.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store