Browse Case Studies

Your Portfolio is empty. You can start adding Items throught your Wordpress admin panel!

All Posts in Product Design

05/09/2018 - No Comments!

Navigation Best Practices — Web App Design 101

Successful navigation orients users and empowers them to move efficiently.

Part One covered Layout Best Practices. Now let’s get into some tips on how to design navigation structures which are both intuitive and predictable, making them more user-friendly.

The purpose of a product’s navigation is two-fold.

  1. Help your user easily get to where they need to be.
  2. Provide visual cues as orientation for where they are now.

The ultimate goal of a navigational structure is for new and returning users to be able to figure out how to get around a digital product easily and efficiently.

 

This graphic here illustrates some of the questions a user may have when encountering a poorly structured navigation.

Let’s talk now about the specifics of building an effective nav.

Categories vs. Utilities

As you build out your navigation, you’ll want to keep in mind the difference between content categories and what I refer to as an product’s utilities.

Categories are content. They are high-level links to the main sections of your product’s content categories. Utilities, on the other hand are links to important elements of the app that aren’t really part of the content’s hierarchy. This includes tools and ancillary things like help screens, product authentication, error screens or a developer’s api documentation. These are all examples of utilities, and they vary fairly widely per-product.

When you’re structuring a navigation, you’ll want to be sure you’re not mixing these two types of link in your navigation.

Mixing these two types of links in a product’s navigation causes confusion. Eye tracking studies tell user researchers that users expect these two different types of links to be located in different places on the screen.

Twitter and InVision are both good examples of seperation between these two types of links in a product’s navigational structure. Here I highlighted the categories in green and utilities in pink.

User’s generally expect these types of links to be in these relative locations in a traditional web application’s layout.

The Three Most Common Navigation Structures

When it comes to physical placement of your categorical navigation, there are a few best practice “locations” within a screen’s real estate that lend themselves well to specific information architectures.

Let’s discuss the different areas of placement for your navigation. We’ll go through the top three positions, based on user expectations and space constraints.

Top Header

The first example is the top header placement.

This placement is ideal for your primary navigation because users look here for navigation intuitively. The header is also separated from the pages content, reducing confusion between navigation and content. Finally, the limited horizontal space forces you to organize your information clearly.

Subnavigation

The second recommended placement is the top Subnav.

This is useful when the header space isn’t large enough for all of your primary category links.

Similar to the top header pattern, users will still look here intuitively for their primary navigation links.

Side Navigation

Finally, there’s the side navigation.

This is a very common pattern, especially useful when you have a lot of category content in the product’s architecture.

It’s vertical structure supports scrolling, when the list becomes too long to fit within a window.

Combining Navigation Patterns

A few examples of product design navigation combinations.

With a complex project, you’ll likely find yourself combining these placements to form your navigation’s structure.

Here are some examples of how this may come together:

Header + Side Navigation — A very common structure with the primary navigation in the header and the secondary navigation in the sidebar.

Header + Sub Navigation — Also common, but use this only when both the primary and secondary navigation will fit in the space.

Sub Navigation + Side Navigation — Here the side navigation acts as our top-level, primary categorical navigation bar. The sub navigation acts as a secondary level, within the context of each screen.

Header + Sub Navigation + Side Navigation — All of the things! A useful pattern to follow within more complex products. Here the Header is primary, sub is secondary and side acts as a tertiary set of categorical navigation.

Read more

04/17/2018 - No Comments!

Emotional Branding for Sustainable Product Design

This post was written by Danielle Thompson, Designer for Toptal.

Product design is a creative discipline that challenges designers to build an aesthetic, functional, and marketable product. As the discipline matures alongside rapid technological innovation, productbrand, and user experience designers are finding new ways to connect emotionally with their users and customers, consequently creating opportunities for more sustained engagement. What is emotional branding? How does the brand or product bring meaning to the users’ lives?

Creating emotional brand connections to your target market can translate into conversions and sales as well as online and offline interactions. Great emotional design that connects with the user on multiple levels is a huge part of this process.

Read more

03/23/2017 - No Comments!

A Brief Information Architecture Primer

A Brief Information Architecture Primer

Recently, I co-delivered a webinar detailing the basics of information architecture, specific to the design of human machine interfaces (HMIs). We discussed the basics of Information Architecture (IA) and the benefits made possible when you add or invest in an information architecture stage for your product/project. The primary benefits being 1) Meaningful content organization and 2) Intuitive layout organization. I’ll be writing in detail about each of these subjects shortly, but for now let’s focus on IA itself.

This is a quick primer on the subject and the concepts involved – I’ve worked to distill down a ton of information into simple, actionable concepts for you. If you’re interested in more depth–grab a book–but for now, lets get started!

Read more

03/22/2017 - No Comments!

Design for Style Guides

How to craft and document modern component libraries

A primary point of contention in the product design to development workflow comes at the point of hand-off. As a project deadline looms, designers are typically scrambling to write specifications and export the necessary graphics to ensure the intended pixel designs are fully realized in the browser. This stage of a project is fairly fragmented industry-wide with each team doing their own thing with their own tooling. It’s a difficult stage that is regularly underestimated in terms of the time needed for proper completion.

In my experience as a product designer, front-end style guides are the missing deliverable at this stage of a product’s development. When supporting teams of developers, a style guide as design documentation is invaluable in contributing to a project’s long-term success.

When supporting teams of developers, a style guide as design documentation is invaluable in contributing to a project’s long-term success.

That said, I’d like to outline my approach to designing component-based systems with style guides in mind. Each project and the folks involved are unique, so be sure to bend and mold this process to your own situation. Design documentation doesn’t need to be perfect or even beautiful. It’s sole purpose functional, to ease the transition from designers to developers.

Read more

03/22/2017 - No Comments!

Using Social Proof in User OnBoarding

Boosting conversion rates while improving the user’s experience.

During a recent project’s research phase, I spent some time exploring the use of social proof as it relates to product design. After studying the subject and using it as a tool to effectively boost conversion rates in this recent project, I’d love to share what I learned through this article. When used correctly, I’ve seen first-hand how social proof can be leveraged as a powerful tool in the hands of a product designer.

So, what is social proof?

Read more

10/10/2016 - No Comments!

Boosting User Experience Awareness Company-Wide

You’re convinced, some folks within your team are convinced but there’s still a few hold-outs to incorporating user feedback sessions into your product’s development cycle. Over my years as a designer on various software teams, here are some methods I’ve found to be successful in gaining larger buy-in for the UX processes within an agile environment.

In a nutshell I recommend that you clarify any misconceptions of UX testing, iterate in public and then stay consistent with your processes.

Read more

03/24/2016 - No Comments!

Benchmark Usability Testing

Benchmark Usability Testing A baseline strategy for core user flows Paul, an early supporter of my product design mailing list recently reached out to ask me about the specifics of my process & strategy surrounding new features. Simply put, how did I get new feature ideas ranked, validated and built? 

pablo

A fantastic question and one that led to some introspection about my validation process from past projects. What worked and didn’t work? What could I recommend to a fellow product designer to save him time? In short, the answer is to talk with your product’s target users. Then talk with them some more.

Read more

03/17/2016 - No Comments!

Soft + Hard Skills = Professional Designer.

Screen Shot 2016-03-16 at 11.13.40 AM

Tie optional.

The development of each skill set is equally important

Hard Skills

Let’s first discuss the hard skills, as these are the more commonly talked about and taught in the design industry and thus easier to define. I’m defining hard skills are those of a more technical nature. This is what you need to do your job as a digital product designer. These can be learned in both formal training via schooling as well as self-taught through tutorials and dedicated practice.

Read more

03/10/2016 - No Comments!

5 Career Insights from Learning to Snowboard

What a newbie learned by falling down the mountain

Slack for iOS Upload

New friends and first-time snowboarders at the Montues event in Tahoe.

I’ve just returned from the stunning mountains of Tahoe where I was lucky enough to participate in the first ever Epicurrence Montues event. Epicurrence is a design non-conference by Dann Petty aimed at getting creative folks out of their offices and into inspiring situations in nature.

Read more

03/03/2016 - No Comments!

The tools don’t make the designer

pablo

The process distinguishes the designer.

Designers are makers. As tinkerers and craftspeople, we’re always hungry to try out the next and newest tools that enable our work. While this can be a driving force for good and continuous personal improvement, the constant pressure to understand tools can get in the way of the bigger picture.
Read more