My Process

Step #1

Discovery! My job during Step #1 is to be very quiet, listen, and take notes. I like to hear it all, the good, the bad, the relevant, the not-so-much… Pain Points, Blockers, Visions, and Dreams. All of this information helps guide me to to the second step.

Step #2

Create a Requirements Document based off of conversations, notes, exchanged fonts, files, images, PDF’s, logos, etc. This helps me create the initial wire-frame mock-up.

Step #3

This step involves Wire-framing and Adobe XD. A stripped down mock-up is created to determine IA, composition, placement of copy, images, videos, graphics, CTA’s, etc.

Step #4

After remediations, I now add in any micro interactions, roll-overs, etc to the wire-frame, creating a Prototype.

Step #5

Now a High Fidelity mock-up is created! Final copy and images are placed inside this design. After remediations, the mock-up is then sent over to Dev for production or I will build the page myself using HTML/CSS.


Work Examples

Micro Interaction – Accordion Expansion

CRS – Prototype – MEAL Project
CRS – XD File (Presentation Mode) – MEAL Project

Micro Interaction – Overlay & Roll-Overs

CRS – Prototype – Overlay Project
CRS – XD File (Presentation Mode) – Overlay Project