## **Creative freedom**

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.

### **My contribution**

Product strategy User research Visual Identity Product design Marketing

### **Year**

2019

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2Fd0lFyBB6C8P1Lnxl92NyImgwACF2%2F4i2jB5JvRmMdZIlNuwgb%2Feec8113d-3de7-4871-a4e2-7696969c9532.jpg?alt=media&token=ca5f4a85-4437-4eb1-9119-be06f2adf2e0","id":"eec8113d-3de7-4871-a4e2-7696969c9532","width":2000,"height":1200,"filename":"Foyl Bleed Landing v3.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%2Fd0lFyBB6C8P1Lnxl92NyImgwACF2%2F4i2jB5JvRmMdZIlNuwgb%2F2469ad0c-9b73-4891-aafb-b10e8c7996d1.jpg?alt=media&token=94d7ab11-cee1-4b16-83df-256c5625e6df","id":"2469ad0c-9b73-4891-aafb-b10e8c7996d1","width":1200,"height":750,"filename":"Foyl Home Cover.jpg","type":"image/jpeg","caption":"","border":false}]}
```

## **Problem space**

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 **Fortnite**, **Apex**, and **Call of Duty** offer new items daily.

## **Value proposition**

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?!

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2Fd0lFyBB6C8P1Lnxl92NyImgwACF2%2F4i2jB5JvRmMdZIlNuwgb%2F2216b3d6-f67c-4c84-aaa1-5de43e189dea.mp4?alt=media&token=09a88643-499f-4e7b-9170-027d8537a452","id":"2216b3d6-f67c-4c84-aaa1-5de43e189dea","width":1600,"height":1200,"filename":"5 Landing Page.mp4","type":"video/mp4","caption":"","border":false}]}
```

## **Aggregator app vision**

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

#### **My original vision statement**

Be the place to see at a glance the daily store cosmetics, items, and skins for **Fortnite**, **Apex Legends**, and **Call of Duty**. 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.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2Fd0lFyBB6C8P1Lnxl92NyImgwACF2%2F4i2jB5JvRmMdZIlNuwgb%2Fd8966627-7517-4b07-a089-3c8fd26a61bc.jpg?alt=media&token=47f719a8-8f99-4b32-90ca-41e45f976cfc","id":"d8966627-7517-4b07-a089-3c8fd26a61bc","width":2000,"height":1200,"filename":"Foyl Apex.jpg","type":"image/jpeg","caption":"","border":false}]}
```

## **Validating with marketing**

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.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2Fd0lFyBB6C8P1Lnxl92NyImgwACF2%2F4i2jB5JvRmMdZIlNuwgb%2F3069514e-f45e-494c-9bee-f2ec8c06a482.jpg?alt=media&token=e5fa9edf-0a13-437b-ad1f-953de967fbd7","id":"3069514e-f45e-494c-9bee-f2ec8c06a482","width":2000,"height":1200,"filename":"Foyl Wireframe.jpg","type":"image/jpeg","caption":"","border":false},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2Fd0lFyBB6C8P1Lnxl92NyImgwACF2%2F4i2jB5JvRmMdZIlNuwgb%2F09ffa54e-1e6b-4dac-af78-fc831ee62855.jpg?alt=media&token=9d638884-14d4-42e1-9b19-dd3b7112deaf","id":"09ffa54e-1e6b-4dac-af78-fc831ee62855","width":2000,"height":1200,"filename":"Foyl Coming Soon.jpg","type":"image/jpeg","caption":"","border":false}]}
```

## **Redesign and 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.

### **Changes**

* I removed the navigation on top to remove unnecessary distractions from the Call-to-Action.

* Simplified the Graphic by removing the distracting background

* Tailored the Headline copy to a younger audience and more specific.

* Increased the size of Call-to-Action buttons.

## **Simple validation**

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

I used  **[Maze](https://maze.co/)** for it.  **[Asked if](https://twitter.com/OStirbu/status/1493524602231959561?s=20&t=yz83C8xUZGFBLxISwkZ1Vg)** 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.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2Fd0lFyBB6C8P1Lnxl92NyImgwACF2%2F4i2jB5JvRmMdZIlNuwgb%2Fb96e5949-1ebc-40a9-9ac6-993b473431b6.jpg?alt=media&token=ec8680dd-524f-480b-b14c-ce42128a99fc","id":"b96e5949-1ebc-40a9-9ac6-993b473431b6","width":2000,"height":1200,"filename":"Foyl Maze Questions.jpg","type":"image/jpeg","caption":"","border":false},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2Fd0lFyBB6C8P1Lnxl92NyImgwACF2%2F4i2jB5JvRmMdZIlNuwgb%2F0595b80c-d159-425a-aef9-12cbd13f7157.jpg?alt=media&token=0793fd0f-5c3f-43a8-881b-59ffd714854d","id":"0595b80c-d159-425a-aef9-12cbd13f7157","width":2000,"height":1200,"filename":"Foyl Vision.jpg","type":"image/jpeg","caption":"","border":false},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2Fd0lFyBB6C8P1Lnxl92NyImgwACF2%2F4i2jB5JvRmMdZIlNuwgb%2Fb46391b4-5ea5-4576-952a-8c039059747d.jpg?alt=media&token=3e0e5640-ed92-4cf1-83af-ab8192109ede","id":"b46391b4-5ea5-4576-952a-8c039059747d","width":2000,"height":1200,"filename":"Foyl Typeform.jpg","type":"image/jpeg","caption":"","border":false}]}
```

## **Conclusion**

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  **[download it here](https://getfoyl.com/)**.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2Fd0lFyBB6C8P1Lnxl92NyImgwACF2%2F4i2jB5JvRmMdZIlNuwgb%2F970674be-b620-43ff-b88c-06fb20307ff7.jpg?alt=media&token=c751d43f-d80b-4607-8cbd-c2b9c4ad2616","id":"970674be-b620-43ff-b88c-06fb20307ff7","width":2000,"height":1200,"filename":"Foyl App and Landing.jpg","type":"image/jpeg","caption":"","border":false}]}
```

Foyl - The slick Fortnite companion app

## **Curated content is the future**

Algorithms fatigue settles in. People are getting unhappier with the type of recommendations from Facebook, Youtube, and even  **[Goodreads](https://www.goodreads.com/)**.\
I believed we arrived at a point in technology where algorithms and AI reached their limit and there's a need for personal and curated content.\
‍

Like in the movie  **[Her](https://en.wikipedia.org/wiki/Her_%28film%29)**. Where the protagonist writes personal cards. Even if technology was super advanced.

### **My contribution**

Product Strategy Visual Identity Product Design Marketing

### **Year**

2021

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2Fd0lFyBB6C8P1Lnxl92NyImgwACF2%2F6xnRHSXPzXzpIaKxGme3%2F1a0a491e-3b19-4e8f-a4f6-6b313349071f.jpg?alt=media&token=c7b4fcab-b595-47f8-ab7e-abf9a428ec90","id":"1a0a491e-3b19-4e8f-a4f6-6b313349071f","width":2000,"height":1200,"filename":"Next Landing Skewed.jpg","type":"image/jpeg","caption":"","border":false}]}
```

## **Science fiction community**

One of the most common asks from  **[SciFi book lovers](https://www.reddit.com/r/printSF/)** is to get similar books based on the same genre, author, or even writing style.\
I made an app where I handpick and write 5 suggestions for books. Based on a loved book by the user. It's not an algorithm. I review all the ideas from the reader's community. For your next read.

## **No-code**

I used  **[Glide](https://www.glideapps.com/)** as the no-code tech for the app. It has a nice front-end builder and a decent amount of customization — important for a designer. It uses Google Sheets or **[Airtable](https://airtable.com/)** as a content back-end.\
I added manually all books. I went for quality over quantity.\
For this, I had to explore what are some of the most popular books and recommendations based on them. Currently, I have 100 book ideas.

### **Book Covers**

The most time-consuming was making unified book covers. I did them in Figma by hand. There's a certain boutique aspect of tailoring for a small niche.

## **Landing page and visual direction**

I designed and coded the landing pages for the app. It allowed me to describe in a dead simple way what the app does. Visually. In a super clear way.\
I missed designing dark websites and app icons.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2Fd0lFyBB6C8P1Lnxl92NyImgwACF2%2F6xnRHSXPzXzpIaKxGme3%2F4612b620-f7aa-41f9-a957-b89541269194.jpg?alt=media&token=7d950dcc-c833-4b16-908a-7c1bd93c42d3","id":"4612b620-f7aa-41f9-a957-b89541269194","width":2000,"height":1200,"filename":"Next Ladning Structure.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%2Fd0lFyBB6C8P1Lnxl92NyImgwACF2%2F6xnRHSXPzXzpIaKxGme3%2Fdd140eb8-3010-46d7-b6e5-af68e67f6770.jpg?alt=media&token=6d0ccd51-ad74-4417-a107-0cdd7963e3c9","id":"dd140eb8-3010-46d7-b6e5-af68e67f6770","width":2000,"height":1200,"filename":"Next Icon.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%2Fd0lFyBB6C8P1Lnxl92NyImgwACF2%2F6xnRHSXPzXzpIaKxGme3%2F85478900-a912-45c3-92de-a93bc1f508a0.jpg?alt=media&token=4b10a93b-878d-4113-b11e-0d43fd630bf1","id":"85478900-a912-45c3-92de-a93bc1f508a0","width":2000,"height":1200,"filename":"Next Glide App.jpg","type":"image/jpeg","caption":"","border":false}]}
```

## **Distribution**

**[Gumroad](https://gumroad.com/)** is great for selling digital products. It has a product page and payment integration. As my app is cross-platform. It's a Glide app. I just had to share the link to it. I offer a free version with a couple of books and the full version under a password. I sell the access for 5$.

You can call it an MVP or hypothesis product — if there is enough demand I can build the native version in collaboration with an engineer. iOS or Android. Engineering time is expensive, that's why No-code tools allow testing the waters first.

## **Promotion**

If you have a niche product for a niche community. It's pretty obvious where to promote and sell your product. To that community. If it's real — people will pay you money to solve it. I mentioned my app in every question related to book suggestions on Reddit and Facebook groups. I even got contacted by a popular podcast show if I want to collaborate. Power of a community I guess.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2Fd0lFyBB6C8P1Lnxl92NyImgwACF2%2F6xnRHSXPzXzpIaKxGme3%2F3e39a048-0883-4d2e-863a-205d6cfa6bd1.jpg?alt=media&token=a51b11ab-d144-42b0-90e2-d98d55dc21e2","id":"3e39a048-0883-4d2e-863a-205d6cfa6bd1","width":2000,"height":1200,"filename":"Next UI.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%2Fd0lFyBB6C8P1Lnxl92NyImgwACF2%2F6xnRHSXPzXzpIaKxGme3%2F067e0b5b-c07c-4a2f-8b7c-f0d1f9e86af3.jpg?alt=media&token=9c48b73f-b9d3-4c10-bbe4-e2b57ff5078c","id":"067e0b5b-c07c-4a2f-8b7c-f0d1f9e86af3","width":2000,"height":1200,"filename":"Next UI Desktop.jpg","type":"image/jpeg","caption":"","border":false}]}
```

## **Conclusion**

I currently don't actively support the app. It needs however 2 things: extend the books library. In the Google Sheets database and grow the customer base. It is possible as its niche but the pricing point requires doesn't justify the effort. For Foyl I have **[ASO](https://appradar.com/academy/what-is-app-store-optimization-aso)** as a distribution method that works on autopilot.

If you're interested in continuing the project. **[Drop me a line](mailto:olegstirbu@gmail.com)**.

Next Scifi Book

## **The No Popup movement**

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.

**\
My contribution**

Product strategy \
Visual Identity \
Product design \
Front-end

### **Year** 

2021

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2Fd0lFyBB6C8P1Lnxl92NyImgwACF2%2FIh1ix50lIiSyEFWCaeHf%2Fdf8b8390-25c7-4bff-be26-9afab9b3977b.jpg?alt=media&token=28221a0c-957f-49bf-b7bc-e48ba552ca7c","id":"df8b8390-25c7-4bff-be26-9afab9b3977b","width":2000,"height":1200,"filename":"CD Full Bleed.jpg","type":"image/jpeg","caption":"","border":false}]}
```

## **Good design is good business**

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.

## **What is Conversion Design**

It’s an **[online magazine](https://www.conversionde.com/magazine)** and **[newsletter](https://www.conversionde.com/subscribe-to-conversion-design)** that has weekly practical website design tips and case studies. For solo or indie founders.

## **What Conversion Design is not**

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.

## **Why me**

I worked 5 years at **[Trivago](https://www.trivago.com/)** 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.

## **Validating the idea**

There is an entire **[section on Indie Hackers](https://www.indiehackers.com/group/landing-page-feedback)** 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?!

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2Fd0lFyBB6C8P1Lnxl92NyImgwACF2%2FIh1ix50lIiSyEFWCaeHf%2F7c0da560-4650-4f39-afe0-bff73ec32758.jpg?alt=media&token=4ac1c08a-ba05-44a6-a476-aa28795930ca","id":"7c0da560-4650-4f39-afe0-bff73ec32758","width":2000,"height":1200,"filename":"CD Notion Plan.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%2Fd0lFyBB6C8P1Lnxl92NyImgwACF2%2FIh1ix50lIiSyEFWCaeHf%2F0cfa8248-1585-42cf-855e-6306a01c59ec.jpg?alt=media&token=12f8dda5-7987-4120-90c4-954024e55a75","id":"0cfa8248-1585-42cf-855e-6306a01c59ec","width":2000,"height":1200,"filename":"CD Subscribe.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%2Fd0lFyBB6C8P1Lnxl92NyImgwACF2%2FIh1ix50lIiSyEFWCaeHf%2F56284e71-576c-4479-a189-e1bd02bfdb02.jpg?alt=media&token=cf098603-db84-4eb8-af38-eeb4fa3912b2","id":"56284e71-576c-4479-a189-e1bd02bfdb02","width":2000,"height":1200,"filename":"CD Screens All.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%2Fd0lFyBB6C8P1Lnxl92NyImgwACF2%2FIh1ix50lIiSyEFWCaeHf%2Fa8e15999-405b-4e94-bd53-43b54056bed2.jpg?alt=media&token=634c92a5-556b-4538-a841-bf96235b51fc","id":"a8e15999-405b-4e94-bd53-43b54056bed2","width":2000,"height":1200,"filename":"cd zaps and mailer.jpg","type":"image/jpeg","caption":"","border":false}]}
```

## **The Process**

The first part and most important one is building a product people want. I started to brainstorm for **Who** this is, and **Why** 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.

#### **Wireframe**

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.

#### **Visual design**

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.

#### **Minimalistic 3D**

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.

Luckily there's a new tool called **[Spline](https://spline.design/)**. 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.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2Fd0lFyBB6C8P1Lnxl92NyImgwACF2%2FIh1ix50lIiSyEFWCaeHf%2F7f135eb7-15b4-4e45-8f6a-c320e7b76adf.jpg?alt=media&token=2ff62835-2e31-414e-9318-3cdd13c82a6a","id":"7f135eb7-15b4-4e45-8f6a-c320e7b76adf","width":2000,"height":1200,"filename":"cd wireframe.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%2Fd0lFyBB6C8P1Lnxl92NyImgwACF2%2FIh1ix50lIiSyEFWCaeHf%2F90158020-9191-4361-a38c-b3be185d65c5.jpg?alt=media&token=e18f83b2-6021-46b4-953a-4c9c09246205","id":"90158020-9191-4361-a38c-b3be185d65c5","width":2000,"height":1200,"filename":"CD Icons.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%2Fd0lFyBB6C8P1Lnxl92NyImgwACF2%2FIh1ix50lIiSyEFWCaeHf%2Fe2ec2e21-9db1-45bd-ae2c-d35c5de755a9.jpg?alt=media&token=f6ef97d4-69a4-453c-912f-470bb98153d6","id":"e2ec2e21-9db1-45bd-ae2c-d35c5de755a9","width":2000,"height":1200,"filename":"CD Spline.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%2Fd0lFyBB6C8P1Lnxl92NyImgwACF2%2FIh1ix50lIiSyEFWCaeHf%2Fd3570667-acb3-405f-a434-d52748d590f5.jpg?alt=media&token=fbf16e2d-f6d7-4d5f-a36f-50f35226e27b","id":"d3570667-acb3-405f-a434-d52748d590f5","width":2000,"height":1200,"filename":"CD Covers.jpg","type":"image/jpeg","caption":"","border":false}]}
```

## **Front-end in Webflow**

I know **[Webflow](https://webflow.com/)** 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 **[MailerLite](https://www.mailerlite.com/)**, **[Airtable](https://www.airtable.com/)** and **[Zapier](https://zapier.com/)** took some time to nail down.

Now, when a person subscribes or applies to a **[free redesign](https://www.conversionde.com/submit-your-website)** — I get a notification, add them to an air table database, and send them the welcome message automatically.

## **Marketing Plan**

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.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2Fd0lFyBB6C8P1Lnxl92NyImgwACF2%2FIh1ix50lIiSyEFWCaeHf%2F67ba2bd9-ac5a-40e3-a2bd-f8a6d5487a29.jpg?alt=media&token=3dd57cba-ae62-4d17-9c1c-370d3400577d","id":"67ba2bd9-ac5a-40e3-a2bd-f8a6d5487a29","width":2000,"height":1200,"filename":"CD Webflow and Splitbee.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%2Fd0lFyBB6C8P1Lnxl92NyImgwACF2%2FIh1ix50lIiSyEFWCaeHf%2F7320d638-0008-4381-bcd6-901369cafa0b.jpg?alt=media&token=98a82b29-4883-46c7-a1d3-9c0b057bf782","id":"7320d638-0008-4381-bcd6-901369cafa0b","width":2000,"height":1200,"filename":"CD Marketing Plan.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%2Fd0lFyBB6C8P1Lnxl92NyImgwACF2%2FIh1ix50lIiSyEFWCaeHf%2F852631cb-ed94-436c-bdd6-d998710eed9b.jpg?alt=media&token=7fb6b744-29fe-47b4-a6a0-819c00647c75","id":"852631cb-ed94-436c-bdd6-d998710eed9b","width":2000,"height":1200,"filename":"CD Mobile.jpg","type":"image/jpeg","caption":"","border":false}]}
```

## **Conclusion**

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.

Conversion Design

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2Fd0lFyBB6C8P1Lnxl92NyImgwACF2%2FUDCPJhodqeP34Bflxe0i%2F2feb7e60-9c4d-4c39-b2cc-ec439386904a.jpg?alt=media&token=3f04a461-7c02-4b9d-a0c6-7e62fe8352dd","id":"2feb7e60-9c4d-4c39-b2cc-ec439386904a","width":2000,"height":1200,"filename":"trv deals home cover.jpg","type":"image/jpeg","caption":"","border":false}]}
```

## **A good price**

What makes a bargain? Is it the cheapest thing? The quality might be bad. Is it the biggest discount? Maybe the price was not right in the beginning.\
In my role at Trivago, I joined a team that worked on this problem.

## **Challenge**

This initiative had various problems to solve — from defining a broader vision to small UI iterations. Our team was small with great impact and fast-paced.\
The design we were working on had the biggest impact on the company's business metrics.

### **My contribution**

Product strategy User research Product design

### **The team**

1 × product manager\
 1 × product designers \
4 × engineers \
1 × researcher \
1 × UX writer

### **Year**

2019

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2Fd0lFyBB6C8P1Lnxl92NyImgwACF2%2FUDCPJhodqeP34Bflxe0i%2F0bece1d4-2222-4205-8249-8916dfd93063.jpg?alt=media&token=d0510b84-b3b4-4c74-9a32-87ae1c6a61bc","id":"0bece1d4-2222-4205-8249-8916dfd93063","width":2000,"height":1200,"filename":"trv hotel cards skewed.jpg","type":"image/jpeg","caption":"","border":false}]}
```

## **The funnel**

When you compare hotels and prices — you have 2 macro steps:

* Check which hotel

* Check which room and deal for that hotel

For the first one, the decision is made based on location, dates, and price. The second phase is more narrow — check the room from different booking websites. Like  **[Booking.com](https://booking.com/)** or  **[Expedia.com](https://expedia.com/)**. You don't book on Trivago.\
At that time we knew Trivago had issues showing all the knowledge the company had of hotels. Our main persona are **Price Sensitive** people. Often the other personas were ignored.

## **UI elements audit**

I made a design audit of all elements related to deals in our Hotel Card. Over the years many cross-functional teams created A/B tests to improve the conversion rate. And metrics for their teams. This led to inconsistencies and a lack of a unified design language.

## **Hotel card sections**

Next, I defined macro areas of the **hotel results card** to define what type of content to expose. The status quo before that was to fill the available white space for any feature.\
An entire line on the card allowed for combining many flag elements. Or having a better description of why it's a great deal. Obvious — always wins.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2Fd0lFyBB6C8P1Lnxl92NyImgwACF2%2FUDCPJhodqeP34Bflxe0i%2F99beb361-e835-45a0-936b-752c7cb1ba27.jpg?alt=media&token=8617426b-d905-44fb-b625-7bc47323c675","id":"99beb361-e835-45a0-936b-752c7cb1ba27","width":2000,"height":1200,"filename":"trv deals funnel.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%2Fd0lFyBB6C8P1Lnxl92NyImgwACF2%2FUDCPJhodqeP34Bflxe0i%2F068365ef-f336-4e78-a549-7fdf534a5a8b.jpg?alt=media&token=cd4ec56b-53b7-45fc-b8fd-781e514222af","id":"068365ef-f336-4e78-a549-7fdf534a5a8b","width":2000,"height":1200,"filename":"trv deals sections sketch.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%2Fd0lFyBB6C8P1Lnxl92NyImgwACF2%2FUDCPJhodqeP34Bflxe0i%2F25119ad0-d455-4f83-8fa0-f6a4fcc3342f.jpg?alt=media&token=785c90e8-17c8-40ed-9616-281078257be1","id":"25119ad0-d455-4f83-8fa0-f6a4fcc3342f","width":2000,"height":1200,"filename":"trv deals hotel card.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%2Fd0lFyBB6C8P1Lnxl92NyImgwACF2%2FUDCPJhodqeP34Bflxe0i%2F383e5af9-48f7-4111-b793-61d25033f69a.jpg?alt=media&token=dbc02fd0-fe65-4b0f-ad29-8ea815c41ea4","id":"383e5af9-48f7-4111-b793-61d25033f69a","width":2000,"height":1200,"filename":"trv deals hotel card hover explanation.jpg","type":"image/jpeg","caption":"","border":false}]}
```

## **Cheapest price**

A significant percentage of our users want the cheapest deal possible. The green CTA on the card is a **recommended deal** based on Trivago's proprietary algorithm — good value for money.\
The team came up with a hypothesis to expose both types of deals. Cheapest and recommended. Then we prepared a prototype and a user research project.

## **Design sprints**

While polishing the hotel card — we worked on improving the experience. Once a visitor decided on a hotel. How do you compare deals from many booking websites and rooms?\
We organised design sprints as the decisions affected the broader Core Product department in the company. We invited "experts" that shared their perspectives from tech, product, content, and business areas.

#### **People book rooms**

Our main concept was based on **hotel rooms**. This fits our user's mental model. We grouped deals based on rooms. And expose detailed descriptions and images of those rooms.

#### **User Interview**

We had 10 participants for our usability test. In-house. I created a prototype in  **[Webflow](https://webflow.com/)** as it allowed higher fidelity of micro-interactions.\
The goal was to understand if users have a clear understanding of why we recommend a certain deal. And if they can find a cheaper alternative if they want.

**Positive feedback for the concept**

* Cheapest deal highlight

* Filtering options

* Included vs not amenities in rooms

**Improvement opportunities**

* Room details on hover were missed

* Sorting by price with room grouping was confusing

We iterated on the concept and created an A/B test to gather quantitative insights.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2Fd0lFyBB6C8P1Lnxl92NyImgwACF2%2FUDCPJhodqeP34Bflxe0i%2F0dfc994b-2e71-47f6-9a6c-3c5f59c5ab52.jpg?alt=media&token=0a9ee13b-afcc-46c1-a34b-61f1e4506fa9","id":"0dfc994b-2e71-47f6-9a6c-3c5f59c5ab52","width":2000,"height":1200,"filename":"trv deals design sprints.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%2Fd0lFyBB6C8P1Lnxl92NyImgwACF2%2FUDCPJhodqeP34Bflxe0i%2Fa06892df-877d-438a-b46c-1ac281df1a6c.jpg?alt=media&token=90889cd5-edd3-462b-a1b0-9495706722b7","id":"a06892df-877d-438a-b46c-1ac281df1a6c","width":2000,"height":1400,"filename":"trv deals sprint sketch.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%2Fd0lFyBB6C8P1Lnxl92NyImgwACF2%2FUDCPJhodqeP34Bflxe0i%2F3bb65746-7eca-43bb-b777-c906cf3d805b.jpg?alt=media&token=25426cab-f4c8-4b74-b64f-7b237e38e31c","id":"3bb65746-7eca-43bb-b777-c906cf3d805b","width":2000,"height":1200,"filename":"trv deals hotel all deals 2.jpg","type":"image/jpeg","caption":"","border":false}]}
```

## **Business Metrics**

As the project had many hypotheses. We validated them independently with A/B tests. The majority of the company metrics increased: Clicks and Clicks to Book. Also, I worked with the team on visual iterations to improve them even further.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2Fd0lFyBB6C8P1Lnxl92NyImgwACF2%2FUDCPJhodqeP34Bflxe0i%2F24e701c2-1195-4f4d-8ef8-9673f311615c.jpg?alt=media&token=06dc5c8f-b1e2-4dd9-9c23-5019def7b768","id":"24e701c2-1195-4f4d-8ef8-9673f311615c","width":2000,"height":1200,"filename":"trv deals old and new.jpg","type":"image/jpeg","caption":"","border":false}]}
```

## **Conclusion**

Because of the criticality of the changes we were about to make. We had to respect the mentality of Trivago as a company — incremental and quantifiable iterations. We didn't build a new game-changing redesign. More often than not, this is the right path. What gets measured — gets managed.\
\
Looking back, I would have taken advantage of the product's new testing capabilities. And tested more granular design variations at the same time.\
This would have allowed us to be more efficient and take a direction quicker.

Hotel Deals

*Designer's best-kept secret*. \
It's a headline for a popular image website. Or a UI kit for designers.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2Fd0lFyBB6C8P1Lnxl92NyImgwACF2%2Fdesign-for-absolute-beginners%2F83655036-04ae-431b-96d4-5d4b6854b3ec.jpg?alt=media&token=20efaaf1-09f1-4923-913b-c57b75050fc9","id":"83655036-04ae-431b-96d4-5d4b6854b3ec","width":2400,"height":1600,"filename":"david-werbrouck-5GwLlb-_UYk-unsplash.jpg","type":"image/jpeg","caption":"","border":false}]}
```

Using pre-made website or app templates might seem easy. But for a good layout, you must understand design decisions. Let me share the basics. \
After all, pre-processed food is always worse than a home-cooked meal.

## **Alignment**

You can't throw things at a page and hope they will arrange themselves. One basic principle you can use is **alignment**.

Alignment helps organize and unify content. Alignment creates a visual connection. It's also easier on your user's brain if used properly.

There are 3 basic alignment types. **Left-aligned**, **Centered**, and **Right-aligned**. \
Centered is the most boring one. It is also overused by new and non-designers. It's easy and cheap. Try to avoid it if possible.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2Fd0lFyBB6C8P1Lnxl92NyImgwACF2%2FdOzkrmr1gzXLqCZR70JC%2Fedb02f98-3d2f-4b94-8ec9-5d6f6fe5d7be.jpg?alt=media&token=017e37b7-3942-4e5e-aa69-08810b850b38","id":"edb02f98-3d2f-4b94-8ec9-5d6f6fe5d7be","width":1300,"height":800,"filename":"62487aeceab5c0e085ad7614_15.jpg","type":"image/jpeg","caption":"Avrio.com had the original design with centered text","border":false}]}
```

**Left-aligned** is arguably the most popular one. And for good reason.\
Most people read left to right. Left alignment helps them follow straight lines to the next section below.

Adding other elements aligned to the left, like **forms**, **images**, and **buttons, is also a good idea**. Not only blocks of text.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2Fd0lFyBB6C8P1Lnxl92NyImgwACF2%2FdOzkrmr1gzXLqCZR70JC%2Fc16a28b9-533a-499b-b4d6-7bd918031631.jpg?alt=media&token=8b807d50-6f07-4c56-9dd7-db47c40767d0","id":"c16a28b9-533a-499b-b4d6-7bd918031631","width":1300,"height":800,"filename":"62487b2b1fa3c003efdff544_16.jpg","type":"image/jpeg","caption":"Avrio.com current website has left aligned text","border":false}]}
```

That's not to say you can't have 2 or more left-aligned blocks. \
But be conscious that people will scan the first one and then switch to the second one on the right. That's how reading habits work.\
\
To keep things simple: use one left-aligned block. Imagine an invisible line.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2Fd0lFyBB6C8P1Lnxl92NyImgwACF2%2FdOzkrmr1gzXLqCZR70JC%2F09aa19f4-5f69-4b9b-8f31-1364a10251e4.jpg?alt=media&token=732589e4-f3dd-4977-8547-6c729dd16c98","id":"09aa19f4-5f69-4b9b-8f31-1364a10251e4","width":1300,"height":800,"filename":"62487b6b193daa6297b63bcb_17.jpg","type":"image/jpeg","caption":"Highnote examples with multiple left-aligned sections","border":false}]}
```

Use the ruler feature of your design tools like **Figma** or **Sketch** and snap elements to it precisely.\
\
Avoid **right-aligned text** for the time being. If you still have to, use short text. People will have to find the anchor point with their eyes while moving to the next line, and it's worse when you have long text.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2Fd0lFyBB6C8P1Lnxl92NyImgwACF2%2FdOzkrmr1gzXLqCZR70JC%2F7f7769f0-162d-40fc-b1e6-e9b32f09612b.jpg?alt=media&token=6732c411-70d7-45aa-a2ed-f2dfbdf827b6","id":"7f7769f0-162d-40fc-b1e6-e9b32f09612b","width":1300,"height":800,"filename":"62487dfc275ea377dbbc0bb1_Portfolio mockup.jpg","type":"image/jpeg","caption":"All examples of text alignment","border":false}]}
```

## **Grouping**

The most powerful thing you can do to create a good design is to group elements that are related. It seems common sense but is often forgotten.\
Not the fancy animations, the parallax effects, and blurry backgrounds. Grouping is more impactful.

Navigation links, feature lists, social proof cards, and so on — are grouped. It works.\
\
Humans have evolved to identify patterns. It gives us comfort and less cognitive load when getting new information.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2Fd0lFyBB6C8P1Lnxl92NyImgwACF2%2FdOzkrmr1gzXLqCZR70JC%2Fd916b624-cb94-4b28-9149-e48db6835060.jpg?alt=media&token=b31474f4-d8bf-4557-9470-141dc2d942b0","id":"d916b624-cb94-4b28-9149-e48db6835060","width":1300,"height":800,"filename":"624891873787c45c7c84aae1_grouping.jpg","type":"image/jpeg","caption":"Example from this website for grouped elements","border":false}]}
```

Grouping is done by: **closeness** and **similarity**.

**Closeness** is self-explanatory: organizing common elements together spatially. You can also group smaller groups.\
\
For example, a social card has an image of the person, the name and title, and a short blurb about your product. \
Many cards can be grouped in one social proof section. Use a **[maximum of 7 elements](https://en.wikipedia.org/wiki/The_Magical_Number_Seven,_Plus_or_Minus_Two)** in a group.

\
The **similarity** is grouping by the same *visual aesthetic*. \
All headlines or sub-headlines should have the same font size and weight. H1 and H2. Or images should have the same corner radius.

All this creates a sense of unity on your page. People need to learn how your sub-headline looks. Don't make them think more than they need.

## **Repetition**

Repetition is grouping's older brother.\
It's applying the same perspective of defining a thing once. Then duplicate it on different pages.\
\
Not only people don't have to learn what is the purpose of this element or text again. It also makes it easier to design or build pages. You need to design it once.

Once you designed your layout and style. Use the same one for other pages. Same spacing, same alignment (left one I hope), same size, and font-weight. \
If you're worried about being boring, the next point handles it.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2Fd0lFyBB6C8P1Lnxl92NyImgwACF2%2FdOzkrmr1gzXLqCZR70JC%2F941e7fb3-7f68-4f3d-966e-bad9b49293ed.jpg?alt=media&token=2d5d3d4c-73b5-44d4-9ba6-e19bb90159c4","id":"941e7fb3-7f68-4f3d-966e-bad9b49293ed","width":1300,"height":800,"filename":"624891f0fae4e9973394b463_repetition.jpg","type":"image/jpeg","caption":"Example by Appointlet. Repeating bullet points.","border":false}]}
```

## **Contrast**

Now that you learned all the rules. It's time to break them. You can only break the rules once you know them though.\
‍

**‍Design's goal is to grab someone's attention** and contrast is our best friend for that.\
When you want to bring focus to something. Make it stand out. And I mean by a lot. Be bold.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2Fd0lFyBB6C8P1Lnxl92NyImgwACF2%2FdOzkrmr1gzXLqCZR70JC%2Fcb1a8626-65a8-4b9c-8d4a-efa38af3c69c.jpg?alt=media&token=b6e3d985-6399-4293-8ff8-aa029f2b1af5","id":"cb1a8626-65a8-4b9c-8d4a-efa38af3c69c","width":1300,"height":800,"filename":"624893302e2fd9eb0f156629_gum.jpg","type":"image/jpeg","caption":"Gumroad example with bold typography and colors","border":false}]}
```

#### **Create contrast by**

* **Position**\
  Make it not aligned to other elements. But make sure it's obvious and not a rookie mistake. Miss-align by a lot.

* **Color**\
  Make it truly distinct and vibrant. Different than other elements on your page.

* **Size**\
  This is my favorite one. Make something 2 or 3 times the size that it should be. Or even more.

You can use all these methods combined once you get more experience.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2Fd0lFyBB6C8P1Lnxl92NyImgwACF2%2FdOzkrmr1gzXLqCZR70JC%2F04217bc8-d31a-44b6-b836-698b26175f01.jpg?alt=media&token=e375d782-681c-4a0b-ba26-03ce1c0438df","id":"04217bc8-d31a-44b6-b836-698b26175f01","width":1300,"height":800,"filename":"624895b422212c8ceb63b663_extreme contrast.jpg","type":"image/jpeg","caption":"The extreme case where all 3 methods of contrast are combined","border":false}]}
```

Here's an example of contrast usage by the team at MakeRoom. Notice the difference between the Headline and body text. The difference in alignment and color of buttons.

## **🐟 Just give me the fish**

Left-align your element on the page. Especially text. \
Group things that belong together logically like navigation buttons. \
Create one style for your elements: Headline has the same size, color, and style.

Grab attention by making one element stand out by breaking all these rules. Don't be timid about it.

Design for absolute beginners

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2Fd0lFyBB6C8P1Lnxl92NyImgwACF2%2FvEfK43JQcGTJ26b1MrJV%2F5b6e65e7-52a7-4646-b213-f4b433d5223e.jpg?alt=media&token=3523d03f-79da-4cf1-bbb0-f1aae6b05d0b","id":"5b6e65e7-52a7-4646-b213-f4b433d5223e","width":2000,"height":1200,"filename":"Salaries Home Cover.jpg","type":"image/jpeg","caption":"","border":false}]}
```

## **The Addiction**

"The three most harmful addictions are heroin, carbohydrates and a monthly salary" Nassim Taleb.\
Yet, employees need to track their salaries. HR and people managers need to change them. Payroll managers need to use salaries to create precise payslips. I helped the Personio product team in Payroll rebuild this requested feature by customers. Here's how we did it.

The goal of the project was to redesign and re-platform this legacy feature.\
This presented a set of challenges, and constraints but exciting opportunities.

### **My contribution**

Product strategy User research Product design

### **The team**

2 × product managers

1 × product designers

4 × engineers

1 × researcher

1 × UX writer

### **Year**

2022

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2Fd0lFyBB6C8P1Lnxl92NyImgwACF2%2FvEfK43JQcGTJ26b1MrJV%2Ff1fd84da-fb51-434b-9277-eecced2ade78.jpg?alt=media&token=4c02b3f9-53cf-4a70-b8d5-8836d05d24f0","id":"f1fd84da-fb51-434b-9277-eecced2ade78","width":2000,"height":1200,"filename":"Salaries Cover Full Bleed.jpg","type":"image/jpeg","caption":"","border":false}]}
```

## **Personio**

Personio is a complete HR platform. From recruiting to payroll. A B2B SaaS.\
It's targeted to different user personas: **HR managers**, **Employees**, **People managers**, **Recruiters**, and even **CEOs**.\
The core personas are **HR managers** however. And in my case — people that take care of employee's salaries as a Job-to-be-Done.

The platform offered a way to record compensations: Main salary, Bonuses. And other Recurring or Non-Recurring payments. But, it had a lot of improvement opportunities.\
In fact, the amount of expectation from the customers was a challenge in itself. We had to rank and focus our efforts on things that mattered.

## **Inflexible and prescriptive**

There are different types of compensation. And different "behaviors" of these compensations depending on the employment status. A "fixed salary" is taxed differently under parental leave for example. In Personio we offered a set of defined "terms" and "behavior" for compensations. However, there were too few, and couldn't be renamed or reconfigured.

## **New Conceptual Model**

How do you allow an HR intern to change someone's salary, without risking applying the wrong taxation?

I worked with the PM in my team to define a new **Product Conceptual Model** for individual compensation components.\
Tailored to different personas, with respective access rights.

* ‍**Payroll Experts**\
  For personas that have high expertise in running Payroll and understand taxation and government laws.

* **HR Leads**\
  Personas that define the customer's compensation strategy and benefits offered to all employees. With some expertise in payroll.

* **HR Managers or People Managers**\
  People that handle day-to-day tasks in changing employee salaries. For smaller companies, this is handled by a CEO or an intern mentioned above. Low to no expertise in payroll.

These "3 layers" had respective configuration areas of the product to define one compensation type. In Personio's back office for experts, Settings area for HR Leads. These changes happen very rarely.\
And last, in the Salary section of each employee - edits might happen even daily.

## **Payroll Experience Map**

Salary is one of the main "inputs" to run a correct Payroll. Personio is working on an automated solution and the quality of these inputs should be impeccable. No one likes to get the wrong salary and taxation. For configurations that matter it's done by experts. Besides salary entries, Payroll needs employee personal data and absences.

I worked on an extensive experience map. Of all the experiences and respective personas that created or modify data. It showed how different teams need to contribute seamlessly, to achieve the goal of automated payroll. Salary is only one part of the puzzle.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2Fd0lFyBB6C8P1Lnxl92NyImgwACF2%2FvEfK43JQcGTJ26b1MrJV%2Fbe6458e1-3d4c-4f4c-86ec-b5229bf0024a.jpg?alt=media&token=5e922e83-436a-4ea7-b115-deda7e8a99b3","id":"be6458e1-3d4c-4f4c-86ec-b5229bf0024a","width":2000,"height":1445,"filename":"Salaries Compensation Model.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%2Fd0lFyBB6C8P1Lnxl92NyImgwACF2%2FvEfK43JQcGTJ26b1MrJV%2F42d303d5-bc80-401d-98eb-2a281c1b1a77.jpg?alt=media&token=d9ba9e98-7c85-47d3-966e-7d11c0d8d7bb","id":"42d303d5-bc80-401d-98eb-2a281c1b1a77","width":2000,"height":1200,"filename":"Payroll Experience Diagram.jpg","type":"image/jpeg","caption":"","border":false}]}
```

## **Research interviews and synthesis**

We followed a habit of continuously interviewing customers. Once we booked a customer user different teams could ask questions relevant to our teams. In my case it was salary.

I was collaborating with the researcher to structure the interview script, take notes and of course, debrief on the findings. After 10 customer interviews, we started to see patterns and the most important pain points. Some examples:

* Can't have multiple "fixed salaries".

* Can't have more than 12 salaries per year.

* No idea what's the difference between recurring Bonus and normal recurring compensation.

* etc.

The main pain points were about the ability to have a more flexible configuration. This is where we anticipated that the new model would solve. It's flexible but with smart defaults.

Plus, I had a couple of customer feedback sources: research insights from user interviews, customer support reports, and sales department feedback. And our own internal HR peeps that use our own product.\
I synthesised all input under a big Notion board. Together with the team, applying some critical thinking, we ranked all pain points and focus areas. For our product roadmap.

## **‍ Competitive analysis**

As lead designer of the entire Payroll tribe. I was working on the new Personio Payroll experience.\
I worked on an extensive product Competitive Analysis of "how other products prepar data for payroll". Salary was not my main focus at that time but is one part of the equation.\
I found some interesting approaches and mental models from different companies. I analysed  **[Payfit](https://payfit.com/)**,  **[BambooHR](https://www.bamboohr.com/)**,  **[Gusto](https://gusto.com/)**,  **[HiBob](https://www.hibob.com/)** and  **[FactorialHR](https://factorialhr.com/)**.

The research suggested that we were going in the right direction as different countries and customers name salary lines differently. We nailed the foundation.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2Fd0lFyBB6C8P1Lnxl92NyImgwACF2%2FvEfK43JQcGTJ26b1MrJV%2Ff514ad46-daed-4c85-bc24-5f410fb52b63.jpg?alt=media&token=47256615-5818-4e47-8b61-63f29be393c3","id":"f514ad46-daed-4c85-bc24-5f410fb52b63","width":2000,"height":1200,"filename":"Salaries Pesonas.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%2Fd0lFyBB6C8P1Lnxl92NyImgwACF2%2FvEfK43JQcGTJ26b1MrJV%2F39fa04ea-8a7e-4944-a36f-4611888864a0.jpg?alt=media&token=4a345d2e-2881-4d15-aade-839158c4f0fa","id":"39fa04ea-8a7e-4944-a36f-4611888864a0","width":2000,"height":1200,"filename":"Salaries Miro Interview.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%2Fd0lFyBB6C8P1Lnxl92NyImgwACF2%2FvEfK43JQcGTJ26b1MrJV%2Fbc9560f5-d8f2-4fad-9b9b-745f80c322c5.jpg?alt=media&token=6538508c-04e5-412d-9a51-7f2fde4341a3","id":"bc9560f5-d8f2-4fad-9b9b-745f80c322c5","width":2000,"height":1200,"filename":"Salaries Competitive Analysis.jpg","type":"image/jpeg","caption":"","border":false}]}
```

## **Settings wireframe**

After the engineering team was on board with the new model and split of configurations. I worked on a wireframe to show how a user would change the settings. With different macro sections and salary grouping. Keep in mind that none of that was possible on the platform at that time. You couldn't even rename "Gym benefit" to something else.

The key moment is the "mapping". To stay compliant and have the correct taxation — you had to bind it to a specific compensation name. Like an alias.

The wireframe allowed us to have meaningful conversations with customers. And ask if we were going in the right direction. They loved it.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2Fd0lFyBB6C8P1Lnxl92NyImgwACF2%2FvEfK43JQcGTJ26b1MrJV%2Fced839c4-48c2-411e-90ef-7e3329886626.mp4?alt=media&token=7c7f3553-f71c-43a9-9add-2507cc7a8cf0","id":"ced839c4-48c2-411e-90ef-7e3329886626","width":2876,"height":1556,"filename":"Salary Wireframe.mp4","type":"video/mp4","caption":"","border":false}]}
```

## **UI iterations with smaller scope**

When we defined our team roadmap — we kept the wireframe concept as a vision. And started defining different steps to achieve it. This helped engineers scope precise user stories and sprint goals.

One of the first iterations was to redesign the Settings UI. And introduce crucial parts of the functionality that our users requested. Rename, Delete, Change Payout frequency, etc.

With each iteration, we would add extra features while doing usability tests.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2Fd0lFyBB6C8P1Lnxl92NyImgwACF2%2FvEfK43JQcGTJ26b1MrJV%2F0851dff7-97cc-48d9-8fc0-d71ab0b9f0ee.mp4?alt=media&token=6b6a4eed-5953-4967-82ef-6e4338346c54","id":"0851dff7-97cc-48d9-8fc0-d71ab0b9f0ee","width":2876,"height":1556,"filename":"Salary Settings UI.mp4","type":"video/mp4","caption":"","border":false}]}
```

## **Employee Salary UI**

What is important to employees while checking their salary? What about HR Managers? This is one of the challenges I had when designing the interface for more personas. Currently, Personio doesn't have a role-specific micro-frontend. We had to define one size that fits all.

Plus, if people use your product as their daily tool. All iterations need to be gradual and have feature parity.

From talks with our users, a common answer was: "I just want to see the salary".\
Dead simple answer on the surface. It means that we over-optimized for management. We introduced 3 macro sections:

* **Overview**\
  "Just see salary."

* **Annual Table**\
  Overview for insights.

* **Compensations**\
  For edit and management.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2Fd0lFyBB6C8P1Lnxl92NyImgwACF2%2FvEfK43JQcGTJ26b1MrJV%2F9a4a1b2f-58ef-425f-9ed3-f39c7314828a.jpg?alt=media&token=fbcb60bb-8411-4f8d-ba6c-a25d4d1d4cd4","id":"9a4a1b2f-58ef-425f-9ed3-f39c7314828a","width":2000,"height":1200,"filename":"Salaries Old UI.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%2Fd0lFyBB6C8P1Lnxl92NyImgwACF2%2FvEfK43JQcGTJ26b1MrJV%2Ffeb58db5-0081-4891-9864-c2e3894541c8.jpg?alt=media&token=6afef937-afb8-4cc9-817d-8d82647cc6cc","id":"feb58db5-0081-4891-9864-c2e3894541c8","width":2000,"height":1200,"filename":"Salaries New UI.jpg","type":"image/jpeg","caption":"","border":false}]}
```

## **Conclusion**

No one cares about salary management until something goes wrong. Once a month. Employees didn't get their well-deserved bonus. HR managers need to manage many tools to "run for correct data".

It's very satisfying to help people do their daily jobs easier and faster. This helps them focus on more meaningful things.

Once we have the foundation established, we can look into innovation opportunities. If combined with an automated Personio Payroll. Compensation growth graph, Net vs Gross salary, Integrate digital or PDF payslip, and many more.

Personio Salaries

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2Fd0lFyBB6C8P1Lnxl92NyImgwACF2%2Fyy7nAIq2cDjYIzIJSs9u%2Fa7a3973f-fe0c-404a-bfc7-2de47a8ea8ef.jpg?alt=media&token=67b00ec7-1551-488f-be8a-50a3d9a6f0c9","id":"a7a3973f-fe0c-404a-bfc7-2de47a8ea8ef","width":2000,"height":1200,"filename":"trivago apps home cover.jpg","type":"image/jpeg","caption":"","border":false}]}
```

## **On the verge of failure**

After a year of hard work with a radical redesign — we almost reverted to the old version. The business KPIs were way off.\
With confidence and quick iteration we managed to fix it, and set an example of innovation in the company. Here’s what happened.

\
In **2018** I worked on a redesign of the Trivago iOS and Android app.\
Used by millions.\
As a **lead product designer**, it was a big and exciting project. It gave me and the team the opportunity to build it from scratch  and rethink holistically the product. And flow.

### **My contribution**

Product strategy User research Product design

### **The team**

4 × Product Owners 4 × Product Designer 16 × Engineers

### **Year**

2018

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2Fd0lFyBB6C8P1Lnxl92NyImgwACF2%2Fyy7nAIq2cDjYIzIJSs9u%2Fd3cfcd9a-6c8a-48e9-b987-0e063fd522d6.jpg?alt=media&token=52a792b9-c126-465b-930b-547461c5f4cf","id":"d3cfcd9a-6c8a-48e9-b987-0e063fd522d6","width":2000,"height":1200,"filename":"trivago home cover.jpg","type":"image/jpeg","caption":"","border":false}]}
```

## **The vision**

‍\*\*[In our pitch](https://tech.trivago.com/post/2018-11-19-trivago-new-app/)\*\*, we outlined the direction of the new product.\
We did a vision discovery exercise for a couple of weeks. It allowed us to get buy-in from the CEO and CPO.\
My specific role was to create a complete flow and a high-fidelity prototype that unified feature and visionary ideas from the team.\
I wrote about it in **[Trivago’s Tech blog](https://tech.trivago.com/post/2018-11-19-trivago-new-app/)**.

‍

## **What is Trivago**

Trivago's business model — a metasearch that compares deals from different advertisers (like Expedia or Booking.com). You don't book on Trivago.\
In a complete “book a hotel” JTBD — Trivago focuses on "Search and Compare" step.\
But also explore boundaries in a smart way.

Goals of the project

* Increase Trivago's product offering depth. Instead of sending travellers to advertisers — explore the quality of these visits and booking conversion. From quantity to quality of leads.

* Improve or maintain business KPIs. The team could deprioritise short-term revenue metrics. Clicks volume. But we were still not allowed to go below a reasonable threshold.

* Give more value to travelers. What is the reason to download and keep the app?! Instead of using the mobile web version.

* Integrate well with Apple and Google platforms. Respect the patterns and guidelines to make users feel at home. At the same time, maintain the company's brand.

* Improve the Information Architecture. To be future-proof and allow new features. Something that we always struggled with in the old app. New features had to be "squeezed" in the wrong place and wrong user flow.\
  ‍

## **The Team**

Around 40 people. Divided into cross-functional teams. We included one: **Product Owner**, **Product Designer**, **User Researcher**, **iOS Engineer**, **Android Engineer**, and **QA**.\
‍\
The main features were already defined during the vision sessions and design sprints — the teams already:

* Analysed the old app and identified product and usability issues. Using Trivago personas developed by User ResearchCompetitive Analysis.

* Conceptualised improvements and new features.

* This time the cross-functional teams had to take ownership of individual features. And create a concept with “realistic constraints”. From a technical and timeline point of view.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2Fd0lFyBB6C8P1Lnxl92NyImgwACF2%2Fyy7nAIq2cDjYIzIJSs9u%2F46bccf93-f46c-4f63-9f31-7a976822119c.jpg?alt=media&token=13ff1b44-cc3c-4d41-8dc7-dc364dd78074","id":"46bccf93-f46c-4f63-9f31-7a976822119c","width":2000,"height":1200,"filename":"trivago app kickoff.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%2Fd0lFyBB6C8P1Lnxl92NyImgwACF2%2Fyy7nAIq2cDjYIzIJSs9u%2F2fc05e54-da17-4d2a-b037-e1311ddb46d5.jpg?alt=media&token=88a120c6-a610-495c-b7df-57dfff5d8e57","id":"2fc05e54-da17-4d2a-b037-e1311ddb46d5","width":2000,"height":1200,"filename":"trvivago business position.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%2Fd0lFyBB6C8P1Lnxl92NyImgwACF2%2Fyy7nAIq2cDjYIzIJSs9u%2Fd6b4df63-652f-4102-a396-b0ad95f57597.jpg?alt=media&token=f784f949-76bd-4f5a-81d8-cb697046adfa","id":"d6b4df63-652f-4102-a396-b0ad95f57597","width":2000,"height":1200,"filename":"trivago native wireframe.jpg","type":"image/jpeg","caption":"","border":false}]}
```

## **My role**

As a lead product designer my role was to:

* Coordinate mobile designers. 4 at that time. They were working with their "cross-functional teams"

* Represent design in key stakeholder meetings.

* Work on a new design language and system.

* Be part of the "Search results", "Hotel details" and "Deals" teams. As an individual contributor product designer. This is the most critical flow from a business perspective — the booking funnel.

## **Prototype and User Research**

Teams worked to align on the correct flow from one feature to another. As a result, I created a low-fidelity prototype.\
This prototype had 2 main purposes:

* Visualise the flow and Information Architecture of the app. So that the teams could adjust, redesign or remove features.

* As a deliverable for our first in-house user test. To gather insights as soon as possible.

#### **Main Learnings**

User test results were very comprehensive about each feature flow. The main learnings were the following:

* There were no severe usability issues.

* The transition from the app to the advertiser website was confusing.

* Hotel rating on the card was not visible.

* Calendar caused confusion among some users.

‍

Some issues were attributed to the fidelity of the prototype — no colors, no calendar transitions. And the nature of the product — we send people to another website.\
But we iterated further based on the learnings that made sense.

‍

We built a pre-alpha version. Made using platform native components. Engineers focused on the functionality. Without waiting for pixel perfect UIs from designers.\
At the same time, the design team had time to work on the new design language and elements.\
‍\
With the build we added another layer of fidelity. With colors and refined interactions, compared to the previous prototype, made in InVision.\
We ran another user test. An unmoderated one with more people. Users could navigate and interact more freely.\
‍\
The main learnings from the pre-alpha research:

* No major usability issues were uncovered at this stage

* Minor usability issues with Price Slider and Filter selection

* Mixed reaction in regards to the booking flow and how it aligned with user's initial expectations.

We refined it further. We anticipated that there would be a shift in how Trivago was perceived. Given the new flow. More steps and content. But we assumed we were heading in the right direction as this was one of goals — have better-informed users. Resulting in a more qualitative conversion.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2Fd0lFyBB6C8P1Lnxl92NyImgwACF2%2Fyy7nAIq2cDjYIzIJSs9u%2F5ab2b06c-2990-435a-be66-2ec74fcf208f.jpg?alt=media&token=6098a50f-8673-493f-9b45-182a70aca0b9","id":"5ab2b06c-2990-435a-be66-2ec74fcf208f","width":2000,"height":1000,"filename":"trivago usability test.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%2Fd0lFyBB6C8P1Lnxl92NyImgwACF2%2Fyy7nAIq2cDjYIzIJSs9u%2F4b9c2305-a341-4b28-af68-099bde61dd43.jpg?alt=media&token=68e9138d-5224-41bf-ad6d-53f4ce00ae00","id":"4b9c2305-a341-4b28-af68-099bde61dd43","width":2000,"height":1200,"filename":"trivago research graph.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%2Fd0lFyBB6C8P1Lnxl92NyImgwACF2%2Fyy7nAIq2cDjYIzIJSs9u%2F7fa5296d-52cf-4ac8-b1c7-7ad93ca10743.jpg?alt=media&token=a65d2c59-6a84-43f0-bdc0-24ec89290540","id":"7fa5296d-52cf-4ac8-b1c7-7ad93ca10743","width":2000,"height":1200,"filename":"trivago sketching.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%2Fd0lFyBB6C8P1Lnxl92NyImgwACF2%2Fyy7nAIq2cDjYIzIJSs9u%2Fa85adf5c-b7af-47f1-b903-37ac9ba64b82.jpg?alt=media&token=59e11970-50ff-4f07-a716-3101b51e7934","id":"a85adf5c-b7af-47f1-b903-37ac9ba64b82","width":2000,"height":1200,"filename":"trivago alpha build.jpg","type":"image/jpeg","caption":"","border":false}]}
```

## **Booking Flow and Hotel Card**

I was the "design owner" or IC of the booking funnel. It's the crucial funnel from the business point of view.

The booking funnel has the following screens:

* Results with hotel cards

* Hotel details

* Child content for hotel details

* Deals

* Deal summary

* Transition to advertiser

We used generative research — as the basis for prioritizing the content in the flow.

With the “hotel card” users always stuggled with touch areas in the old app — below the recommended 44 pt.\
We went in a radical direction and made the whole card one tappable area. Now, we could take advantage of the hotel details screen that was not there before.\
\
Second level content was exposed in hotel details. As an overview — ratings, amenities, location, etc.  \
And granular content had a dedicated “child” screen.\
We followed our top-level product direction — give users the right information at the right time.

## **First Release**

We shipped the new Android app on Google Store. With a 5% A/B test.\
The final design language was not refined and the tech side not optimized. But wanted to gain quantitative insights as soon as possible.

‍

## **Business Metrics**

Metrics we use in the company were: **Book Conversion** (our new reference), **Clicks Conversion** and **Content Penetration**.\
The KPI numbers initially were bad.\
We forecasted drops in our short term conversion — **Clicks**. Now, we don’t send people immediately with a prominent button.\
To our surprise also the Booking Conversion dropped way below our expectations.\
‍\
When we analyzed the penetration we noticed there’s a problem on the Search results screen too.\
Even though the card is one tappable area — fewer people proceeded to the next screen. With each step in our funnel — less and less people converted, dropping almost by half each time.

‍

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2Fd0lFyBB6C8P1Lnxl92NyImgwACF2%2Fyy7nAIq2cDjYIzIJSs9u%2Fef97ae83-5d57-41e0-93fc-4d5970f14ae9.jpg?alt=media&token=6d36a0f6-a2fb-4325-beb0-56b210c2f3cc","id":"ef97ae83-5d57-41e0-93fc-4d5970f14ae9","width":2000,"height":1200,"filename":"trivago first funnel.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%2Fd0lFyBB6C8P1Lnxl92NyImgwACF2%2Fyy7nAIq2cDjYIzIJSs9u%2Fc5ebfba7-2d44-4bba-a2cf-1c817bf9a823.jpg?alt=media&token=ed784fc9-ff21-4825-887c-e387ce1d7dc7","id":"c5ebfba7-2d44-4bba-a2cf-1c817bf9a823","width":2000,"height":1200,"filename":"trivago metrics bad.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%2Fd0lFyBB6C8P1Lnxl92NyImgwACF2%2Fyy7nAIq2cDjYIzIJSs9u%2F7d9300d7-ea7a-4d9f-9426-0bb2fcab99d3.jpg?alt=media&token=09c182c7-18ea-4858-8416-c3f06f042723","id":"7d9300d7-ea7a-4d9f-9426-0bb2fcab99d3","width":2000,"height":1200,"filename":"trivago heatmap.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%2Fd0lFyBB6C8P1Lnxl92NyImgwACF2%2Fyy7nAIq2cDjYIzIJSs9u%2Fc1e458b8-17b1-48a5-b397-d62d0bbe8ff9.jpg?alt=media&token=705da1da-7886-4590-b4a2-edd94a623de5","id":"c1e458b8-17b1-48a5-b397-d62d0bbe8ff9","width":2000,"height":1200,"filename":"trivago improved flow.jpg","type":"image/jpeg","caption":"","border":false}]}
```

## **Fixing with design**

Iterations that addressed these issues:

* Added a stronger tap affordance to the hotel card.

* Created 2 paths — for people that want to discover more hotel details. And for others that just want to go to the offer.

* Made the flow shorter.

* Removed some steps in the funnel and others optional. Especially successful was my proposal to make the “deals screen” optional. And integrate it in “hotel details”.

‍

We managed to achieve the same KPI as the old app. Surpassed it in some areas. Even if the old app was refined for years to achieve the same goals.\
Also, now have a product tailored to our “branded users”. flexible to add more features. And that does justice to all the content we have about hotels.\
‍\
Maybe the apps team can say more about what they like about our new release. With bits of comparison with the older version:

```cv
vimeo
{"url":"https://vimeo.com/346405740","width":426,"height":240,"thumbnail":"https://i.vimeocdn.com/video/796448621-a719d04dd7b0db8a439640ce8e7004d3c4355a87f0804bb052394b1dce418d5f-d_295x166"}
```

## **Conclusion**

The project was very successful. Presented often in our company All hands as an example of innovation in product development.

Looking back I still believe we could have improved some things:

* Focus the team efforts only on our main flow as the first MVP iteration. We would have gained learnings quicker in things that matter most.

* Testing early in a real life scenario. With our users. It helped tremendously. Even if our team members, me included, were skeptical in releasing something unpolished.

* Cross-functional groups that worked in parallel made sense. But the alignment could have been better. Often the complete flow was split between teams. Then adjusted at a later stage with some compromises.

‍\
Download the app from **[App Store](https://apps.apple.com/us/app/id376888389)** for iOS and **[Google Play](https://play.google.com/store/apps/details?id=com.trivago)** for Android.