00 Mattia Fregola
Welcome to Josef

Josef Legal

Welcome to Josef

A gentle entry point and documentation layer for the Josef product experience.

01

Overview

Intro

Here’s the wiki page I created to onboard my new team members, taking them through how all design things worked at Josef.

Table of contents

Process-wise, you’ll find that Josef is significantly more mature than you’d expect for a startup. This is because every time something new happens, the team is very proactive about thinking and formalising the best way to that new thing.

I am sure that Avina will take you through all of it, but I think it might be useful to give you a short overview of the core processes as far as design goes.

Structure

💁

Here’s the wiki page I created to onboard my new team members, taking them through how all design things worked at Josef.

Tools & processes

Tools checklist

👋
Before to dive in make sure you have access to the following tools, AND that you have been through a product overview.
  • Notion
  • Clickup
  • Figma
  • Logrocket
  • Google Drive
    • Request access to icons shared folder | Link
  • Metroretro
  • Slack channels to join
    • design
    • design feed | If you change anything in Clickup, this channel will get pinged
    • bug
    • internal-usability-testing
    • it-support
    • product
    • product-team pvt
    • release-planning
    • support
    • wellbeing

Processes

Process-wise, you’ll find that Josef is significantly more mature than you’d expect for a startup. This is because every time something new happens, the team is very proactive about thinking and formalising the best way to that new thing.

I am sure that Avina will take you through all of it, but I think it might be useful to give you a short overview of the core processes as far as design goes.

Notion

Notion

Useful Notion pages

  • Removed PII | This is where you’ll find all things design at a high level
  • Removed PII | Here’s all things product
    • Removed PII | This will be your weekly go-to page
  • Removed PII | Here you’ll find the research up to date
  • Removed PII | Unsurprisingly, this contains branding info

Clickup

Intro to Clickup

Clickup boards

  • Design board | Contains all the design boards
    • Estimated and ready to go | Items that can be picked up by devs as needed
    • Ready for estimation | Items that have been designed and scoped, and can go the estimation session with devs. These items move to the Ephemeral board in Engineering for the By-weekly estimation session. (more below)
    • Design in progress | Items that are in design phase
    • UI/UX opportunity backlog | Mostly feedback from the Slack #feedback channel that need to be addressed
  • Engineering
    • Removed PII | The board where items move from Ready for estimation

Figma

For the Figma pages themselves, you’ll find everything there is to know about in the Removed PII Notion page. Below you can find a demo of the libraries setup, and reasons why they are setup this way.

Documentation

Files overview

Libraries

Nuances

  • Dashboard - API

    Video here

Plugins

Here’s a list of plugins I commonly use

  • Able | Check accessibility
  • Find and Replace | Bulk rename layers
  • Design Lint | Cleanup design files before handover to ensure all styles are correctly used
  • Google Sheet Sync | Sync content from Google Sheets
  • Sort Layers | Sort layers superpowers
  • Rename it | Bulk rename layers

03

Keep moving

Previous project SplootCode SplootCode · 2022 A startup focused on making programming accessible and easier to learn. Next project Enviz | Customer portal design mattia.ink · 2024 A customer portal for advanced Enviz users to create, manage, and publish AR and VR experiences.
Back to portfolio