Applying Architecture to Product Design: Circulation

In spring of 2009, I graduated from architecture school. At the time, the post-recession economy was rough and not much was happening for architects. With an interest in entrepreneurship and technology, I took a risk and decided to try working at a tech startup. Much to my surprise, I fell in love with the industry and 5 years later, I’m now a Product Designer at Percolate in NYC.

Since my career pivot, I’ve noticed many interesting parallels between architecture and product design. Although the mediums are different, it’s amazing to see how many of the design principles and processes are the same. To some degree, even the tools can be applied to both design industries.

Over the years, I’ve enjoyed applying lessons learned in architecture school to product design. I’ve also loved sharing the lessons with friends and watching them apply those ideas to their design practices.

Throughout the next few weeks, I will be sharing lessons learned in architecture school and how I apply them to product design at Percolate.

Hope you find this mini-series interesting and useful. Let’s get started.

Circulation

One of the greatest lessons I learned in architecture school is the importance of circulation systems in the design of buildings.

Think about some of your favorite buildings. In order to move between floors, you need stairs, elevators and ramps. To move between rooms on floors, you need hallways and corridors. The methods of circulation are key functional elements in all buildings.

When I moved from architecture to product design, I immediately realized the concept of circulation was very much applicable to the design of software applications. To see what I mean, look at the following diagram I created to show how how moving between floors in a building is similar to moving between screens in a mobile app. The purpose of stairs in the building is the same as it is for the tabs in the app. In both cases, it’s the primary method of helping people move between core spaces.

Circulation greatly affects our perception of both products and architecture. Think about renting an apartment on the 7th floor of a building. If you entered your building and had to climb 7 flights of stairs to reach your apartment, your legs would be in great shape, but you might feel tired and have a less pleasant experience. If you entered the same apartment building and got to take an elevator to reach your apartment, your perception of the building might be more favorable.

The circulation of buildings not only affects your perception of them, but also your usage and behavior within them. Continuing the apartment example, stairs would likely lead you to go home less frequently than you would if you had an elevator in the building. The presence of an elevator would likely lead you to carry home bigger, heavier items. The lesson learned is that we make a lot of choices based on available circulation systems.

Circulation in Percolate Apps

At Percolate, the design team spends time thinking about circulation systems in our iOS and Android apps. This is more commonly referred to as “navigation”. Our first mobile app, Photographer, includes a full screen list navigation. Users tap the hamburger icon in the top left and are brought to a full screen list where they select a destination. This navigation was chosen to focus the user’s attention on the app’s core functionality, which is taking pictures and viewing pictures in the media library.

This full screen list navigation feels a lot like getting into an elevator, selecting a floor, then getting off of at the desired place. In architecture, the elevator method of circulation is often a good one. However, when there are only a few destination points, you might start to wonder: “Is an elevator really necessary?”

With this question in mind, we decided to explore simpler navigation systems as we designed new apps. Earlier this year, during the development of Ambassador, an employee advocacy app, we sketched and iterated on navigation systems. In doing so, we noticed tabs improved the experience in these ways:

• Less clicks: Tabs simplify the navigation by reducing the number of taps needed to switch between core screens from 2 taps in the full screen list (hamburger > destination) to a single tap in tabs.
• More explicit: Tab names and icons are easy to understand and always visible to the user, rather than being hidden inside a full screen list.
• More browsing: Because tabs make navigation faster and more obvious, users are more likely to jump between different areas of the app. This is an important consideration for apps such as Ambassador where we want users to interact with both brand activity and inbox messages shared from their team, which live on separate tabs.

After further consideration, we decided tabs offered a better circulation design for our apps. Since that exploration, we have started developing all of our apps to include a tab navigation. Today, tabs are currently live in the Ambassador, Marketer and Community Manager apps.

Lessons Learned

As an architect, I learned circulation systems including stairs, hallways and elevators are very important in helping people navigate buildings. Similarly, as a product designer, I’ve learned circulation systems such as list menus and tabs are necessary for helping people navigate products.

Outside of Percolate, we’re happy to see other startups thinking about circulation. Over 10 million guests booked rooms through Airbnb last year, and according to this Wall Street Journal article, their founders were thinking about circulation very early on:

The rest of 2008 was spent adding more robust website features that make Airbnb easy to use. Steve Jobs had famously insisted on a maximum of three user clicks to get a song on the Apple iPod. Airbnb adopted that mantra: three clicks to a booking.

As you’re developing your next product, remember to think about circulation early and often in the design process. The easier it is to navigate your product, the more likely it will be a success.

Thanks for reading! Look for more posts in this series coming soon. You can follow me on Twitter at @lissalauren.

PS: Looking for a design job? Percolate Design is hiring! Say hello. ☺

A version of this article originally appeared on the Percolate Blog.