`Last updated: November 24, 2023`

A collection of designers/engineers portfolios from top companies in the world.

 1. [benjamin.design](https://benjamin.design/) - Benjamin den Boer (Framer)
 2. [emilkowal.ski](https://emilkowal.ski/) - Emil Kowalski (Vercel)
 3. [rauno.me](https://rauno.me/) - Rauno (Vercel)
 4. [paco.me](https://paco.me/) - Paco Coursey (Linear
 5. [oscarnilsson.com](https://oscarnilsson.com/) - Oscar Nilson (Figma)
 6. [marco.fyi](https://www.marco.fyi/) - Marco Cornacchia (Figma)
 7. [ibuildmyideas.com](https://ibuildmyideas.com/) - Jordan Singer (Figma)
 8. [www.elvinhu.com](https://www.elvinhu.com/) - Elvin Hu (Google)
 9. [ericjordan.design](https://ericjordan.design/) - Eric Jordan (Apple
10. [guglieri.com](https://guglieri.com/) - Claudio Guglieri (Opal Camera)
11. [sonnylab.com](https://sonnylab.com/) - Sonny Lazuardi (Grab)

Senior Portfolios

[Academy](https://designjam.club/academy) is a bootcamp by [Design Jam Indonesia](https://www.instagram.com/designjam.id) for Junior Designers with at least 1 year of experience who want to learn about the hiring process part in digital product design. I worked on the information architecture by collaborating with the team to design the bootcamp website.

`Before the bootcamp starts, students need to join. But how might we create the best experiences before they make a decision?`

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FaBMmhY6F8DX4SMNIAkzolfbX4ZO2%2FJHUq3VPQ0oU5iYi9pVtZ%2F005594d7-8f83-4b79-89ba-df4e7dad2809.png?alt=media&token=94e760dd-36f3-42f2-a80b-4bdcf06c306b","id":"005594d7-8f83-4b79-89ba-df4e7dad2809","width":3840,"height":2160,"filename":"20.png","type":"image/png","caption":"Overview","border":false},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FaBMmhY6F8DX4SMNIAkzolfbX4ZO2%2FJHUq3VPQ0oU5iYi9pVtZ%2F5a46ba44-a7ca-437d-867c-13910600c232.png?alt=media&token=f9e8be14-0472-421d-814c-fa719d31b940","id":"5a46ba44-a7ca-437d-867c-13910600c232","width":3840,"height":2160,"filename":"22.png","type":"image/png","caption":"Curriculum","border":false},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FaBMmhY6F8DX4SMNIAkzolfbX4ZO2%2FJHUq3VPQ0oU5iYi9pVtZ%2F1f9030f9-af05-4f2f-9e50-eb8e46d69453.png?alt=media&token=e4d7c677-5cdb-4129-8276-ee904f9f31a3","id":"1f9030f9-af05-4f2f-9e50-eb8e46d69453","width":3840,"height":2160,"filename":"25.png","type":"image/png","caption":"Mentors & Keynote","border":false},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FaBMmhY6F8DX4SMNIAkzolfbX4ZO2%2FJHUq3VPQ0oU5iYi9pVtZ%2F4f995acd-e8df-487d-a7b0-56c62ae916f4.png?alt=media&token=eccac121-9395-4c8d-aa48-d5f07fbcfb3e","id":"4f995acd-e8df-487d-a7b0-56c62ae916f4","width":3840,"height":2160,"filename":"23.png","type":"image/png","caption":"Benefits","border":false},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FaBMmhY6F8DX4SMNIAkzolfbX4ZO2%2FJHUq3VPQ0oU5iYi9pVtZ%2F5772308a-1319-4960-990e-a855a289b38a.png?alt=media&token=dd49feaa-75e3-4d3f-a9fa-867e8c9e7380","id":"5772308a-1319-4960-990e-a855a289b38a","width":3840,"height":2160,"filename":"24.png","type":"image/png","caption":"FAQ","border":false}]}
```

[View the live website](https://designjam.club/academy)

### Mentor vs Curriculum

Students see that curriculums are way more important than mentors when they want to join a bootcamp, this is one of the findings I used from the research team who previously did research with the potential students.

I turned the findings into actionable items for the website by focusing on these 3 factors of experience; structure, interface, and information.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FaBMmhY6F8DX4SMNIAkzolfbX4ZO2%2FJHUq3VPQ0oU5iYi9pVtZ%2Fdeb5fdf1-5a76-4036-a9e4-6df7b9f66ef2.png?alt=media&token=bb19fbf6-be24-4662-8e66-4e006f62a93b","id":"deb5fdf1-5a76-4036-a9e4-6df7b9f66ef2","width":3840,"height":2160,"filename":"Insights.png","type":"image/png","caption":"FigJam canvas used to breakdown the research","border":false}]}
```

### Students want things that are relevant and fit their needs

The research findings also shaped the main strategy I set for designing the website, I want it to embrace the keywords; relevant and needs.

### It needs to be informative and directional

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FaBMmhY6F8DX4SMNIAkzolfbX4ZO2%2FJHUq3VPQ0oU5iYi9pVtZ%2F51f0a1f2-e964-478b-81f9-639d1f2d56cd.png?alt=media&token=921c41b6-11f0-4887-9a2d-9ffd07394bb7","id":"51f0a1f2-e964-478b-81f9-639d1f2d56cd","width":3840,"height":2160,"filename":"Problem.png","type":"image/png","caption":"Storytelling - Context","border":false},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FaBMmhY6F8DX4SMNIAkzolfbX4ZO2%2FJHUq3VPQ0oU5iYi9pVtZ%2F6780c127-0a6a-4e7c-a83b-15c9c02fad10.png?alt=media&token=e74d6a10-a84d-4b63-82c2-490e78a1920d","id":"6780c127-0a6a-4e7c-a83b-15c9c02fad10","width":3840,"height":2160,"filename":"21.png","type":"image/png","caption":"Storytelling - Issues","border":false},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FaBMmhY6F8DX4SMNIAkzolfbX4ZO2%2FJHUq3VPQ0oU5iYi9pVtZ%2F0d0d1dcc-3a1f-49cb-b368-3c7e6945e6f4.png?alt=media&token=f035767f-97b0-42ca-bdd4-d32821ab3f4a","id":"0d0d1dcc-3a1f-49cb-b368-3c7e6945e6f4","width":7008,"height":2976,"filename":"Goals & Principles.png","type":"image/png","caption":"Goals & Principles","border":false}]}
```

We got the informative side, but to be directional is to guide the reader, so we simply added storytelling.

Design Jam Indonesia previously published a product whose website incorporated storytelling, I extracted the concepts and combined them with the problems I had from the research team's findings then voila.

### Glad to work with senior designers

I learned about considering edge cases and paying attention to how the bigger picture happens. It allows me to build my problem-solving skills, communication, and collaboration. Other lessons:

1. Deliver work & ask for feedback

2. Analyzing research insights

3. Understanding the root problem/challenges

Next time for my working process is to incorporate better discussion and documentation to make sure we don’t miss things out easily.

[Read the entire case study](https://idhamarsyd.notion.site/Full-Read-12min-c84ac2551e234f4eb0b54fb82c31ee8a?pvs=4)

Website that feels relatable

`Last update: January 21, 2024`

This is a document of my guiding principles, how I work as a human, and what I value in others. Think of it as a starting point of how we should connect to each other. In the end, I hope this allows us to work in a better way.

Don’t force yourself to act as I want, I’m an adaptive person so we can figure things out together to find our best workflow.

This is a living document, incomplete and imperfect. I will update it regularly and would appreciate your feedback.

### I like to...

* **Question things out** — Sometimes it seems like I know everything but I’m actually not, that’s why questioning things will happen like almost every breath. I will appreciate if you have a doc or deck to show me about things I should know before we start jumping to the next process.

* **Work in asynchronous** — I don’t really like 30 min meeting that could’ve done in just sending a Google Docs meeting, that’s why most of the times I want to work on async style.

* **Learn everything** — Even if it does not correlate with our work, I need to learn about the system, how things work out, what influences the system, how it’s built, everything, I want to be like I’m the builder of the system.

* **Professionally casual** — It’s okay to break the room for a second, to throw jokes in the middle of the meeting, don’t make work like a hell.

* **Think in dots** — The way I solve things is by visualizing dots in my mind and connecting objects to objects, I like to see things in a very simple form, the root principles, the foundational concept, etc.

* **Be aligned and clarified** — Who's in charge of this project? Whom should I ask questions? What we're gonna do next? I want to make sure that every people that involve know what, why, and how we're gonna figure things out.

### I expect you to...

* **Prove me wrong** — Sometimes I’m a bit idealist over things, I often too proud of my acts and see them as the most right ways of doing things, so argue with me, prove me wrong, show me what the best way of this design decision, show me whether I lack of decision of putting the strategy that way. I like when you’re being to the point. Chill, I never take things personally and instead being open for everything.

* **Respect promises** — If we scheduled things out, be on time, if you say you are gonna be doing A, do A. Don’t make me lost trust and interest. I pay attention to the details to the things you might think mediocre, for me it’s a point of credibility.

* **Overcommunicate** — We can’t work if you don’t really know what I’m currently progressing over our work, that’s why we need to be transparent to each other, send me the things I need and worth to know even if they don’t directly influence our work, you never know what it might result in.

* **Be proactive** — Don't leave me hanging in the discussion alone, don't just say what you want, let's have a discussion about it, maybe we find something better. In the other hand, I appreciate if you could provide a documentation over the meeting we have, my notes might be different with yours and I'm excited to have a sharing.

### How I use my time

I always tried to be wise about it, I only reply to emails at night, and I didn’t respond to you when it’s not the time, it’s great if we could set up working hours when we should be non-stop chatting if it’s async or having a meeting if it’s sync.

How to work with me

I joined 808 Mansion in August 2022 as one of the visual designers in the creative team. We were still a new company back then who does not even have a design guideline so I shaped them including the designer's workflow.

### A single file where all designers can copy-paste from

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FaBMmhY6F8DX4SMNIAkzolfbX4ZO2%2Fb5Ou9bP58k8JB7aTxnOD%2F33d5ba36-72d1-4c6a-9e14-e2355c1d85f5.png?alt=media&token=f8310a07-b0b6-4099-8b2d-5998c4dd6612","id":"33d5ba36-72d1-4c6a-9e14-e2355c1d85f5","width":3840,"height":2160,"filename":"000.png","type":"image/png","caption":"Brand Guidelines Cover","border":false}]}
```

**We** **have many content categories, each with its own structure.** So I document the reusable templates, styles, and assets in Brand Guidelines.

**Since it's documented in Figma, this influenced the team to start using and learning to design right in it as it's way easier.**

Before Figma, I used Notion with a mindset on how we could make a pixel-consistent design for other designers who are using different tools (Adobe Photoshop, Illustrator, and CorelDraw) where people can see the spec of each template and later use it to transform with the tools they use. Think about moving a design to code in digital product development.

### Collaboratively share, comment, and design

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FaBMmhY6F8DX4SMNIAkzolfbX4ZO2%2Fb5Ou9bP58k8JB7aTxnOD%2F4933482d-84fa-487d-87ad-1340fb4b6b40.png?alt=media&token=02bc87cd-b7e3-4720-954e-ca52f1c4fa71","id":"4933482d-84fa-487d-87ad-1340fb4b6b40","width":1366,"height":768,"filename":"image.png","type":"image/png","caption":"A glimpse of variations we made for a particular template","border":false}]}
```

We often do pair brainstorming where one person designs and the rest of the team gives direction (feedback, references, etc.).

### Bonus; Practice design components

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FaBMmhY6F8DX4SMNIAkzolfbX4ZO2%2Fb5Ou9bP58k8JB7aTxnOD%2Ff9e7cd3b-7150-4e95-87c1-f23271cf0d25.png?alt=media&token=cbcd9fa7-fcd4-4c21-8601-b77cb4e27ac3","id":"f9e7cd3b-7150-4e95-87c1-f23271cf0d25","width":2774,"height":1673,"filename":"Components.png","type":"image/png","caption":"Figma Components","border":false}]}
```

I adopted the concept of **atomic design.** The outcome is that I can **design quickly** with better **flexibility.** One use case is when I want to use a different version of the logo, all I have to do is switch the component variation instead of digging under the files to copy-paste it.

Easier to collaborate with Figma

There are many widgets on Figma to help designers be productive, but it's frustrating to move between widgets that track time and manage tasks, so I made one to combine both.

### Non-linear process

I took a reference in a couple of existing widgets, drew the requirements and flow, and then started doing a bunch of iterations, especially the interaction & visual parts. It's all about thinking about the edge cases and testing as early as possible.

The process was not linear, sometimes I coded and found a technical problem, and sometimes I designed and thought that this might not be possible to code.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FaBMmhY6F8DX4SMNIAkzolfbX4ZO2%2FnZMWaSmMs7x3Ys9AGluF%2F117d24ff-88da-4916-901f-799ee3b2faaf.png?alt=media&token=b3aa37c8-0c2d-403f-82a7-5a86a61453ea","id":"117d24ff-88da-4916-901f-799ee3b2faaf","width":3840,"height":2160,"filename":"16.png","type":"image/png","caption":"Breakdown the flow of adding a task.","border":true}]}
```

### It's about balancing design and code

I learned about balancing between technical constraints and design solutions, to provide alternatives, it helps me always to get back to the root problems and make sure I focus on the essentials. One last thing it's about breaking down things before jumping to a solution.

[Full presentation deck](https://www.figma.com/proto/e4YpKzRrSDSfkAg9R1igFX/Minutes---Figma-Widget?page-id=155%3A96&type=design&node-id=156-572&viewport=71%2C347%2C0.02&t=lnwa0EPYsyRN1VXx-1&scaling=contain&mode=design)

Figma widget for productivity

*Today*

I'm building my thesis website called [Rately](https://github.com/idhamarsyd/rately) with React Typescript, Tailwind CSS, and shadcn/ui. I also have a side project with friends called Quriz where we're trying to help people learn Quran through quizzes.

## I built a Figma widget

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FaBMmhY6F8DX4SMNIAkzolfbX4ZO2%2Ftq1M58npj3cn1YP5PeP9%2F6e5903f7-a621-4ddb-89a4-cf42f2de764a.png?alt=media&token=636d4a5d-3ee3-4699-b636-84aed6ea14b1","id":"6e5903f7-a621-4ddb-89a4-cf42f2de764a","width":1920,"height":1080,"filename":"Minutes.png","type":"image/png","caption":"Minutes - A Figma widget for todo & time-tracking.","border":false}]}
```

I used to work with multiple widgets for my productivity space in FigJam, it was frustrating so I made my own to suit my needs by combining todo & time-tracker, built with Typescript.

## I designed a bootcamp event

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FaBMmhY6F8DX4SMNIAkzolfbX4ZO2%2Ftq1M58npj3cn1YP5PeP9%2F6b41526b-6729-4492-a6c2-9f8385a2b505.png?alt=media&token=d9ab20cb-00e4-4dbd-bf43-ee5c7a5206bc","id":"6b41526b-6729-4492-a6c2-9f8385a2b505","width":1920,"height":1440,"filename":"358shots_so.png","type":"image/png","caption":"Design Jam Academy landing page","border":false}]}
```

I worked as a visual designer for Design Jam Indonesia which previously made a bootcamp for junior UX/UI Designers, so many things I've done from simply designing Instagram posts to designing a website with storytelling.

## I shaped company's brand

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FaBMmhY6F8DX4SMNIAkzolfbX4ZO2%2Ftq1M58npj3cn1YP5PeP9%2F3782cb5f-679b-4bce-85f8-b551d371bd59.png?alt=media&token=5b04bc79-eb00-4709-862b-8672c8174c87","id":"3782cb5f-679b-4bce-85f8-b551d371bd59","width":3840,"height":2160,"filename":"201.png","type":"image/png","caption":"Colors usage - Brand Guidelines","border":false}]}
```

I worked as an intern handling visuals for [808 Mansion](https://808mansion.com/), most of my first jobs were building the visual identity from logo to Instagram templates, lots of collaboration and brainstorming happened.

## I led a creative team

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FaBMmhY6F8DX4SMNIAkzolfbX4ZO2%2Ftq1M58npj3cn1YP5PeP9%2F4f1cd3fc-ea43-439f-9bd6-7bf8edd7ea9c.png?alt=media&token=3c13de2d-270b-4cc2-9d50-8d2a64ef8ff0","id":"4f1cd3fc-ea43-439f-9bd6-7bf8edd7ea9c","width":3264,"height":2880,"filename":"Group 21.png","type":"image/png","caption":"Concept brief for IT FEST Wrapped","border":false}]}
```

It was an event for my major university in college, I managed 4 people to make sure we were aligned in every aspect such as workflow, strategy, and communication. We collaborated from building the design style guide to crafting a strategy for closing the event visually.

Idham

Projects

Side Projects

Work Experience

Writing

Contact