Ideation

Low-Fidelity Wireflows

Problem: Using reference material from research I conducted previously, rapid initial sketches of common functions of a mobile reminder app were requested, along with initial concepts for screen layout.

Approach: We were explicitly directed to provide pencil sketches at this stage. Having no stencils or tools (or even graph paper), I freehand sketched my initial wireflows. Annotation was added using Adobe Illustrator. The workflow was based on a principle of providing the user flexibility as simply as possible.

Results: I'll be the first to admit I am not strong at freehand sketching. However, I was able to produce a sketch sufficient to clearly communicate my initial concept, with annotations explaining elements not clearly obvious from the wireframes themselves.

Lessons Learned: I tend to rely heavily on digital tools for even rapid low-fi wireframing. This project pushed me outside my comfort zone, helped me recognize that digital is not always ideal or even an option, and encouraged me to start brushing up on my freehand. It also encouraged me to purchase some template stencils for common UX elements, which I used on subsequent projects. However, I selected this sample for my portfolio, to more clearly show the evolution from initial sketch to final high-fidelity wireflow through several iterations.

Medium-Fidelity Wireflows

Problem: Initial low-fi concepts were presented, and feedback received. This feedback to be considered in a subsequent iteration, and presented in medium-fi digital format.

Approach: I took feedback provided on my initial sketches, created a digital template in Adobe Illustrator, and applied suggestions to modify the initial concept. Among these were eliminating screens that were not needed for the given task, and simplifying the final screen.

Results: The resulting medium-fi wireflow also provided simplified annotations, primarily demonstrating the ability for users to still have a voice option if they accidentally entered text mode.

Lessons Learned: I was able to much more rapidly produce digital wireflows referencing the initial sketches, and I believe it was easier to consider and apply changes during this transition than it would have been if the low-fi wireflow had also been digital.

High-Fidelity Wireflows

Problem: Following an additional round of feedback, a new iteration was conducted, and we were required to provide high-fidelity wireflows as a final artifact.

Approach: Further suggestions for some minor interface changes were applied, and additional visual polish was added.

Results: For this iteration, we were advised to avoid use of color, as stakeholders may frequently hone in on color adjustments rather than consider overall design during this stage. The submitted wireflow was in grayscale with no background, with shading used to signify primary actions, selected or completed items, etc. However, for the portfolio sample, I did add some basic color, not intended to be final precise colors in the design, but to increase visual impact and demonstrate where color choices would be key. I also built the cell phone model myself entirely in Adobe Illustrator.

Lessons Learned: The most memorable aspect of the high-fidelity iteration was the recommendation to avoid adding color until actual UX decisions are largely complete, as color tends to draw a disproportionate amount of attention from stakeholders. This is something I have carefully considered on every project since.