Food Truck App

Step 1: Discovery

I have to understand the problem before I can dive into a design. I then meet with the person that made the request (System Analyst, Product owner, Project manager, ect.) and refine their problem from the users perspective. Empathy is very important in understanding the problem we are trying to solve. We also need to reference the users persona to understand their environment, motives, and pain points. I like to do this process with my team to reiterate a user-centered process.

Step 2: Lo-fi Wireframes

Now that we understand the problem, it takes time to create solutions. Everyone gets a  clean sheet of paper and pen to start generating ideas. When time permits, I try to do with this with the owner of the request and at least one developer. If time is of the essence, I then sketch out some rough workflows in many different ways and get feedback from the same people and if possible, a user. In this case, I will usually make a paper prototype on InVision. I want to make my workflow as clear as possible!

Wireframes

Step 3: Prototyping and Testing

 

Once we have selected the top two work flows,  I will build a higher fidelity wireframe on Adobe XD, Sketch, or Illustrator. I will focus on content placement, layout, and prototyping a workflow using; Adobe XD, Marvel, or InVision. I like testing in this style so the user doesn’t get distracted by general UI issues.

Prototyping

There are circumstances where I like to test in a higher fidelity mock up. A thorough round of testing with my team has to take place first. This way we know of any limitations. It is also best to test with an authentic feeling product when you want to understand the qualitative feedback of the user. It is also a a great way to get buy in from the business.

Mock Ups

Execution 

This is where I prepare proper documentation for the developer. I always supply the style guide and, when necessary, detailed deliverables inside the mock-ups. I make sure they have everything they need to complete their task. When things are ready, I then begin QA.

Pixel Perfect Mockups

Pixel Perfect Mockups

 

 

Basic UI Style Guide

Basic UI Style Guide

Leave a Reply