Tag: prototyping

Deconstruct + Reconstruct: The Value of Mimicking Reverse Engineering in UI/UX Pedagogy

In order to truly understand how something works, you have to take it apart and put it back together again.

Dave Gottwald
Assistant Professor
University of Idaho

Reverse engineering has long been practiced in lab courses in computer science and high technology development. The concept is rather simple—in order to truly understand how something works, you have to take it apart and put it back together again.

In my introductory course in UI/UX design, students are assigned three projects which mimic a reverse engineering process. For Deconstruction they choose an existing mobile app, propose a conjectured user persona based on their own use, and then document user flows of interactive functionality, using their phones to capture every screen. Organizing these screens into flows facilitates a direct approach in understanding navigation, visual hierarchy, and functionality. In this students attempt to “map” the product and speculate on why certain design directions were taken. For Reconstruction students find an app to redesign. User interface and user experience are considered equally; deficits in both aesthetics and functionality are addressed. At this stage students move beyond speculation and begin to integrate actual research into the development of their product and user personas as they design screens and document user flows.

Finally, the last half of the term is devoted to their own unique app product. Construction builds on the first two projects, yet with a more thorough research and testing phase. Students are tasked with building a live prototype designed with industry-standard software and conduct formal user testing in a group setting. Ideation and development time for this final project is noticeably accelerated, as they’ve already undergone the process twice before. Mimicking a reverse engineering process also provides a detailed structural comprehension of interaction design. By approaching apps from the inside out, students report a greater understanding of their mobile devices as designed content systems, and they are better prepared for more advanced interaction projects.

This research was presented at the Design Incubation Colloquium 6.3: Fordham University on May 16, 2020.

Beyond the Page: InDesign for Rapid UI/UX Prototyping

Dave Gottwald
Assistant Professor
Art + Design
College Of Art And Architecture
University Of Idaho

I was faced with some interesting challenges this past spring when I was asked to revamp our Interaction Design coursework in the Art + Design program at the University of Idaho. I had to bring it up to current industry practice, which was no problem on the syllabi end. Software tools, however—that was going to be tricky. There are currently a handful of applications for UI/UX development that allow for the design of complete interfaces, user flows, and live prototyping. The most popular tool in the industry is a Mac-only product, but more than half our students own PC laptops. Ouch. Industry stalwart Adobe had recently introduced a competing product, but it’s still in beta for PC and Mac, so my university IT department said no go.

In hindsight, forcing me to innovate and leverage a tool which was already supported was actually the best thing the University could have done. What I discovered is that Adobe InDesign has value far beyond the page—the master pages, robust stylesheet support, and typographic finesse actually make it a winner for interaction design work. I was amazed at how quickly my students advanced, and all were UI/UX first-timers. The advantage they all shared was their familiarity with InDesign from prior courses.

Rather than having to teach students new thinking and completely new software within the same course, I could focus on conceptual pedagogy. I had found a hidden virtue; using a familiar tool in a new context, rather than trying to introduce a new tool. I argue that students in my Interaction Design I course experienced an accelerated learning curve—while producing portfolio pieces exhibiting far higher levels of craft—by repurposing software they had already mastered. All quickly developed fully tested, live, mobile app prototypes within a single semester.

This research was presented at the Design Incubation Colloquium 4.1: San Jose State on Saturday, Sept 30, 2017.

Zika and Public Health Guidelines: Prototyping Models for Different Personas

Courtney Marchese
Assistant Professor of Interactive Media + Design
School of Communications
Quinnipiac University

: In graphic design, models are material prototypes that help synthesize research into testable forms. Through experimentation and testing, many rounds of revisions are made to culminate in a visual that can effectively speak to its audience. In an age of infinite information, data visualization, particularly in global health, is a critical arena for accurate and useful visual modeling. For example, the Center for Disease Control (CDC) has Zika Pregnancy Guidelines in the form of a flowchart (Figure A). While it is certainly a necessary model to share with the general public, it is often cumbersome and difficult to understand. Riddled with professional medical terminology, footnotes, and companion charts, the model fails to serve as an accessible form to the information most needed by its audience. In examining the CDC’s guidelines, it is unclear whether they intend to communicate with health professionals or women potentially infected with zika. Rather than using a “one size fits all” approach to the chart, I propose modeling different forms that the information can take as viewed through the lens of different people in different environments and scenarios. Each prototype will take on a persona and emphasize the most important information to a specific audience explaining what to do before, during, and after exposure to zika virus. As such, each persona also serves as a model of sorts to represent an audience segment. By prototyping multiple forms, my goal is to make critical health information engaging and clear to those who need it most. Additionally, these prototypes can serve as a model for other issues within public health communication.

This research was presented at the Design Incubation Colloquium 4.0: SUNY New Paltz on September 9, 2017.