Process

PROBLEM

It all starts with a problem you’re trying to solve. Maybe that problem revolves around a less than desirable eCommerce experience. Or maybe you have great idea for an app but you don’t know where to begin. In order to find a solution, we must first understand the problem.

I constantly ask myself the same question when I’m designing, “What exactly is the problem we’re trying to solve and why?” It’s amazing how easy it is to forgot this core question when you’re bogged down in details.

In order to keep this problem in the forefront of my mind I write it down in my sketchbook. I write everything down. Somehow my brain is wired to remember details this way. My Sketchbook of choice is a soft cover dotted, Moleskine classic notebook. It is, by far, the best for the way I work.

DISCOVERY MODE

Once I understand the problem, I shift into discovery mode - researching inspiration and analyzing competitors. I ask myself, "Is anyone else doing this?" and "How did they approach this problem?"

I explore platforms like Dribbble, Behance, and Pinterest, curating design collections for reference. Inspiration can come from small details, like mixed stroke weights in an icon, or larger elements, like color and typography choices. When solving a design problem, solutions appear everywhere, so I make it a priority to capture every idea, big or small.

Screen Shot 2021-01-07 at 2.02.15 PM.png

Screen Shot 2021-01-07 at 2.02.29 PM.png

Screen Shot 2021-01-07 at 2.02.37 PM.png

Screen Shot 2021-01-07 at 2.03.33 PM.png

Screen Shot 2021-01-07 at 2.04.38 PM.png

Screen Shot 2021-01-07 at 2.06.13 PM.png

WIREFRAMING

Once I’ve got a solid foundation of inspiration, I dive into wireframing. It usually starts in my sketchbook before moving into Figma. I’ve used tools like Balsamiq and InVision in the past, but these days, I work faster in Figma with my wireframing component kit. This lets me create higher-fidelity compositions that fit seamlessly into my workflow.

Screen Shot 2021-01-07 at 2.39.06 PM.png

Screen Shot 2021-01-07 at 3.26.19 PM.png

PROTOTYPING

Once the wireframes are finalized, I move into prototyping within Figma or Principal - experimenting with color palettes, element placement, and typography. If wireframes lay the foundation, prototypes bring the experience to life by organizing and refining interactions.

I try to move quickly during this phase because it’s easy to get caught up in small details and lose sight of the bigger problem we’re solving. A trick I picked up from James Draplin is duplicating artboards as I build—this not only helps me track my own thought process but also makes it easier for others to follow along when giving feedback.

Screen Shot 2021-01-07 at 2.44.48 PM.png

Screen Shot 2021-01-07 at 2.42.50 PM.png

Screen Shot 2021-01-07 at 3.29.16 PM.png

Screen Shot 2021-01-07 at 3.31.05 PM.png

Screen Shot 2021-01-07 at 4.31.58 PM.png

FEEDBACK, ITERATE, POLISH, REPEAT.

The final step in my design process is gathering feedback from stakeholders, then iterating, polishing, and repeating.

Developers jokingly call this “pushing pixels,” but I rather enjoy this stage. At this point, you’re so close to launching - refining and polishing the details before your solution goes live.

It feels like presentation day. You’re standing behind the curtain, moments away from unveiling your work to the world. It’s an exciting moment because, for better or worse, users will finally get to take your solution for a spin.