Throughline Figma Structure

Senior UX Strategist at Throughline

January 2022–March 2022

UI/UX Design

Information Architecture

UX Strategy

Context

This project was started to solve some issues and hiccups in a few previous projects, all centering around team execution, easier delivery to the client and/or development, and design documentation. Through many informal talks with team members and other parts of the company, I developed an entire template for designers and strategists to replicate within their own projects.

With this I hoped to solve these main issues:

• Better organization of frames.
• Clearer depiction of user flows between frames.
• Easier documentation of interactions.
• Better archiving of designs and materials.

Research

Screenshot of a title and description of a figma frame

This idea started from a need to organize frames in a neater way. I was beginning work on a project and it was difficult for someone to understand what pages where supposed to do what and at what stage they were in. This was a persistent issue across projects in the past, so I developed a simple component to note the progress of a frame. I brought the idea to some coworkers and they gave me feedback to have a bit more granularity to the labels.

Building Out

A UX process as it relates to the Throughline figma structure

After getting a lot of great feedback, I started to take this idea further, building out a template file to document any changes I made as I used the basic system. I added in project detail areas, user flow diagrams, an area for documentation, and an organized archive of old designs. In addition I added more details on how I intend the system to be used within the template. Everything was put in neat component groupings for easy swapping and the least amount of resistance while working on a project.

Once I had a stable set of pages with guiding information, I handed it over to my colleagues to use and test. During this testing, I also asked specific roles to give some guided feedback to improve some sections I thought were particularly lacking or had gaps. I also did my own testing, using certain parts for parts of ongoing projects. This led to improvements in areas that I didn't originally think of.

Usable Product

Screenshot of a figma window showing a starting point

Once it was put into heavier use, I integrated feedback from my colleagues as well as improved the overall visual style. In it's use, it has already proven successful in the goals that I set out to achieve. I intend that this will be continually improved, components and details honed to make it as useful as possible and allowing for easier collaboration within design teams in the company, as well has a historical look at a project to start a case study with.