Joe Ringenberg

👋 Hello! I’m a product designer, inveterate learner, design coach, and tool enthusiast. If you’d like to get to know me, follow me on twitter, instagram, or linkedin, but if you’d like to see my work, keep reading.

This is a design portfolio

A portfolio is an opinionated container and a personal statement, and choosing its form and structure is a design challenge. An article is good for telling stories alongside the pictures, and whether it's skimmed or read slowly, it presents a linear path and demands a conclusion. And it demands ruthless editing along the way! I think most design portfolios would benefit from both of those things.

Leading with the best

Since 2011, I’ve worked at Wistia as their first designer, their first Director of Design, and currently as a Principal Product Designer focused on the viewing and listening experience. It’s the most technically challenging work of my career, and the work I’m most proud of. Here are two highlights:

The Wistia Video Player

As a video hosting platform, the player is the most critical moment when the world interacts with our work — to the tune of 40 million times per day.

Visually, the details of the player are crafted to get out of the way and keep the focus on the content, not the container. Crisp minimalism paired with powerful customizations leave our customers feeling like the player elevates their own brand (not Wistia’s).

Technically, the player is an exercise in efficiency in order to load as quickly as possible on any device, anywhere in the world. As a designer, that meant digging into details like more efficient code in icon svg files, and creating a custom font to load only digits for the timestamp (the rest of the alphabet can wait until playback begins). To see it in action, head over to wistia.com.

Video Accessibility

As part of a larger goal to prioritize accessibility across Wistia, we built a color picker that would help our users easily choose high-contrast player colors. The structure and flow of it draw from the way colorspace is being broken down and prioritized, which I’ve written about in detail over here. But the end result is a smart, direct choice in only a click or two.

Getting a task done in a single click makes this a helpful and efficient tool, but the most impactful changes to the product came in the form of copywriting. Helping users improve the accessibility of their videos with things like captions and alt-text has less to do with reducing technical steps and more to do with education: friendly explanations, clear instructions, and helpful tooltips. In this project, I did more user testing on the copy than on the UI elements themselves! And I learned that the same rule applies for in-app helper-text as it does for portfolios and UI elements: keep it clear and concise.

A Conversational UI for Trade

Trade is a commodity exchange in Ghana that connects farmers to buyers and cuts out the physical marketplace. The new opportunities made possible by access to mobile networks brings a constraint as well — many maize farmers read limited English and are working with unfamiliar, low-resolution devices. To lean into that limitation, I designed a conversational order-creation flow that reduces the steps to simple questions and, as a fallback, can be completed entirely via text message.

As a farmer or buyer takes the step of creating an order, they populate a simple equation. This ‘card’ is the primary object or building block that persists across various views in the app. In other views it expands with details, shows its status, and can be operated on and edited.

Among other firsts, this project was the first time a logo that I designed was printed on giant industrial grain bags. And though my work as a product designer only dips into branding from time to time, logos play heavily in my favorite side projects.

A logo for Tiro

Software design is a puzzle of technical tradeoffs and sneaky edge-cases. It’s a balancing act of business goals, stakeholders, and competing priorities. And I do like a design solution built on rigor and reason, but sometimes it’s nice to step back and rely on taste and patience.

Tiro is a tracking and sharing tool for homeschooling families (my own included!). I knew the brand should be colorful and use expressive typography, and as the iterations progressed (left to right) I reduced the idea down to that first instinct. This simplification is a goal in all my design work. It took Louis Braille three years to go from a 12-dot system to a 6-dot system. I remind myself of that and iterate, and simplify, and iterate, and simplify.

Graphic design puzzles

Reducing a project to a single problem and zeroing in on it can reveal an Aha! moment that drives the whole design. This makes for punchy work that is satisfying for its simplicity and easy to read. Here are two examples:

1. This is a label for the syrup we make from the maple trees around our house. Because the batches can be so different and get bottled in irregular, recycled jars to share with friends, I needed a label with spaces to write the date and the volume of each unique container. These white spaces became glistening spots on a drop of syrup, and once that functional demand was answered, the rest of the design poured right out.

2. Second is an inclusive bathroom sign. When Wistia moved into a new office space, I worked out the signage. The trickiest puzzle was how to represent gender-neutral bathrooms. Falling back on the familiar male/female iconography sort of misses the point, so I searched for imagery that was relevant to everyone’s bathroom experience.

These graphic design projects are some of my favorite work because of their minimalism. They both represent a single good idea, and use only the necessary design elements to convey it. I find it useful to judge a design not as the sum of its parts, but as the average. Unnecessary elements that don’t push the average up are guilty of pulling it down. Reducing a design to only the best moments increases the impact of the whole.

Stepping away from the screen

The majority of my creative work happens in front of a computer, but I try to carry the same functional simplicity into every project I get my hands on. These three projects are examples of focusing on a single insight and letting it drive the rest of the design.

(1) Plywood pegboad: the holes don’t need to be in a grid. This repeating pattern fits all the standard two-prong hardware, and creates a diagonal structural web that is stronger than the traditional orthogonal grid.

(2) Firewood rack: we burn a lot of wood and a little kindling. The proportion doesn’t change, and the rack should keep the right amount of each available.

(3) Bassinet holder: splitting wood along the grain is really easy, but giving it perfectly flat, square surfaces is really hard. But! As long as the holes are straight, wooden dowels work just well on irregular surfaces.

In my first sentence I described myself as a tool enthusiast — these three projects represent three new modes of tooling for me: a CNC router, a welder, and a froe. And while I didn’t run the router or do the welding myself, these projects satisfied another constant reminder to myself: Keep experimenting.

In conclusion

This is a collection of my favorite work, but also the rules of thumb I keep going back to. Keep it clear and concise. Focus on the problem to solve. Iterate and simplify. Pare it down to essential elements and cut the rest. Keep experimenting.

Up Next

Followup question? Get it touch! And if you enjoyed this and want to keep reading, check out my article on How Diagrams Solve Problems. Spoiler alert: diagrams are fun and useful!