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.
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.
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.
After remediations, I now add in any micro interactions, roll-overs, etc to the wire-frame, creating a Prototype.
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.
Micro Interaction – Accordion Expansion
Micro Interaction – Overlay & Roll-Overs