The Process
Discovery and Object Mapping
“Discovery” is such a wonderful name for this initial stage of the UX process. I become an adventurous explorer, curious and philosophical. It’s a process of learning, from requirements-gathering to user research to analyzing the problems to be solved.
I use Object-Oriented UX, or object mapping, as an exercise with the project team (including stakeholders if they’re able) to break down the the particular objects in an app or website and organize their elements holistically. The benefit is massive, as it consolidates so much of the later-stage work by identifying the attributes, artifacts, and the relationships that objects share with each other. The resulting object map not only benefits design, but also content, strategy, and development.
UX Sketching
Once the object map has been established I start sketching. This pulls me away from “drag-and-drop brain” and engages my creativity in the purest sense.
Along with initial sketches I start to storyboard ideas for structure, hierarchy, and interaction. In addition to my iPad I use a sticky-pad with smartphone frames and a dot grid that allows me to quickly create user-flows with a tactile element.
Depending on the project and timeframe, I also might take the time to refine my drawings by adding shading and colour with greyscale markers, advancing them as a lo-fi wireframe.
Wireframes
Wireframes are a critical part of the process. Similar to object mapping, it’s a step that helps establish “what’s the what” in a way that maintains flexibility among still-malleable ideas while establishing visual hierarchy.
I created my own wireframe component library using Figma, which allows for quick iterations using drag-and-drop.
Visual Design
Once the layout is agreed upon and approved, I start building the mockups, getting the final visuals as close to the final product as possible. I’ll create or source icons, plug in content and imagery, and make sure that every hair is in place for final approval.
Depending on resources available, I may or may not also build a prototype at this stage. I’ve used a number of tools, from Marvel to Ionic to Adobe XD to InVision.
Dev Handoff and Beyond
I work closely with my developer partners to breathe life to the designs I work on, and the developer handoff is one of the most critical parts of the software life cycle.
Though I’m not a developer by any means, I have many years of experience writing HTML and CSS for emails and web pages, so I have a unique understanding of exactly how a design translates to a finished web product and leverage that to make the developer handoff smooth and efficient.
Tools like Zeplin and Anima help translate design elements into assets that easily fit into the framework built by the devs. We then test, iterate, re-test, and re-iterate, until the final product matches the client needs and requirements exactly.