Development Agency & Digital Product Superheroes
Apps | Software | Hardware

Let's work together


Live Video Coaching Sessions with top tennis coaches

Learn more

Product Super Powers

Product Design

We’ll help you refine your idea and roadmap it into a real solution.

Native Mobile Apps

Your mobile app will be ridiculously fast and extremely reliable.

Web Apps & Software

Everything we build for you will run seamlessly across different platforms.

Hardware Development

We’ll apply technology to your hardware and make it way cooler.

See All Services

Genevieve Theirs
CEO, NewFounders

SO MANY THANKS to 20Spokes, our amazing tech firm here in Chicago. We literally cannot say enough good things about 20Spokes.

Why 20spokes


We live and breathe design and development, and put that passion into every product we produce.


You’ll know everything that goes into your product with status updates on a consistent basis.


Quality is top of mind. We work through a tailored approach to ensure that quality is consistent.


Turning your idea into a reality will not only be a rewarding experience that results in a high-quality product, but we guarantee you’ll have some fun.

From the Blog



UX is in the Details: Better Empty States

Empty states are the in-between spaces in any app. They’re what happens when the inbox is empty, when the special offer has expired, when you haven’t selected any favorites, or when you’ve cleared the to-do list out. And potentially they are the first screens to be seen upon signing up.

hendrix empty state


While empty states may seem like small flourishes, they are actually a powerful design pattern.

Anticipating empty states, understanding when and where empty states occur, requires extensive knowledge of a user’s pathway through the product. By developing good empty states, the landscape of the product can be clearer - a user can know what to expect from your app and even be guided on how to use the app before they have invested time in it.

On top of improving the user experience of an app, empty states inform your users on what information will be displayed on the screen. To put it nicely, without good empty states your product will feel not just empty, but broken!

dovetail empty state


So now that we have our empty states accounted for, how do we make them better?

Empty states are an incredible opportunity to build brand affinity. You can introduce branded characters and animations and set the tone of the brand’s identity through empty states. It is one of the most powerful ways to set the “tone” of your product - is it silly and loose, or purposeful and stylish? We probably wouldn’t want a dog digging for a bone in a financial product, but it’s perfect for a pet adoption app.

Hoang Nguyen Empty State

Dribbble: Hoang Nguyen

Humanizing your product with enjoyable empty states can produce familiarity and build an emotional connection. Twitter didn’t just tell you they’re down with a message - they showed you the iconic Fail Whale: cute birds cheerfully lifting a huge and grinning whale.

We may be down, but here’s an awesome cartoon.

While the endearing whale is no more, the reach of that simple empty state shows how powerful a tool they can be for a brand. Instead of a cold error message, there’s a colorful little diversion from frustration. Taking the edge off of bad news with an empty state illustration is a widely-used design pattern.

Ivy Mukherjee Empty State

Dribbble: Ivy Mukherjee

So, beyond your servers crashing - what else could we use empty states for?

They can show crucial information, acting as an onboarding agent for new users.

AirBnb Itinerary Empty State

AirBnb Itinerary Empty State

They can act as a tutorial, showing a slightly more in-depth way to use a feature.

Dropbox Empty State

Dropbox Paper Empty State

They can reveal product goals, or the power of a product.

Waze Alerts Empty State

Waze Alerts Empty State

The empty states are the chance to give the product a voice and let it speak. It’s nearly an advertisement for itself!

The most common empty state is the upload screen. The drag-here box that’s unmistakable because of its design - you just want to put your latest pic there. These “contribution” empty states are vital because they’re one of the user’s direct interaction points. It must not only look like something the user wants to use, of course - it has to work perfectly, too!

Empty states are a nudge that call us to action in our apps. Without them, users aren’t just lost - they think something is wrong. If there’s no particular place for a user to go, or if they don’t like where you’re trying to take them, then they’re going to bounce!

Blank screens hide features, but empty states reveal them

As a product designer, empty states are one of my favorite chances to be creative and really get to know a product. I get to shape how a user approaches a product’s features. What should this app feel like? What will they use it for? How will they want to use it? What will signal to them: this product is secure, safe, but also simple enough to use?

Now that we’ve explored why emtpy states are so crucial - did you notice an empty state you’d never thought about? Do you have a favorite empty state? Let me know in the comments!



What I’ve learned from a few large-scale React and Redux projects

A friend of mine recently starting a new job where he’ll be working a lot in React and Redux, and asked me if I had any strategies or best practices, particularly with large-scale projects.

I wish I could tell him that I do. But honestly, every time I make a framework-specific rule, I quickly come across a situation where the best solution is to break it.

What I have come up with are a few benchmarks that guide me to making sure my React code is understandable to other developers, and to Future-Me.

1. All of my logic is tested

When I ensure that all of my logic is tested, whether it’s component/view logic or action-related logic, I naturally fall into healthier coding patterns. I extract unnecessary responsibilities from my components. I write more helper functions and utility modules. I can better determine when state should be kept locally or remotely.

This also helps me determine what packages I want to introduce to my app. For example, people often debate whether Redux is an appropriate tool for their project. The co-author of Redux has even said that for many cases, local state is just fine. In my view, if Redux helps you test your logic, then you are gaining a big advantage by using it. Since reducers are supposed to be pure functions, testing them is incredibly straightforward. Action creators can be tested in isolation outside of your components. If you use any middleware to perform asynchronous requests, these can be tested in isolation as well.

Testing view logic should not be ignored either. If testing your components becomes cumbersome, or if you’re stubbing too many functions in order to test them, that’s a good sign your component is doing too much.

2. My Redux actions tell a story

Redux Dev Tools is indispensable to me when I’m building an app, and when I’m debugging one. These tools allow you to view all of your actions in real time, rewind and replay actions, and dig into the current state for each action.

The list of action names that Redux Dev Tools gives you should tell the story of your user. They should give you a crystal clear understanding what what your user is doing at any given time. An action like SEND_API_REQUESTED is way less understandable to a new developer than an action like USER_LOG_IN_REQUESTED, because it lacks the context of the user experience. Giving your actions this context helps a lot when debugging.

Redux actions should also show you the result of any asynchronous requests you make. So if I see a USER_LOG_IN_REQUESTED in my list of actions, I should know to expect a USER_LOG_IN_SUCCEEDED or USER_LOG_IN_FAILED action shortly afterward.
Using a redux middleware like redux-saga helps me keep track of asynchronous requests and their effects. With dev tools I can clearly see the order of these requests and the effects of their responses.

3. I know how to use a React component without looking up a working example of it in the codebase

If I’m looking at a component definition, I should be able to:

  1. determine whether this component is for global use or context-specific use. Often this is achieved by defining the component within certain directories, like components/elements/forms/textInput.js.

  2. know exactly what props this component receives. This can be done by using React’s prop-types package, which now allows you to more accurately define the shape of your props. So instead of doing this:

user: PropTypes.object.isRequired  

I can do this:

user: PropTypes.shape({  
  id: PropTypes.number.isRequired,
  first_name: PropTypes.string,
  state: PropTypes.oneOf(['pending', 'active', 'archived'])

I feel like I’ve only scratched the surface here, but it’s a start. Happy coding!



Can A Product Brief Really Make A Better App?

When we start a new product at 20spokes, the first deliverable is not the design - but the Product Brief.

Nothing makes warm and fuzzy “my product is really happening!” feelings happen like seeing those very first branded designs. All of the meetings, notes, ideas and concepts come alive in a gratifying visual scene: your new product’s layout!

Yet, the first design alone is not the beginning. We have to understand your users before we can build a powerful product, and the Product Brief is the first map of exactly how your users will experience your product.

How has user experience expertise gained such value and prevalence in the digital product realm? Because good user experience retains users and makes products downright enjoyable to use.

So where does this ethereal user experience design come from?

The truth is that the users are at the center of any app’s user experience. To put users first, we have to answer hard questions about every product:

  • Who are your users?

  • Why do they need your product?

  • Can you define exactly what you’re making, and who you’re making it for?

  • Is there a map of the user’s interactions with your product?

We help make this process easier, because the Product Brief creates a sharable template for the product you want to create.

An actionable and cohesive plan that addresses exactly who your users are and what they’re going to do with your product doesn’t just help the team to make the product - it helps make the product better.

The goals come first.

The product brief identifies mission critical features.

When you can limit the scope of features through a clear goal, you can avoid spending money to develop features that don’t fit your vision - and get your product to market faster.

We focus your product’s features by understanding your product’s goals. The Product Brief evaluates your product through the lens of:

  • What problem you are solving

  • Who you are solving this problem for

We couple a clear roadmap of your goals and capabilities with a clearly defined user audience. Your Product Brief directly influences functionality, inspires a more useful product and aides in the generation of thoughtful user interface design.

Let’s use a real world example: an app to make driving safer for teens. That’s the goal. From here, we know exactly who the app is for. Since we know that the app is for teens, we can focus on specific features that will help us achieve our goal. Maybe we monitor speed zones and clearly display the car’s speed. Perhaps we alert teens when there’s congestion or a traffic accident ahead. We could even silence incoming calls or texts while the app is on to limit distractions.

By knowing our audience and our goal, we are able to generate focused features. Some features like red light camera alerts could be tossed out - we don’t want to help teens run red lights - and other features emphasized. You save time, money and effort on features that don’t get used.

Limiting product scope with the powerful vision of a Product Brief frees up project resources, reduces turnaround time and keeps the product on schedule - all through a goal-oriented approach to product planning and design.

A unified client and team: one vision, with clear expectations.

Context is everything. The Product Brief is the context for our team’s contributions to the product, enabling smarter decisions during development.

Our briefs contain an overview of the research that aided in the product’s development process, providing a clear rationale for important details. This isn’t just reassuring for the client, it’s immensely helpful for our team during development.

Onboarding new team members, other departments or simply answering the question of “why is it this way?” becomes a faster, easier process - just show them the brief!

The overall direction of the product can be hard to pin down when a team is deep in the weeds of a bug or some other errant detail. The Product Brief is valuable for calculating what’s mission critical. Expectations are set for our team: we know what we’re aiming for.

The foundation of a positive and effective working relationship is often centered on a great Product Brief. Since the Product Brief is a tangible demonstration of how we’ve heard the client’s idea, it creates clear expectations between the client and the team. Trust is built, everything is laid out for all to see, and a challenging problem is broken down to be solved piece-by-piece.

The warm fuzzy “this is really happening” feelings don’t have to end with the first screenshots. A good plan that everyone can come back to keeps momentum going in the right direction. We use our Product Briefs as a template for success, right from the very start.

How do you think a Product Brief could improve product development? Do you need a Product Brief for your idea? Comment below and let us know what you think!

View More Work


We automated PupJoy’s operation and gave back hundreds of man hours. (So we could all spend more time with our best friends)


Want to watch a video of player mechanics while streaming a video chat with your tennis coach? We made it possible with Rhabit.