February 5, 2019
Code & Design
This design process series covers the exact design process we use every day at SetDev.io. It’s a culmination of a six-year journey, bootstrapping a software engineering consulting agency as the sole designer. All deliverables discussed are attached as Sketch files for your convenience.
At this point in the game, through Module I & Module II in this series, we’ve now coalesced a common goal among stakeholders & painted a portrait of our perfect customer. With previous deliverables as reference points, the overarching goal of Module III is to map our product out by carefully accounting for every single possible user action & accompanying view.
This module serves as the final pit-stop before diving head-first into actual product mock ups — it’s our figurative way of crossing our T’s & dotting our I’s to minimize the number of overlooked actions or views later on. Consistent feedback throughout this module from prospective customers, teammates or stakeholders isn’t explicitly required for completion, but it’s highly recommended for accuracy. Attention to detail is the name of the game as overlooked views lead to severely disjointed feedback — very few things drain you as a designer like hearing “oh where is screen X?” or “I thought we were going with screen Y?” mid-way through mock ups. Like the previous two modules, the bulk majority of this module boils down to two deliverables:
Maintaining chronological order is particularly important since each finalized deliverable flows directly into the following one. The qualitative story from our User Persona (from Module II) drives the creation of the User Journey Map; while the end result of the User Journey Map, the core user experience known as the Red Route, acts as the foundation for the rest of the UX Wireframe. We’re essentially mapping the app out twice — once from the users perspective & once from a technical perspective.
User Journey Maps are user-focused behavioral & psychological analysis of our ideal customer as they walk-through the red route, the most critical path in our future app. Starting from the User Persona story in Module II (seen in the top-right of the example below), this deliverable is essentially a continuation of the descriptive story with our ideal perfect customer. The main exercise here is to write out, step-by-step, the feelings, thoughts & opportunities presented as our ideal customer moves through our app to accomplish his or her main goal:
Remember, we’re running an experiment here which means we need to simplify, simplify, & simplify. Design a product with the intention of solving a single, core issue for your potential customer & carefully map that solution out. If you can do this right, you’re already miles ahead of most designers.
The template above hopefully highlights why consistent feedback from multiple people is preferred — the point of the exercise is to place yourself in the shoes of your ideal customer. It’s too easy to subconsciously leak your own biases (thoughts & feelings). Asking feedback from multiple parties, is a great way to counter this effect & stay on-track: focused on the needs & wants of the fictional user persona.
By mapping out the Red Route, we’ve now provided ourselves with the perfect jump-off point for the next deliverable: UX Wireframes. UX wireframes are developer-focused, basic shapes & arrows diagrams that outline all possible user interactions. While the previous deliverable carefully analyzed the most important user path, this deliverable focuses on catching every supplementary user path. Don’t overthink it here — simply start by mapping together the screens for the red route.
The goal here is map the product out in it’s entirety. From views, to subviews, to overlays & user actions, the UX Wireframe(s) serves as the final giant checklist prior to revving up our mockup engine. This time around, however, we’re be best off asking for feedback from engineers as opposed to prospective users. Engineers here provide phenomenal support as they may hold insight into OS-level UX language & constraints that might otherwise go unnoticed. Don’t rush through this exercise — take the time required to identify all possible user paths & edge-cases.
We now have an inkling of what our final app may look like — what an exciting time! Through the User Journey Map, we analyzed the most critical user path; while through the UX Wireframe, we carefully considered every user action. With two more deliverables under our belt, we’ve now (hopefully) successfully mapped out what we’ll be mocking up.
Take note, this is now a total of six deliverables prior to diving into the most discussed phase of any design process. We’ve armed ourselves with a serious arsenal of documentation. While it may seem overbearing, it’s guaranteed that by preparing yourself, your stakeholders, & your teammates to this degree, you’ll have circumvented the usual frustrations & frictions that pop up during the fourth & penultimate module. Onwards & upwards as we finally kick off the most exciting module of all: the Design Module!
sources
