Inclusive Frame Creation

Seminar Three: Doing with Theory

MacKenzie Cherban
Design Studies in Practice
8 min readDec 8, 2017

--

This endeavor stems from a class assignment at Carnegie Mellon University. As a graduate student in the School of Design, we are encouraged to explore theories, think critically, and apply our learnings through making. I wanted
this project to be an integral part of the design process, one that could be shared, bookmarked, and utilized often. While this project was a roller
coaster in terms of form, from software to card deck to workshop and finally landing on web application, ultimately it’s about helping arm designers and teams with a way to think more inclusively as part of the design process.

Universal, Inclusive, Accessibility, Design for All…

Over the last two years, I’ve become increasingly interested in the role of design and technology when it comes to people with disabilities. I grew up with deaf grandparents, and I watched as they adapted to the world around them. During my career I began to ask myself what role design has in peoples’ lives. Unknowingly, I was interested in the practice of inclusive design. However, it wasn’t until I read the Fast Company article, Microsoft’s Radical Bet On A New Type Of Design Thinking, that I learned of this term. Since then, I’ve been researching more and more in the space surrounding this design topic. And I have seen a variety of terms used—Universal, Inclusive, Accessibility, Design for All—to name a few. While they all aim to include as many users as possible their approaches are slightly different.

Design For One, Extend To Many

Microsoft Design released a set of resources that proved to be a clear definition of inclusive design as well as great building blocks to begin to think of inclusion throughout the design process.

Image Sources: Microsoft Design

Frame Creation

Somewhat tangentially, I was introduced to Kees Dorst’s book, Frame Innovation, in my seminar one course. We looked at his frame creation methods in order to re-frame wicked problems and approach them from a new lens.

Actor-Network Theory

Within frame creation, I noticed the way in which we frame problems, assigning elements as the “what” in the equation above, is similar to Actor-Network Theory (ANT). Actor–Network Theory is an approach that examines the ever shifting network of relationships between society, the natural world, and technology. Keeping in mind both human and nonhuman actors in a complex network.

Inclusive Frame Creation

When first assigned this project, I was eager to try out these three theories/approaches/design methods. While the inclusive design materials from Microsoft are rather clear, the card deck can be a bit cumbersome and overwhelming. I used them at my internship over the summer and there were some difficulties in using them, though they seem to be sequentially based, they can be used out of order and in many different combinations with each other. They place a lot of load on the user. I also felt, that they worked best in a workshop style, group setting. This is one of my critiques of many card desk/canvas/brainstorm/group style workshops, it can be difficult translating that into a more individual practice. This was one of my main motivations, creating something that could extend beyond a group workshop, that could be bookmarked and integrated more into the design process—of the individual and the team.

Round One:

I always wanted it to be a software/web application of some kind. However, I went through several rounds of iteration of form. I began with some rough wireframes that follow the formula from Dorst of the what, how, and outcome. This presentation was rough, and left some people curious as to how it actually worked. So I went to town on some paper iterations, from the suggestion of peers and the instructor, perhaps starting analog and walking through the steps would help in clarifying the wireframes.

First presentation, using the formula from Dorst and the network of ANT
Doing some early tests with Ruby to identify parts of speech in a sentence

Round Two:

My first round, an attempt at a more traditional workshop style format, is pictured below. This version never made it to the testing phase, I realized in talking with my peers, and walking them through the several canvas and booklet iterations, that this was even more complex. Honestly, I think you’ll agree when you read some of the language. It also didn’t allow for me to bring in the more iterative, multi-use functionality I wanted out of a tool. So I went towards a third form to explore. Cards and booklet that folds out.

Round Three:

After an excellent class with Stuart Candy, I started to think more about the idea of cards. The great thing about cards, is that the participant isn’t tied to one possibility, they provide the freedom to be moved around and combined. However, as I began to map out my content and build another paper prototype, I received feedback that only confirmed the small voice in my head…this can’t really be that iterative. Once a participant fills out the book, it’s essentially useless, apart from the few paragraphs explaining the theory. So I reconsidered my form, and went back to the original ideas.

Pages folded out so that you can place cards and ideate all in one place.

Round Four:

I returned to my original thoughts surrounding a software/web application. I drew inspirations from Loopy and InVision. Loopy for it’s ability to create these dynamic networks of nodes, and InVision for it’s project based prototyping tool, particularly it’s shared nature. These online tools for quick, dynamic, iterative experimentation were some of the precedents I felt were most in line with how I would combine these three theories.

Images Source : Loopy & Dribbble

How it works:

A dynamic tool that can react to choices made, save iterations, and provide a thoughtful start to any project. The tool is meant to work both with an individual and team. Users are able to create profiles and store multiple projects, with each new project they can choose at what stage the begin. For example, if they have a scenario, a journey flow, a brief, a research questions. Starting to match up what they have an thinking critically about the elements (ANT’s Actors) that are involved. They can draw connections between the elements and begin to make a relationship network. This is crucial in see how a more inclusive swaps effects the connected elements.

I walked through a paper prototype with a designer, taking them through the most crucial flow—starting a project, entering a scenario, adding elements, and exploring the inclusive lens feature.

When highlighted–you’ve included actionable suggestions, this was really helpful. Especially for someone not familiar with what to do after you’ve made a limitation swap.

I was particularly interesting in one statement made when walking through the experience. When going through the inclusive lens, the participant looked at the limitation swapping and took a moment to look at how each limitation would produce a more challenging approach to the scenario.

“I don’t know how challenging I want to make this.”

Rough Wire Frames

UI Version One

Taking a stab and putting together a working prototype through Adobe XD (video below). I’d like to iterate more on both the paper prototype and digital prototype to work out some details, in particular how to showcase the changes to the relationships in the inclusive lens mode.

Closing Thoughts:

I’d like to see this built out even further, taking into account the dynamically shifting scenario, the inclusive suggestion pop-ups, and how to highlight the changes to relationships as you start to assign new parameters to the elements.

I think this tool can also evolve to highlight user/company/design values, accessibility (in terms of access to tech/wealth/location), and diversity. I’m excited at the start of where this is, it came from a roller coaster of form explorations, but ultimately I was able to follow my gut and produce something that I’m not only proud of, but something I would like to explore further.

--

--