This is my (Liz’s) website.
I work at Airbnb on the design systems team and specialize in prototyping.
I am currently getting my Master’s in Design Engineering from Harvard focusing on computational design.
I do research at the Laboratory for Values in the Built Environment.
I also
hold a BA in Clinical Psychology from UC Berkeley.
If you have any questions, want to work together, or otherwise have complaints, email here.
LinkedIn
CV
❸ Spatial model
Context
As digital products become more and more complex, I believe that they necessitate a level of understanding that can be derived from the physical world. For a basic understanding of this idea, here are a couple of examples:
① Objects that exist within other objects: a box full of packing peanuts.
② Objects that are revealed only after finishing or beginning an action: opening a drawer to grab a fork.
In a digital product, this idea of objects is seen in sheets that appear and allow a user to select new actions or trays that come up from the bottom of the screen to reveal more information. With all of these new modes of interaction and no real guidelines around them, there was a clear need to simplify the layering in our product.
In this project, I led the ideation and prototyping, wrote the documentation, and worked with one other designer to publish the documentation.
Research
Given how our specific design organization works, I realized that the best way to lay out our documentation was to provide guidance rather than strict rules. This would allow designers to feel unconstrained and thus more capable of leveraging the guidelines.
Exploration
A large part of exploration was doing research. There aren’t many systems that touch upon spatial models with the depth that Google Material and the Apple HIG do. These two resources allowed me to start piecing together the problems that we were having as an organization and as a design system. For the most part, I noted that we were struggling with the density of our content and losing context of where the user is within a flow. Out of the two problems, I chose to focus on preserving context.
A diagram derived from an existing flow, showcasing the amount of layers that a user needs to go through to get to their destination
Layering system
The layering system that I proposed in the end sought to have a limited number of levels. This preserves context (the user’s current location in the flow as well as their previous locations) and allows users to reduce cognitive load. Without having to remember every entry point that they have come from, users are now able to focus on the task at hand, and if they want to exit the current task, they are able to without feeling like they landed on a screen that they do not remember.
A diagram derived from the flow above, showcasing the reduction of layers through usage of the Content Window.
Content window
The Content Window is an idea based off of, once again, the physical world. In this model of thinking, the device bezel acts like a window, showing the user only what is immediately in front of them, but blocking the view of all the content that extends around the screen. It only allows one to see what the window shows. However, just because the window does not show everything does not mean that the content stops existing, just like in the physical world.
By restructuring a flow into a single layer, flows are now sequentially horizontal. A user can move forward or backward. We can also reveal more information if we move vertically. To move to another layer, we need to take some sort of action, such as pressing a button or pulling a sheet up.