Design at Josef

Design at Josef is organised like a tiny government that obeys to our Design Legal System, as defined the Acts you can find in this page. Our laws are designed to ultimately benefit our users and teammates.

The whole legal system is based on the following guiding principles.

Principles

Accessibility

Everything is Josef must be accessible by default.

Beauty

All Josef products are crafted to be consistently slick.

Care

Every Josef design has been thought through thoroughly.

Documentation

Documentation is instrumental to ensure that the system is scalable.

Empowerment

Design is a team sport and it is our role to empower everyone in the company to play.

Team structure & Acts

Unlike in real countries, where the role of the government is to govern people and it is of fundamental importance to do so as a democracy, our design team governs mostly files and processes, and it's structured more like an oligarchy. This means that there is only a small group of people that ultimately makes certain decisions (see separation of powers in 📒The Constitution Act 2021 ).

This is because, as at Josef we are all very kind humans, it can be easy to get bogged into decisions where there is a disagreement on something (especially something as subjective as design can sometimes be) and end up making decisions by committee. That's not good.

Following is the collection of Design Acts that defines how the team operates, and how decisions are made. If you have any feedbacks on how to improve them don't hesitate to comment directly on them.

Files structure

The best way to get comfortable with our files is to just open them up and take a look around. However, here's an overview of the thinking behind them and how they work.

Figma structure

Our Figma repository is structured as follows:

• Folder
  What's in the folder

• Design system

  Here's where the Constitution and the Federal Acts are contained (more about types of Acts below).

• Product

  Here's all product related State Acts, Open cases, and Archived cases.

• Marketing

  Here's all marketing related State Acts, Open cases, and Archived cases.

• CX & Sales

  Here's all the collaterals for those teams.

• Whiteboards

  Here's all the FigJam files - keep them separate from the rest of the world

• Figma bugs reports

  Here's a bunch of files to report bugs to Figma

• People & culture

  Here's a bunch of files to support up-keeping our awesome culture (like bday e-cards for example)

📒 Constitution Act 2021

The Constitution library is automatically added in every new Figma file. It contains elements specified in 📒The Constitution Act 2021

📕 Federal Acts

Federal Acts are large pieces of work that define how to apply the Constitution to fundamental UI elements such as:

• Using colour

• Using typography

• Buttons

• Form fields

• Spacing

• Grid systems

📗 State Acts

States Acts are even larger pieces of work that define how to use the elements defined in the Federal Acts for larger patterns.

For example the 📗 Dashboard Act contains all the elements that constitute the complete UI. Each and every tab of the Dashboard is in there!

📘 Local Acts

Local Acts are just another layer of bureaucracy that is not yet in use but might be handy to have in a couple of years at the next growth level.

📓 Sketches

Sketches are just ideas or thoughts that don't need to evolve into Acts or Archived cases. Use You can use Sketches to start out a side project.

📖 Open cases

Open cases are effectively files that are either forever ongoing, or

🗄 Archived cases

Archived cases are all those Open cases that have been developed, and where the component part of the files have been merged into the appropriate Acts (be it Federal, State, or Local).

Exceptions

❄️ Freezer

The ❄️Freezer is a special page and the only non-Act one in the whole system. Somewhat unsurprisingly, the freezer contains all those items that have been worked on but for some reason didn’t make it to production.

Creating & editing Acts

Creating a new file

Open cases

Ensure a new Open case file includes at least the following 3 pages:

• Design
  • Include all the designs, whether work in progress or not
  • Each design piece should make good use of the Documentation components so that we can keep track of where the file is at

• ——————
  • Includes nothing. It's a separator page

• About this file
  • Includes Thumbnail and basic info about that file

Sketches

Sketches are thought to be completely flexible, so do what you wish with these files. No constraints!

Template files

If you are starting a new project and you know you'll be working on, say, the Dashboard as opposed to the Document Editor, there are some files ready for you to pickup, already containing the basic Libraries and page structure you might need.

Editing Acts

Turning an Open case into an Act

Whenever an Open case is Archived, we should ensure that the components that were contained in there are transferred in the proper Acts.

For example, if you finished a project and modified the sidebar in the Dashboard (say, by adding a new tab) you should ensure to make those updates in the Dashboard Act when finished.

Editing The Constitution

Editing the constitution is defined in 📒The Constitution Act 2021

Editing a Federal Act

Editing Federal Acts should be done mindfully as if we make changes in those, those changes will propagate to a zillion files, as well as will need to be transferred in product.

Philosophically, we want to try to keep changes in Federal Acts at a minimum, unless of course it makes sense to do them!

Editing a State Act

State Acts are more flexibly editable. In fact, if you are not editing a State Act often, it probably means you are not changing anything from an Open case, which would be surprising.

Editing a Local Act