I haven't been very active on my personal website lately.

Even though I have a few writing ideas saved in my folder, I often feel hesitant to publish them, because they seem **too unfinished** and **rough**.

While posting on **Twitter** may be a popular choice for many people, the presence of ads, constant distractions, social pressure, and reliance on the decisions of a wealthy individual do not create the environment I desire.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FWR7DXNpKabdtLzVTjuHfy4FOCg62%2F49EbNdQt5wYO4re1mgGc%2Fedc47f56-57d0-4e62-b146-a4ec87b66476.png?alt=media&token=5a17e246-3489-4d4d-820f-8a5ac4f320fe","id":"edc47f56-57d0-4e62-b146-a4ec87b66476","width":3508,"height":2564,"filename":"twitter.png","type":"image/png","caption":"","border":false}]}
```

---

### Vision

So, how about creating a self-hosted playground, adding some Twitter-like posts, and making it my new personal website?

Once I let that thought cross my mind, I couldn't resist evolving my website to a **personal microblog**.

---

### Publishing Flow

As implied in the introduction, the success of the project hinges on how **swiftly** and **conveniently** posts can be published.

Using **Notion** as a CMS was therefore a no-brainer, since I already use it daily.

> Building a custom UI to manage content wasn't feasible (at least for the first release cycle) as this introduces other issues, such as authentication and user management.

---

### Inspirations

In order to get an idea of the potential outcome, I began **to conduct research**, where I discovered several clutter-reducing tools like [Minus](https://minus.social/), [Kizie](https://kizie.co/), [Typefully](https://typefully.com/), and [Polywork](https://www.polywork.com/), besides all-time favorites like [Read.cv](http://read.cv/) and [Rep.ly](http://rep.ly/).

Based on this, I determined some **basic requirements** for my own solution.

---

### Anatomy of a Post

With the demands in mind, I defined and designed the building blocks of a post, as these are the center of attention on any page.

As a result, **timestamp**, **post category**, **publishing status** (for internal purposes), and a **content** object (consisting of **text**, **image**, and **link**) emerged as crucial information pieces.

Additionally, I included an option to **pin posts** at the top of the page.

Posts can also be created by multiple authors, so it is necessary to display the **author's name** and **image**.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FWR7DXNpKabdtLzVTjuHfy4FOCg62%2F49EbNdQt5wYO4re1mgGc%2Fcb83fe7f-5525-435e-a099-527ee46ffd58.jpg?alt=media&token=c0d1234c-29d6-42c9-b1c3-c4825b859b89","id":"cb83fe7f-5525-435e-a099-527ee46ffd58","width":3200,"height":2400,"filename":"post-anatomy-1.jpg","type":"image/jpeg","caption":"","border":false}]}
```

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FWR7DXNpKabdtLzVTjuHfy4FOCg62%2F49EbNdQt5wYO4re1mgGc%2Fdf807e41-5eb1-490e-8491-f230a147a215.jpg?alt=media&token=4cfcd564-e945-44cc-8600-4e05880467c3","id":"df807e41-5eb1-490e-8491-f230a147a215","width":3200,"height":2400,"filename":"post-anatomy-2.jpg","type":"image/jpeg","caption":"","border":false}]}
```

---

### Layout & Navigation

After defining the post itself, I focused on its surrounding in order to move from the details to the bigger picture.

While it was clear to present posts in a **chronologically sorted list**, I also had to think about the **navigation** and its content.

Therefore I decided to go for a globally accessible and sticky navigation bar at the bottom of every page, allowing the user to **switch between work- and life-related posts**.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FWR7DXNpKabdtLzVTjuHfy4FOCg62%2F49EbNdQt5wYO4re1mgGc%2F791d3b3e-1542-42be-9f5e-5ec446d7426c.jpg?alt=media&token=d6d375c2-3c20-4183-8842-7724151a0bf0","id":"791d3b3e-1542-42be-9f5e-5ec446d7426c","width":3200,"height":2400,"filename":"layout.jpg","type":"image/jpeg","caption":"","border":false}]}
```

---

### Next Steps

With the finalization of the design, I'm going to start with the **Next.js frontend** and the connection of the **Notion database**, as mentioned above.

In addition, I plan to make posts importable by providing a **RSS feed**.

Besides that, I’m also considering new content types such as **videos** or **milestones**, but that's something for the future.

---

### Learnings

I have mostly gained frontend experience with **Vue** and **Angular**, so I expect the biggest challenges of exploring a completely new JavaScript framework are yet to come.

However, I am excited for this opportunity to learn and grow.

From Twitter to Self-Hosted

When Blockpit started to grow rapidly we also realized that it was time to brain dump all the ideas and guidelines by creating globally accessible and centralized **Figma** and **Notion** spaces.

A well-executed solution enables designers and developers to **increase output** on the one hand and **improve quality** on the other.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FWR7DXNpKabdtLzVTjuHfy4FOCg62%2F6jjRV21blisvTauIb47P%2F67dbb0bb-7757-4906-b246-2b2baab12462.png?alt=media&token=e48b5cdd-d270-4ef7-927b-5d8543ab2fb4","id":"67dbb0bb-7757-4906-b246-2b2baab12462","width":2240,"height":1728,"filename":"Dribbble shot HD - 15.png","type":"image/png","caption":"","border":false}]}
```

---

### Team

Initiated for my own benefit while working on the retail product redesign, I collaborated mainly with another **Product Designer**, a few **Brand Designers**, and the **CPO**, exchanging and peer-reviewing results.

As part of my work, I extensively researched and implemented **Design Tokens** and established a new **Design Language** for our components.

---

### Vision

Since the design system is a growing and living document, this project was about laying the groundwork by documenting **colors**, **fonts**, **icons** and an initial set of **components**.

---

### Interface inventory

We kicked off the project by performing an [interface inventory](https://bradfrost.com/blog/post/interface-inventory/).

Each item was **categorized** and its **purpose described** in a few words.

At the end of this process we cleaned out duplicate and inconsistent entries and decided on the ones we continue working with.

---

### Colors & Fonts

After collecting all the relevant colors and fonts as design tokens we decided to split them in [Global and Alias Tokens](https://spectrum.adobe.com/page/design-tokens/#Design-token-types):

* **Color Aliases:** Categorized as foreground, background or border.

* **Typography Aliases**: Categorized as heading, paragraph or label.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FWR7DXNpKabdtLzVTjuHfy4FOCg62%2F6jjRV21blisvTauIb47P%2Fc5bb584c-a997-4d11-b6c2-10147abeed71.png?alt=media&token=4a4dd7e5-284c-4e88-b320-61b27c837217","id":"c5bb584c-a997-4d11-b6c2-10147abeed71","width":3864,"height":2430,"filename":"CleanShot 2022-10-29 at 10.23.56@2x.png","type":"image/png","caption":"","border":false}]}
```

---

### Icons & Components

We merged several similar components to keep them as versatile and atomic as possible, as we defined the following hypothesis:

> Few components are easier to maintain and the acceptance of their use increases.

---

### Learnings

While working on the project I learned several things, highlighting the three most important ones:

* **Processes must be defined** to keep the system "alive".

* **Keep Figma and Notion in sync** all the time.

* **Find the sweet spot of documentation complexity** to speed up the process while maintaining creativity in finding the best solutions.

Centralizing Design

> /ˌkjuː ən(d) ˈeɪ/ (noun)
>
> is a situation in which a person or group of people asks questions and another person or group of people answers them.

---

### How did you find your way into Product Design?

I have always been a design-minded person and after my IT-related studies I was torn between becoming a **Design Engineer** or a **Product Designer**.

But since job titles are just generous tags, trying to categorize people and their work, I would rather call myself a coding designer.

---

### How does your design process look like?

Like the most Product Designers I’m guided by the [Double Diamond Design Process](https://www.designcouncil.org.uk/our-work/skills-learning/tools-frameworks/framework-for-innovation-design-councils-evolved-double-diamond/).

I think of it as my **baseline toolkit**, adaptable to the complexity of any project by applying different methods and deepening the focus on specific parts of the process.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FWR7DXNpKabdtLzVTjuHfy4FOCg62%2FHbVYJQ74mWp0TpPE6iWs%2Fb2320388-e7b3-415d-9c2e-bd212e9973b5.jpg?alt=media&token=d5a2aff2-f2ff-45ce-b83c-d2ddecb2b310","id":"b2320388-e7b3-415d-9c2e-bd212e9973b5","width":3200,"height":2400,"filename":"double-diamond.jpg","type":"image/jpeg","caption":"","border":false}]}
```

---

### What’s your favorite part in the design process?

Based on the Double Diamond Design Process, I prefer working on **each stage of the second diamond** when it comes to pouring all the ideas in a Figma file.

Besides that, I’m passionate about good documentations and love **working on the Design System**.

---

### What inspires you?

I feel inspired by people who are **building and sharing stuff in public**.

**Twitter** is a great place for finding people like [James McDonald](https://twitter.com/jamesm), [Rasmus Andersson](https://twitter.com/rsms), [Paco Coursey](https://twitter.com/pacocoursey), [Brian Lovin](https://twitter.com/brian_lovin), [Julian Lehr](https://twitter.com/julianlehr), [Benji Taylor](https://twitter.com/benjitaylor) and many more.

They keep me excited about improving my craft and shipping products with purpose.

---

### What do you care deeply of?

One of my most important philosophies as a minimalist is **“Quality instead of quantity”**, which can be applied to almost every area of my life and work.

---

### What are your interests outside of work?

On sunny days, me and my wife Sarah are enjoying the nature by **travelling around**, while my favorite trip so far has been an exploration of iceland in 2019.

On rainy days, I like to work on my **side projects** or watch a [Juventus](http://juventus.com/) football game.

Besides that, I’m really passionate about a good cup of **coffee**. Sarah and I even started to rank the best coffee beans in a shared Notion list (Cannot recommend [Elbgold Sechs A](https://www.elbgoldshop.com/products/sechsa-1kg-espresso) enough).

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FWR7DXNpKabdtLzVTjuHfy4FOCg62%2FHbVYJQ74mWp0TpPE6iWs%2Fe9c3d7b2-53a0-47d2-90e0-5a590493bbb8.jpg?alt=media&token=f1bff73b-9a88-4009-858e-a798c435f930","id":"e9c3d7b2-53a0-47d2-90e0-5a590493bbb8","width":4032,"height":3024,"filename":"IMG_0486 2.jpeg","type":"image/jpeg","caption":"","border":false}]}
```

---

### How does your setup look like?

**Figma**, **Notion**, **Miro**, **Cleanshot X**, **Slack**, **Spotify** and **VS Code** are daily companions for me and my work.

Depending on where I am, I use these tools either on my **iMac** or on my **MacBook**.

---

### What music are you listening to?

Especially since I got my Airpods Pro with ANC, I love to immerse myself in **minimalistic and atmospheric music** by [Joep Beving](https://open.spotify.com/artist/2VKfXEWzhUi9siHBDTI02Y?si=e55d503d9b9d4207), [RY X](https://open.spotify.com/artist/2KjAo6wVc9d2WcxdxSArpV?si=-45fECEtSwGb68RS38ihYw) or [Ólafur Arnalds](https://open.spotify.com/artist/7E3BRXV9ZbCt5lQTCXMTia?si=c311a1869c914202).

Product Designer

Questions & Answers

I answered 8 questions about myself and the way I am working on a daily basis.

During my studies, I had a strong focus on human-centered design and front-end development, but also took social science courses like psychology.

When we started to grow fast we also noticed that it was time to brain dump all the ideas and guidelines by creating centralized Figma and Notion spaces.

Design System

We took "Build in bear markets, sell in bull markets" seriously and completely revamped the IA, flows and design language of our B2C crypto tax software.

Retail Product Redesign

With the merge of two companies we wanted to realign the brand expectations by introducing a new logo, an updated color palette as well as a new typography and iconography.

Rebranding

Currently I'm rethinking my website by introducing a timeline of life- and work-related updates, stories and milestones.

Personal Microblog

At karriere.at, I take the lead on key B2C aspects of our product, focusing on streamlining the application process and enhancing application management. I initiated the shift to Figma as our main design tool and currently oversee the continuous development and maintenance of our Design System.

Lead Corporate Design & User Experience

After a 6-month internship, I stayed on a permanent basis for a few more months and learned a lot about startups and working in an agile environment.

Design Engineer

I joined Blockpit as their very first designer (later becoming a mentor and creative lead to two other product designers) in the early days and contributed my part in scaling from a few hundred to over 100k users.

Dominik Eibensteiner

Contact

Work Experience

Projects

Side Projects

Writing

Education