Want to transform your design practice? Perhaps it’s time to try a combination of good-old paper and digital kits. We sat down with Eric Miller, Creative Market shop owner and creator behind UX Kits, to get invaluable insider tips from 20 years in the field.
How did you get interested in the field of product design?
I’ve been doing website and UX design since the late 90s. It was all primarily client work until about 2013. At that point, I had developed products that I used internally for my clients, like flowchart and wireframe kits.
Then a friend of mine who runs a site that sells stencils for OmniGraffle said, “Did you ever consider packaging one of these up and selling it as a download?†That product went on to do really well. That same year, we uploaded some of these digital tools to Creative Market. Those were my beginnings in the downloadable product design space.
A few months later, in a sudden moment, I realized that our flowchart kits could easily be translated into a deck of physical cards as a way to sit down with a client. Something that you could use for more hands-on brainstorming sessions. It would allow clients or teams to interact, even if they do not draw well or use software.
These analog tools give you a way to collaborate that doesn’t require any devices. My first physical product was a deck of cards for website architecture-type projects. A few years later, I came out with version one of the Wireframe Deck, which is the early version of the product we have on Kickstarter today. This new version was a way to take it a step further and build actual wireframes.
Since then, this deck has been used by designers all over the world. I’ve been able to gather feedback over the years and that led me to launch version 2 that’s on Kickstarter now until July 8.
How are digital and analog wireframing kits different, in your opinion?
I find the analog products are really great for getting non-designers involved. I do use them on my own just to quickly think of ideas, but I think where they really shine is when working with clients, developers, or product managers who might not use software.
They’re also ideal if you’re running design workshops and exercises where you just want to be sitting around and playing. It’s a fun product. Everyone likes playing cards.
That’s definitely what I would call the first step: playing around with broad questions like what’s the content hierarchy? What are the different types of content we need?
In terms of digital downloadable products, I find those are really useful when you need to send a deliverable to a client that looks a bit more polished. You don’t want to spend hours reinventing the wheel every time, so a downloadable kit is great if you want to put a user flow or wireframe together.
You can certainly use the deck to build actual layouts, but you can also use it just to make piles and realize things like “oh, I know we need video content†or customer testimonials or things like that.
Whenever you engage in low-fidelity prototyping like this, whether it’s a deck of cards or building a prototype out of cardboard and glue, you immediately have these “aha†moments that you don’t have if you jump right into the software and attempt to make it look perfect.
You don’t know what you don’t know. You may not even realize what those ideas are until you play with these simpler tools.
Which would you say are some of the most useful elements in these kinds of kits?
Fred Wilson, a venture capitalist, wrote it up really well in one of his recent Funding Friday posts:
So many times, I have known pretty much what I want for a website for a project, an event, a new business, or whatever, but I am a terrible sketcher and I don’t know how to use the software tools that web designers use. A deck of cards would be ideal for me and probably a lot of other people too.
There are 130 cards in this latest deck and you can very easily express a vision for a product. It doesn’t have to look good or be lined up perfectly. You can just say, “you know what? I want a video at the top.†I also know I need a photo gallery and then you could just snap a photo and say, “here’s the basic architecture of it.â€
I find that people rely the most on image and combo cards – those that combine text and photos. There are multiple ways you can lay them out. You could use a pure image card and put a pure text card next to it, or you can use a card that has an image and text below it. The various profile cards are also popular, which include a person’s face, their name, and a little bio.
Here’s one of the key aha moments involved in designing this deck: initially, these cards were going to be these long widescreen cards, each representing a row. Typical of a stacked website layout.
While a lot of websites now are a long scroll and do use this row-based approach, that felt very limiting. So I started cutting up index cards and playing around with them.
That led to the moment where it went from a concept to something I would ultimately create: I realized the cards should be square. Suddenly, rows weren’t a limitation any more. You could do one column for mobile, two-column, three-column, four-column. You could leave spaces.
When using these digital and physical wireframing tools, what are some of your rules?
People definitely shouldn’t be thinking about how their website is going to look. From all my experience with clients, providing them low fidelity examples and prototypes early is definitely the way to go.
A fun aspect of the deck is that it has low-fidelity mock-ups on one side and higher fidelity designs on the other. These are helpful when you want to show, e.g, a photo but don’t want the client to think, “Oh, why is it a photo of a mountain?†At that point, you could flip the card over and just show them the icon. And the same goes for text.
It’s really about the structure of the page. If you’re talking about a user flow, it’s about the architecture of the site, and not worrying about specific things like color palettes, fonts, and typography.
A step I’ve added to all of my client work in the last few years is iPad sketches. First of all, it’s a really fun way to design that eliminates any level of assumption. It also allows clients to quickly approve or review things. While it’s not technically paper prototyping, I am drawing basically in a digital sketchbook.
Do you have any advice for someone who’s just getting started with UX design?
If you’re looking to jump-start education, I’d recommend taking a UX intensive at a place like General Assembly.
If you’re not gonna go in that direction, read everything. Great foundations about UX design can be found in sites like the Nielsen Norman Group, user-based UX research papers, and sites like Smashing Magazine. Dribbble is great for inspiration and seeing how other designers work. When I started, you couldn’t really Google and get a thousand articles about web design. That kind of content didn’t exist.
I’ve also made a lot of UX friends on Instagram, especially recently. My advice is to choose one community because it’s just a lot of time and energy. Twitter, Instagram, and Dribbble are some top places to check out. Make sure you’re commenting, asking questions, sharing other people’s work, and posting what you’re doing.
Speaking of community, where can readers find you and connect with you?
I’m on Creative Market, Dribbble, Instagram, and Twitter. We also have a Slack channel.
Check off these items before you go live and make sure that your visitors get the best possible experience.
Download your checklist
Brand strategist. Creating design tools to empower creative entrepreneurs. Author of the Lean Branding book. MA in Design Management from the Savannah College of Art and Design (SCAD).
View More Posts
