The Design Process

Ever tried to use the subway?

New York City subway map

Design Process

The New York subway system is a good analogy for my design process. With significant thought, luck, mistakes, experiments and some patience for the mentally unstable subway patrons (aka clients/users) you can get to where you’re going.

Reason For Traveling: Research

No trip can happen without proper research first. This step is the most important, even beyond deliverables. While it is possible to reach a conclusion without research, it won’t make any sense. You'll probably end up in Jersey.

It begins with an exhaustive series of questions and studies of human behavior to get at the most compelling needs for the subway riders.

Passengers: Users

  • What types of people are going to be riding the subway?
  • What are their main goals when using this system? Why?
  • Are they looking for a scenic route to their destination, or are they content to take the tunnel?
  • Why do users use the subway as opposed to other types of transportation?
  • Are they traveling one way? Round-trip?
  • Are they carrying any luggage?
  • Is the current system effective? Does it match how they imagined using the subway?
  • What is their previous experience using the subway?
  • What motivates the passengers?

Limitations: Evaluating Constraints

  • How large do the seats need to be?
  • How tall should we make the handrails?
  • How many tickets do we need to sell to maintain the infrastructure?
  • Is the subway handicap accessible? Is it adaptable for patrons (or screens) of all shapes and sizes? The answer to this question should always be yes by the way
  • How much fare can our patrons afford? What is reasonable? Is there a way to streamline payment method?
  • How many people can one subway train carry? Is it significantly more or less than the demand?

Comparing Other Transit: Applications and Websites

  • Is this system more/less effective than another city’s transit system?
  • Why do people choose subway over other methods?
  • What makes this platform stand out?
  • How has this system evolved over time?
  • How can we practically re-design this system and have it be open to change in the future?

Meeting City Planner’s Expectations: Stakeholder Understanding

Now, in order to have a truly effective implementation, as a designer one must understand the user’s perspective AND the stakeholder’s perspective. If there are discrepancies between the two, those need to be addressed and reconciled before any meaningful work can take place. Otherwise you might as well throw your wireframes in the garbage next to your fancy design degree. This is a comic strip that demonstrates the distance between client needs to user needs expertly:

No one teaches you this, but managing expectations is one of the more important skills you can have as a designer, and probably as a human in general.

Day Dream: Brainstorm/Sketch

This is where your perfect world exists. In a perfect world the subway picks you up from your front door at the exact time you need it and takes you on a scenic, ocean view trip that takes you to your destination without making any other stops. Oh and there are caramel-lattes provided on the train. Also you’re sitting next to Brad Pitt or Rachel McAdams (I’m told that men find her exquisite.) Also everything is free.

This part may sound silly, but imagining the perfect scenario with no limitations can help inform design and can give you clues on how to make the experience a better one.

Map Your Route: Wireframe/Sticky Notes

This is where you create mental and physical maps that will inform how the system is structured for ease in use. This should include a lot of information architecture planning, hierarchy and navigational considerations, a practical flow or walk-thru process that the user takes to get their destination. Ugly wireframes are far more useful than any Photoshop composition.

From here you need to decide on the type of interface you’re using:

For our subway example we might need to examine task-based interfaces, like a dashboard or a wizard, or an advanced search interface. The most important thing to remember about the subway (or any website or application) is that it is essential that the user know their location and how to proceed next.

Investigate Your Surroundings: Hi-Fidelity Mock-Up

By now our design is starting to take shape. What does the inside of the subway car look like? What will our map look like to inform users where to go? What colors can we use to follow function? Have we appropriately styled primary and secondary action buttons?

Go nuts! Rationality is for engineers and developers duh.

Just kidding. If you can't make a coded prototype, or you don't have the time, there are plenty of programs you can use that can give a realistic experience of an application before you release your product into the wild.

Usually I design with a given framework in mind (limitations of html/css or something like bootstrap) so it will save me time when it comes down to coding.

Take A Ride: Test/Evaluate

So now you have a semi-working model for how you expect the system to work. Go through the process of what you think your users will do. Better yet, test some folks who have never ridden the subway (or used your application) and see if it makes sense to them.

Don’t have a budget for or time for testing? Stakeholders don't see the point in usability studies? Hopefully that is not the case. If it is, grab some co-workers, grab some student workers, grab your boyfriend, grab your parents, grab your children, grab your dog and see how they manage the subway.

Don’t understand how a metro-card works? Not sure where the train is going? Turned off by subway rats that match the size and ferocity of honey badgers? These are helpful insights that you can discover when you ask other people that the designer might not notice.

Take A Different Ride: Redesign

No design is perfect. This is the time to re-evaluate your system. Change positions and styling of links, eliminate extraneous elements and content. Make sure things are semantic in the visual and coded hierarchy. Follow best cognitive and visual practices for user experience design. Does this system leverage the inherent strengths of the platform, and expectations of the user?

I could spend forever on this step, but at some point you have to deem your design “good-enough” and release it into the wild. I like to make sure that I am set up to allow for future changes and tweaks, because you can always anticipate that down the road, er track I mean.

After all the hard part is not reaching Flatbush Ave, Brooklyn, it is planning your route to get there.

Process Photos

wireframe sketches
user story mapping
client timelines
information architecture
project failure vs. project annoyances
evolution of web design