Built a little something with my friends

Figma

Creatorspace 0.1

Python

Runaway Champion is an exciting obstacle course run, challenging the player with tough situations and even tougher opponents. Dash towards to goal in an action packed, competitive obstacle course as you try to avoid dangerous wrecking balls, spinning barriers and bouncy spikes. Compete with results from other players and try to beat them to the first place. There is only one winner, and winner takes all.

Obstacle course racer for mobile

Blender

Unity

Runaway Champion

Related to the cultural heritage field, pottery reconstruction in my country (Peru) incur high costs of personnel and months of designing different preliminary models physically in order to decide the correct version. There have been plenty of solutions in order to reduce the time and costs of this process by using computational resources.

With the increase of Deep Learning models using images, my contribution was to implement and study the performance of a GAN Deep Learning Model applied to reconstruct fractured potteries.

By this, my task was to generate multi-view depth maps for the original and fractured models and I used the Blender API to take pictures front different points of view and obtain its depth maps. After taken the pictures, I used the Pillow library to combine the images in the specific database format.

3D Reconstruction of Incomplete Archeological Objects

Bachelor's thesis project

Test

I’m on a mission to get rid of popups on the web. It’s too important to leave website designs entirely to marketers and "growth hackers".

I launched a little side project. I give practical tips on how to increase conversion metrics. Sustainably. With design.

I want to help solo founders and engineers explain the products they are building. Most products have great tech and solve painful problems — but have a hard time explaining it.

It all started with a simple idea — what would happen if you would apply UX methods, used for digital products and e-commerce, to design a landing page? Research, copywriting, design, and analytics evaluation.

Organisations have entire teams to improve conversion. Marketing, Design, User Research, and Business Analysis. My idea is to democratise the knowledge. It’s not rocket science.

 that has weekly practical website design tips and case studies. For solo or indie founders.

I don’t share dark patterns or growth hacks. We’re playing the long and honest game here – the one where you care about your visitors.

Conversion Design is not a substitute for a bad product or service. It can only go so far. Validating the idea, the market, and solving a genuine problem should be a precursor to your user growth.

Conversion Design newsletter signup screen

 and the design team had a very data-driven mindset. We tested and iterated each pixel. Then looked into data to improve the booking conversion metrics.

Tools are becoming more accessible and easy to use.

 where people ask if their message is clear or if the design is good. That’s what I did for years at Trivago.

Maybe it’s a hint that this is what people want?!

Conversion Design Zapier and Mailerlite screens

The first part and most important one is building a product people want. I started to brainstorm for 

 it’s special. Unique selling proposition compared to the competition. Is there even a competition or it’s a new category?

I build a couple of digital products and analysed the conversion rate. So I added case studies into the mix. Real practical examples.

How can you make something simple when your process is convoluted?! For websites, I follow 3 steps — structure, copy, and visual design. Because it helps me. Mentally. Otherwise, I would just do it in code.

For the structure, I tried to use the most common pattern for browsing articles. Plus an emphasised hero section to subscribe. Clarity is king. Not original but I added delightful details in the visual phase. More on this below.

I explored Layout and Typography in the wireframe phase. I decided to start with icons.

This apparently small element would set the direction and define the creative direction. And style.

I found something appealing with colourful UI icons. With subtle gradients. One of the most design heavy elements for Conversion Design are article covers. I decided to learn some 3D and design some simple abstract shapes. They would fit well with colourful UI elements. Also learning to make complex scenes would require a bigger commitment in learning 3D.

. It's a breeze to use and has a relatively shallow learning curve.

I made the graphics for the first batch of articles I intended to write about.

 very well and coded visually the online magazine. It took a little bit longer than expected after all the designs were ready in Figma. It has some complex interactions and integrating 3rd party tools like 

Now, when a person subscribes or applies to a 

 — I get a notification, add them to an air table database, and send them the welcome message automatically.

You can have the greatest product or offer amazing services for a dime. Or even for free. But if you build it they will not come. You need a marketing strategy to share it with the world. And the world is drowned in noise screaming for attention. It's hard.

I worked on a simple marketing plan and defined some of my main channels to promote Conversion Design. Twitter and the Indie hackers community is a big part of it.

Solo tech founders and engineers don't have time for design. It's not their thing. They like to build. That's why most successful startups have this co-founder duo. Tech and marketing or design. New tools allow refining your website with dead simple user research. Check analytics that are not a chore to use.

With enough knowledge about design — it can go a long way.

That's what I try to do. Also, helping people is extremely motivating.

Online magazine with design tips for conversion

Google Analytics

Stripe

Airtable

Notion

Webflow

Zapier

Conversion Design

Croissant wafer muffin cake cupcake pie fruitcake. Muffin chocolate chocolate brownie ice cream donut. Pastry cheesecake jelly-o pie wafer marzipan. Biscuit chupa chups lemon drops powder chocolate toffee. Topping macaroon icing ice cream oat cake. Biscuit apple pie powder croissant shortbread sugar plum toffee sweet roll halvah.

React

Roa Coaching

Most sites overwhelm. I just want the best short Tips on X

It is a place where you can find & share the best short tips

That way if you search for tips and find a tip

You can find in what context it was saved in. 

E.g. Tip might be "Chew gum while cutting onions"

This Tip can be found in recipes that use onions. 

Find, share & request short tips.

Bubble

Tiplister

Typescript

Javascript

nodeJS

This is a clone of Spotify using React. It is a single-page application that uses the Spotify API to fetch data and display it. It is a responsive web application that works on all devices.

The motivation behind this project was to showcase how to create and share hooks with TypeScript, creating hooks in a modular way so that they can be used in various parts of an application and also combine to create other custom hooks, we will learn how to use TypeScript to provide a good experience in development, thus increasing the quality of our code.

it loads the Spotify API and displays the data in a beautiful way, it has a search bar that allows you to search for artists, albums, and songs, it also has a player that allows you to play songs, pause, skip, and go back.

Spotify clone using React and Typescript

Tailwind CSS

react hooks

Spacefy 👩‍🚀

With the current geopolitical and economical situation, Europe has started to feel the looming shadow of an energy crisis. Using software, we tried to hack together a small piece of the puzzle which could help alleviate the looming threat of energy shortages and blackouts. The app, called "Sleeperz" was built at HackZurich 2022 over the course of a sleep-deprived weekend.

In order to tackle this issue, we decided to use the power a collection of people can have by each individually contributing a tiny bit. With Sleeperz, the user can mark rooms as "idle" (either manually or via an automated schedule) and thereby allow the energy supplier to turn of power to said rooms without notice.

Management of power to different rooms, and the impact they can have.

A power management tool to avoid blackouts.

React Native

PostgreSQL

Sleeperz

Homemade Method is an initiative by the founder Anna Rakoczy to help women in their 50s, 60s & 70s lose weight and lower high blood sugar, pressure, and cholesterol without dieting.

I took over the design responsibility of the recipe app project and applied a user-centered approach to design the user experience and the interface of the new registration flow.

The current registration flow needed to be improved to make it more intuitive and easier to register and log in, and a paywall screen had to be added at the end of the registration process as a part of the feature.

Knowing that the user group is over 50 ladies, creating a clean and clutter-free layout was essential. I started with wireframes to explore options and define how the steps should look.

Still too crowded. We looked for ways to clean up the design by removing unnecessary or less critical elements from the layout. The apparent solution was removing the step indicator from the top of the screen.

At this point, we reviewed the wireframes and decided to start designing screens so that we could make minor adjustments during the styling.,

There was a significant change during the design process. Initially, a separate page was planned to trigger the sign-up and log-in flows, but due to marketing reasons, the business owners decided to use the landing page as a starting point for the registration flow.

I adapted to this change and devised new solutions to fix the problem.

The creative process of developing a feature, from wireframes to designs.

Multistep Registration Flow

Ruby

KitchenBuilder is a platform that enables restaurants of all sizes to set up their online shop and start selling food in literally 5 minutes. Featuring a slick and responsive shop, an intuitive kitchen dashboard, handy features - such as one-click checkouts for your customers - and much more!

During the pandemic a lot of restaurants were faced with the harsh reality of lockdown: They had to start selling their food online. Many small to medium sized restaurants didn't have the financial resources to build a satisfying shop, however, and the larger chains which hadn't set up a digital sales channel before the pandemic were also caught by surprise and ended up with a subpar and rushed product. Many restaurants resorted to frankenstein-shops, where they stitched together a bunch of pre-existing website builders and services to create a primitive shop that allows them to sell their food. We saw the problem and decided to put our skills to good use and set out to build a specialized shop builder for restaurants.

Easy digital shops for restaurants

Docker

Flutter

Gitlab

Google Cloud

Ruby on Rails

Kubernetes

Next.js

Nginx

KitchenBuilder

Journaling is a tough habit to pick up and maintain - yet the benefits to mind and body are tremendous. 

We built Chat Journal that features responsive and intelligent AI characters that foster a journaling habit to help people better understand and act upon their thoughts and feelings.

The world is moving fast. It can sometimes feel like life is escaping one's control. It can feel tough to hold still, think, and act with deliberation. 

With the above being true for many of us, we believe that journaling can be an effective way of regaining control. Yet journaling is daunting, it takes time, inspiration, and self-reflection. Everything that is difficult in a general state of overwhelmedness or even anxiety. 

Much like guided meditation - there are tremendous benefits in guided journaling. 

The guidance we believe in helps spark self-reflection and nudges one to start writing. Start a conversation with oneself. 

There are global problems that we are tackling and more nuance journaling problems. 

A gamified chat journal experience built on cutting-edge conversational AI to help foster and maintain a fun journaling experience leading to more clarity of thought and happiness. 

Chat Journal makes journaling as easy and fun as instant messaging

Tensorflow

ChatJournal

Earlier this year, I grew bored of my personal website.

Over time I went from posting detailed, polished case studies to just a list of companies I worked for. But none of it felt right. I just couldn't quiet put my finger on it.

One day, during a bus ride home (creativity strikes at interesting times), it became clear.

I wanted my website to showcase the things I value most: The experiences we made, and the people I met.

Wire was the first team I joined in which I worked with experienced designers and was able to lead the design on the first software I ever helped ship.

It was a great experience and I learned a ton. Thanks to the people at Wire that gave me a chance to prove myself.

With Magnets, Silvan and I shipped a cool little side project that was original and had a unique value.

It was the first time I had to dive into marketing a little bit to get the word out, and it was difficult. The fact that the work eventually paid off and we were featured on multiple news sites is one of the coolest things that came out of this project.

Probably one of my luckiest decisions so far has been to join the tiny 25-person company Trade Republic that set out to build a simple mobile app for the masses to buy and sell stocks.

I had absolutely no idea about the stock market when I joined. But the company became a massive success, and I had the rare chance to work closely with the CEO for multiple years, getting a rare glimpse into how the company was built.

The memories of our discussions and the impressions I got during that time was what I wanted to share.

And last but not least, I wanted my website to be a place in which I can share what I'm currently up, and update this regularly as we write another story.

I redesigned my website to focus on storytelling and people.

My Website

As a product designer, I wanted to have my own product. A side project where I had all the creative freedom in the world. My goal was to learn everything that comes into building and promoting a simple app. To learn.

Foyl app UI for news and wallpapers section

I found a small Jobs-to-be-done in modern gaming.

Companies offer free games — in exchange, they have a marketplace where they sell in-game items. It became big. Passionate gamers like to spend their virtual and real money on them. Games like 

The problem I wanted to solve with my app: Allow gamers, that care about items, to quickly check what’s available on that day. On the go. Without starting the gaming console. For those that don’t know, it takes a while :).

After competitive research, I saw that there are websites, Instagram accounts, and other apps that offer this. They were all bloated and full of ads. If there’s a market you can offer a simpler or better product right?!

Foyl first iteration of landing page - Aggregator vision

Initially, I wanted to build an aggregator for multiple games.

Be the place to see at a glance the daily store cosmetics, items, and skins for 

. These were the hot games at that time. I jumped immediately in defining a logo and landing page. Not ideal, but honestly if it gets the ball rolling it’s a great kickoff.

Next, my goal was to promote it in the gamers community. For all 3 games. I wanted to see if anyone would be interested and validate my idea. If enough people sign up then it's worth building it. ‍

It became obvious that the product had a very wide audience. And the communities were hostile to each other. Gamers are passionate people. This forced me to have a generic message in my Headline and messaging style. To tailor to different audiences: Fortnite for a younger user base and Apex/CoD is more mature.

My conversion rate was at 12% on app invite signups.

Foyl coming soon landing. Fortnite game pivot.

I focused only on one specific game. The message and marketing are clearer. And targeted for a specific niche. It's also easier to build the MVP.

I ran a simple test with people not familiar with the product and website.

 any of my Twitter followers have 3 min to spare.

My conversion rate reached 29% after all the changes. The traffic was not entirely organic as I ran some ads on Instagram. The customer intent was probably higher but still a decent increase.

Later, when the app was ready I replaced the call the action with “Get beta”. Later again with "Apple Store" and "Google Play" links. Like it is now.

Foyl results for Maza usability research and survey 

Foyl product vision. Pivot to Fortnite only.

Foyl app has a nice rating in the App Store. Especially considering I run ads on it to support the server and the Apple license costs.

It doesn’t make much but it’s on autopilot and as passive as it gets. There's a free API that updates the content. If you’re curious  

The slick Fortnite companion app

Swift UI

Principle

Typeform

Foyl

Master's course project - Computer Animation

Particle System Simulation

Team up with your friends to grow colorful plants and send them to your neighboring planets - they are in desperate need to rebuild their destroyed ecological systems!

Find the perfect strategy for each of the 27 unique levels and take care of your gardens in cozy forests, sunny tropical islands and ice cold snowscapes.

Play with up to 4 players in couch-coop or online, or get help from a friendly robot in singleplayer mode!

 to get the Early Access version of Deep Space Gardening. The full release will follow soon!

Deep Space Gardening started as a semester project in ETH Zurich's Gamelab back in 2019. Winning both the jury and the audience award and seeing all our friends having a lot of fun playing the prototype, we decided to make it into a proper indie game.

The visuals have changed quite a lot since, so don't be surprised when you find an old trailer somewhere :D However, the core game mechanic stayed the same, only getting fine-tuned and extended with new elements like cannons for shooting items across the gardens.

On our journey, we were awarded two grants by Pro Helvetia, which supported us a lot, not only with financial resources, but also with invaluable guidance and a wonderful network of Swiss game developers.

After releasing the game into early access in October 2021, we continued working on additional features as the singleplayer mode and adding more levels in the third biome ("Snow & Ice"), which will be released soon!

If you'd like to get more insights into how we made Deep Space Gardening, we have recorded a couple of devlogs on Youtube:

For updates on the game and finding new friends to play with, we'd like to invite you to our Discord channel over here:

A cooperative multiplayer game.

Adobe Photoshop

Bitbucket

Deep Space Gardening

Module-Federation: A game-changer in JavaScript architecture

Module Federation is a feature in Webpack 5 that allows you to dynamically load code from remote servers at runtime. This is a game-changer in JavaScript architecture because it allows you to break your application into logical pieces and deploy them independently. This is a huge win for teams that want to work independently on different parts of the application.

The container application uses Module Federation to dynamically load the `Checkout` and `ProductList` components from the remote application at runtime. We created different remotes that will act as micro frontends and will be consumed by the container, with this architecture we can have a single codebase that can be used in different projects.

In a microservice's architecture, each service is a self-contained application that runs independently and communicates with other services via an API. Each service is developed and deployed independently. This architecture has many benefits, including:

- Each service can be developed and deployed independently.

- Each service can be written in a different programming language.

- Each service can be scaled independently.

- Each service can be replaced with a different implementation at any time.

Module Federation brings many of these benefits to JavaScript applications. It allows you to break your application into logical pieces and develop and deploy them independently. This is a huge win for teams that want to work independently on different parts of the application.

Micro-Front-End App using module federation

webpack

styled-components

Coffee Bucks ☕️

Master's course project - Virtual and Augmented Reality

Augmented Reality Project

In the early days of launching Remi, a culture building platform for remote teams, we wanted to...

d) have some freedom to choose who to let into our early beta and who not

I started looking into off-the-shelf referral marketing solutions like Viral Loops, KickoffLabs, and Prefinery, but none of them really gave us the flexibility that we were looking for and were also quite pricy. 

The solution: We started building our own waitlist system using no-code tools. 

We built a simple landingpage to test demand with a landingpage builder called Unicorn Platform and launched on Twitter and Linkedin.

We then collected email signups on our landing page from people excited about our product. After a potential user joined our waitlist by submitting their email address, we asked them to share a bit more info about them via a Typeform survey to increase their chances to get in quicker. Once filled out, we would follow-up with an automatic confirmation-welcome email by us founders.

We iterated our confirmation email numerous times – trying to encourage those signing up to share about Remi to their friends. We tested different copies and provided share links for social media, which got us a decent amount of word-of-mouth and led us to get to 1500+ signups over the course of a few months.

What does the Remi waitlist system include?

What's required to build a similar waitlist system?

Found this insightful? Follow me for more :)

Explore what others are building.