Deconstruction Diagram Project
(Fall 2020)
Problem
Pick an object with at least seven parts, take that object apart, and make a diagram that shows all of the parts and explains how one would put the object back together with no text. The project will be shown on a mobile screen so I need to consider how the small format will affect my design: I will have to be economical with the available screen area and will have to make thoughtful decisions about the scale of the detail. I also need to consider the capabilities of a screen such as motion and interaction.
Solution
I designed the deconstruction diagram with a clear hierarchy, a well-defined start and endpoint, and a clear, linear narrative. Using Figma as the platform allowed me to create multiple interesting interactions within the pages.
Inspired by my IKEA armchair, I hand-drawn my initial thoughts with color codes. Later I transferred the diagrams into digital format as shown on the right.
In the final version, I also rearranged the way of how the chair parts exploded. Instead of separating the parts as a "parts sheet", I decided to keep everything within a reasonable distance of their exact position to show where they belonged in the assembly of the chair. Adding 4 more joints' detail gives the users a clear idea of how to put the parts together.
.jpg)
In the final version of my prototype, I created three frames showing the chair in three forms: with the cushion, assembled, and exploded. I also used different icons to guide the user through the narrative. Based on classmates' reviews, I improved the small buttons on the third frame from a simple "+" symbol to numbers in order to show the exact steps of how the joints should be put together.