Part 1: Who is the user?

Interviews

We conducted a set of 9 interviews with professional and hobbyist layout designers. We were looking for major pain points and breakdowns in the creative flow. We were looking for specific stories.

Here is the list of the most interesting findings:

• It's hard to properly align elements on the page. Sometimes our interviewees would simply resort to eyeballing it.
• The user interface is cluttered. A participant compared Adobe InDesign and Affinity Publisher to UI interface design tools like Figma or Sketch. According to them, those tools had a better sense of what to show and what to hide UI elements.
• Looking for a feature, our interviewees always Googled a solution, and never used the guides and the help provided by the tool.
• Most of the interviewees had trouble organizing their files. They mentioned resorting to naming files as "final.indd", "really_finall.indd", "OK_REALLY_FINAL_NOW.indd", etc.
• The interviewees also mentioned not being able to experiment with different alternatives. They would often duplicate elements, slightly modify them, and keep the version that looked better deleting the other one.

Personas

John

, 24

• A design student
• Works as a freelancer as a layout designer in spare time

Mary

, 36

• Runs a design agency
• Focuses on advertising products (flyers, billboards)

Leonard

, 27

• Intern at Mary's agency
• Worked with print in a print studio
• Recently switched to digital layout design

User Profile

A professional layout designer working in a team. During their workflow, they need to handle multiple file versions, and duplicates of pages with small alterations. Their team members are not always at the office at the same time. Some team members might have to take pauses between working on a specific project, and work with a different client. They might have created conventions for naming the different versions of files or might have developed workarounds using cloud drives.

Part 2: What is Possible?

Design Problem

Most of our interviewees had trouble testing out different variations of their designs. They would either duplicate a page and then create a version with a slight variation, or they would create a completely new document where they would test out their idea. The team decided to focus on that issue because it seemed an interesting problem to solve.

The video below demonstrates the described process on a simple graphical element.

Brainstorming

We did two types of brainstorming—standard and video. First, we just wrote down every idea we had. Then we voted on the ideas we were the most interested in.

Finally, we took some of the ideas from the standard brainstorming session and tried to quickly come up with different interaction techniques using video. Video brainstorming helped us explore what is possible, and give us an idea of what the interaction could look like.

Part 3: What Should it be?

Design Space

We tried to extract the main dimensions of the ideas we had. Some ideas allowed the users to customize their experience more, some made the system more accessible, some were represented with hardware, some with software. We extracted the dimensions into design space and tried to push each idea into a different direction of a dimension. Doing we had an "a-ha" moment.

Design Concept

What would happen if we could have different versions of not only the document but of any element that changes during the design process? What if you can check out a different version of a logo, of a swatch palette, or a master page layout?

Therefore, our design concept is:

Future Scenario & Storyboard

To help us imagine how our concept would work in a real-life environment, we imagined a future scenario where layout designers use our tool in their work. Our three personas worked on the same project and designed using our tool. From the scenario, we drew up a storyboard and shot a video prototype.

Part 4: Does it Work?

Design Walkthrough

We sat down with a team of peers and showed them our work. We analyzed each interaction trying to make the tool more versatile and intuitive.

Some of us were familiar with versioning tools such as Git. We often fell into a trap of mentioning metaphors and concepts inspired by those tools and had to actively fight to think outside the box.

Conclusion & Improvements

The tool we developed doesn't focus on collaboration, but on individual exploration, and organization of a project. We would love to further explore the ways the tool can be modified to help teams of designers work on the same project.

We would love to further explore permission systems, and allow different stakeholders to modify the elements they are in charge of, without interfering with the work of designers.

Versioning is complicated, and no versioning system is perfect. We found the existing tools, such as the aforementioned Git, extremely unintuitive for newcomers. Moreover, git works well with code, which is mostly text, but layout design is so much more than just text. Therefore, we wanted to develop a tool that has a gentle learning curve and is inherently visual.