## What is Urbaneo?

Urbaneo is a fictional web app designed to help municipalities integrate sustainability into urban development projects.

The project explores in detail the steps involved in creating Urbaneo, from user research to UX/UI design and the creation of a design system. It emphasizes the use of artificial intelligence to simulate development scenarios and analyse environmental impacts.

## Links

* [Project Presentation](https://drive.google.com/file/d/1sG0EEsbMLZdvA41wzVvDPPIhY4vfpCft/view?usp=sharing)

* [Figma file](https://www.figma.com/design/46SiCIvG8pdih1Jsxhgkrn/Dossier-de-recherche?node-id=0-1&t=tkeLrMoPzKM7GxOS-1)

* [Design System Documentation](https://zeroheight.com/21434df19/p/6568ff-scutum)

If you like my work, you can find me on [matlfb@mastodon.design](https://mastodon.design/@matlfb). I’m also a freelance designer, and you can reach me at `contact@matlfb.com`. I’m currently accepting new clients, and would be thrilled to help bring your projects to life!

Urbaneo

## The virtuous cryptocurrency

This UI project was undertaken as part of a class project aimed at honing our showcase website design skills.

It focused exclusively on the user interface aspect, demonstrating the application of design principles to enhance the visual appeal and usability of the website.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FXVTYWeVDPGX3IYUJCyNNoHrUNxh2%2FB571HPNnTzYCtPO3jndr%2F3f00a761-4116-4aa1-bbf0-9c8ba54beb7d.png?alt=media&token=9ee5c3d2-15c8-4137-bfbb-fe10280a440f","id":"3f00a761-4116-4aa1-bbf0-9c8ba54beb7d","width":2880,"height":9013,"filename":"Gayacoin.png","type":"image/png","caption":"","border":false}]}
```

If you like my work, you can find me on [matlfb@mastodon.design](https://mastodon.design/@matlfb). I’m also a freelance designer, and you can reach me at `contact@matlfb.com`. I’m currently accepting new clients, and would be thrilled to help bring your projects to life!

Gayacoin

## A new way to cook

This school project is centered on the design of the *Petit Chef* cooking app, aimed at amateur cooks who want to exchange and share recipes in a safe and accessible environment. It’s my first UI design project.

As part of a class assignment, I developed a user interface from concept to final design, focusing on both aesthetic appeal and user experience.

The app offers a vegetarian option and facilitates the sharing of culinary knowledge, reflecting our commitment to simplicity and accessibility. To ensure precision and efficiency, I collaborated with a professional team throughout the process, focusing solely on creating an engaging user experience, without incorporating UX research phases.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FXVTYWeVDPGX3IYUJCyNNoHrUNxh2%2Ft4IbS78Qhj4wjKv0IaNC%2F2aead3a3-8b72-428d-a356-20eb2d1676b6.png?alt=media&token=3338e2cb-fda7-41f8-acd1-6c216e912184","id":"2aead3a3-8b72-428d-a356-20eb2d1676b6","width":780,"height":1788,"filename":"13 Pro - 1.png","type":"image/png","caption":"","border":false},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FXVTYWeVDPGX3IYUJCyNNoHrUNxh2%2Ft4IbS78Qhj4wjKv0IaNC%2F2cc40487-773e-4b6a-af82-70a487ae8b0a.png?alt=media&token=640b0274-d8aa-461c-a883-311ea8ec76ce","id":"2cc40487-773e-4b6a-af82-70a487ae8b0a","width":780,"height":3098,"filename":"13 Pro - 4.png","type":"image/png","caption":"","border":false},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FXVTYWeVDPGX3IYUJCyNNoHrUNxh2%2Ft4IbS78Qhj4wjKv0IaNC%2Fbb05f39a-e88d-417a-92ee-bce803acbe18.png?alt=media&token=2c862924-257e-462f-bd55-c3840c99e139","id":"bb05f39a-e88d-417a-92ee-bce803acbe18","width":780,"height":1690,"filename":"13 Pro - 5.png","type":"image/png","caption":"","border":false},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FXVTYWeVDPGX3IYUJCyNNoHrUNxh2%2Ft4IbS78Qhj4wjKv0IaNC%2Fe030ece3-88b9-4634-9b8a-9ac62b3a8f01.png?alt=media&token=eabe9be9-1277-476f-8216-2b6164843301","id":"e030ece3-88b9-4634-9b8a-9ac62b3a8f01","width":780,"height":1788,"filename":"13 Pro - 6.png","type":"image/png","caption":"","border":false},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FXVTYWeVDPGX3IYUJCyNNoHrUNxh2%2Ft4IbS78Qhj4wjKv0IaNC%2Fbf4f837d-3bca-414e-8547-0267c4cdc429.png?alt=media&token=9ff48bee-c2a8-4218-8c3c-07f535c533dd","id":"bf4f837d-3bca-414e-8547-0267c4cdc429","width":780,"height":1690,"filename":"13 Pro - 7.png","type":"image/png","caption":"","border":false},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FXVTYWeVDPGX3IYUJCyNNoHrUNxh2%2Ft4IbS78Qhj4wjKv0IaNC%2F5d9b82db-29d5-4d02-91d3-929bca8e8c97.png?alt=media&token=6332273e-1045-4c61-85cd-dd065523245f","id":"5d9b82db-29d5-4d02-91d3-929bca8e8c97","width":780,"height":3850,"filename":"13 Pro - 8.png","type":"image/png","caption":"","border":false}]}
```

If you like my work, you can find me on [matlfb@mastodon.design](https://mastodon.design/@matlfb). I’m also a freelance designer, and you can reach me at `contact@matlfb.com`. I’m currently accepting new clients, and would be thrilled to help bring your projects to life!

Petit chef

For several months now, I have been passionate about decentralized social networks

> A federated social network is a platform composed of independent servers that communicate with each other using common protocols. Unlike traditional centralized social networks, where all data and interactions are managed by a single company, federated networks allow users to interact across different servers while maintaining control over their own data and communities. This structure promotes decentralization, giving users more freedom and autonomy.

I started with Mastodon, and then the Pixelfed network caught my attention. However, I noticed that the UI was somewhat outdated, so I decided to redesign Pixelfed in my own way for a more modern user experience.

Here is what Pixelfed currently looks like:

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FXVTYWeVDPGX3IYUJCyNNoHrUNxh2%2FxnAiidtHeFkbOxlNLw1b%2Fa77f18d5-28e4-40fd-90fb-6abcfe4c53a6.png?alt=media&token=b01eb350-ccea-4d91-8ddf-be66bf4f50b1","id":"a77f18d5-28e4-40fd-90fb-6abcfe4c53a6","width":2720,"height":2062,"filename":"Screenshot 2024-11-07 at 3.46.16 PM.png","type":"image/png","caption":"","border":false},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FXVTYWeVDPGX3IYUJCyNNoHrUNxh2%2FxnAiidtHeFkbOxlNLw1b%2F3989713e-7754-472d-bcda-5ebcfcc9a343.png?alt=media&token=4ce84604-1bdb-4a93-a5bc-93b2057cf0b6","id":"3989713e-7754-472d-bcda-5ebcfcc9a343","width":2720,"height":2062,"filename":"Screenshot 2024-11-07 at 3.46.24 PM.png","type":"image/png","caption":"","border":false},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FXVTYWeVDPGX3IYUJCyNNoHrUNxh2%2FxnAiidtHeFkbOxlNLw1b%2Ffb252990-5154-49ef-9a58-ad3674744b99.png?alt=media&token=059d1f3a-6bc1-4e9c-964b-65aa9dbd5876","id":"fb252990-5154-49ef-9a58-ad3674744b99","width":2720,"height":2062,"filename":"Screenshot 2024-11-07 at 3.46.31 PM.png","type":"image/png","caption":"","border":false},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FXVTYWeVDPGX3IYUJCyNNoHrUNxh2%2FxnAiidtHeFkbOxlNLw1b%2F7fc2e456-6cec-4c6d-ab99-e388f9b62126.png?alt=media&token=d3217651-ef9d-436a-ba38-5b7f0ecc59b7","id":"7fc2e456-6cec-4c6d-ab99-e388f9b62126","width":2720,"height":2062,"filename":"Screenshot 2024-11-07 at 3.46.43 PM.png","type":"image/png","caption":"","border":false},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FXVTYWeVDPGX3IYUJCyNNoHrUNxh2%2FxnAiidtHeFkbOxlNLw1b%2Feade04d7-233d-4d19-acf4-791e454a1a61.png?alt=media&token=faa7b861-ddf3-4ddc-aa8d-38014535127f","id":"eade04d7-233d-4d19-acf4-791e454a1a61","width":2720,"height":2062,"filename":"Screenshot 2024-11-07 at 3.46.49 PM.png","type":"image/png","caption":"","border":false}]}
```

## 1. UI review

First, I conducted a UI review of the existing platform. I annotated the elements that seemed odd or in need of improvement.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FXVTYWeVDPGX3IYUJCyNNoHrUNxh2%2FxnAiidtHeFkbOxlNLw1b%2F75b565f7-8045-44b7-b798-51ef4c501153.png?alt=media&token=d17be196-2c3d-46e6-92ff-047951eb7f55","id":"75b565f7-8045-44b7-b798-51ef4c501153","width":1414,"height":992,"filename":"image 1.png","type":"image/png","caption":"","border":false},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FXVTYWeVDPGX3IYUJCyNNoHrUNxh2%2FxnAiidtHeFkbOxlNLw1b%2F9d37c48f-e8c9-40dd-b4ef-0fcc9b2a21ea.png?alt=media&token=5abb4b4f-68d1-4727-82ef-9942f1a0f164","id":"9d37c48f-e8c9-40dd-b4ef-0fcc9b2a21ea","width":1414,"height":992,"filename":"image 2.png","type":"image/png","caption":"","border":false},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FXVTYWeVDPGX3IYUJCyNNoHrUNxh2%2FxnAiidtHeFkbOxlNLw1b%2Fe4fb9a9c-ff76-4a60-b8a0-678c74df2ce2.png?alt=media&token=be53687b-c296-4670-96b3-af4020cb23be","id":"e4fb9a9c-ff76-4a60-b8a0-678c74df2ce2","width":1414,"height":992,"filename":"image 3.png","type":"image/png","caption":"","border":false},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FXVTYWeVDPGX3IYUJCyNNoHrUNxh2%2FxnAiidtHeFkbOxlNLw1b%2Fc43b8cf1-d5d8-4979-b284-f5c19da2f5d5.png?alt=media&token=9a8bb4c4-734c-43f6-979a-c1f5cad6fd5d","id":"c43b8cf1-d5d8-4979-b284-f5c19da2f5d5","width":1414,"height":992,"filename":"image 4.png","type":"image/png","caption":"","border":false},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FXVTYWeVDPGX3IYUJCyNNoHrUNxh2%2FxnAiidtHeFkbOxlNLw1b%2F5dd6b1fd-891b-4534-906d-fbc50cbc2722.png?alt=media&token=c3e70294-6890-4455-a7c1-77e18f0da9fa","id":"5dd6b1fd-891b-4534-906d-fbc50cbc2722","width":1415,"height":992,"filename":"image 5.png","type":"image/png","caption":"","border":false},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FXVTYWeVDPGX3IYUJCyNNoHrUNxh2%2FxnAiidtHeFkbOxlNLw1b%2Fa71c29fc-21ba-4af4-ab33-3382d8f94c7d.png?alt=media&token=86ace298-58ca-42e2-8f93-9afbfcd1ba36","id":"a71c29fc-21ba-4af4-ab33-3382d8f94c7d","width":1414,"height":992,"filename":"image 6.png","type":"image/png","caption":"","border":false},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FXVTYWeVDPGX3IYUJCyNNoHrUNxh2%2FxnAiidtHeFkbOxlNLw1b%2F0712d2d3-970c-481b-87ba-c320ff7cddcf.png?alt=media&token=278c5c4a-12e5-414a-991c-28c3332e9098","id":"0712d2d3-970c-481b-87ba-c320ff7cddcf","width":1414,"height":992,"filename":"image 7.png","type":"image/png","caption":"","border":false},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FXVTYWeVDPGX3IYUJCyNNoHrUNxh2%2FxnAiidtHeFkbOxlNLw1b%2Fe17a2fc5-6529-433e-a526-74103b645c28.png?alt=media&token=a9ef9f92-b2c2-41d2-bbd9-ebe9539c6a78","id":"e17a2fc5-6529-433e-a526-74103b645c28","width":1414,"height":992,"filename":"image 10.png","type":"image/png","caption":"","border":false}]}
```

## 2. Drafts & Wireframing

Then, I iterated on the look I wanted to see in the application, taking into account the reviews conducted earlier.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FXVTYWeVDPGX3IYUJCyNNoHrUNxh2%2FxnAiidtHeFkbOxlNLw1b%2F89809aff-0c38-47b2-8997-7695b4237a5d.png?alt=media&token=adb12a51-7c32-4e46-89b5-69ca1d0e5086","id":"89809aff-0c38-47b2-8997-7695b4237a5d","width":1414,"height":992,"filename":"image 11.png","type":"image/png","caption":"","border":false},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FXVTYWeVDPGX3IYUJCyNNoHrUNxh2%2FxnAiidtHeFkbOxlNLw1b%2Faecc994d-bbd1-4397-a992-95999f39233f.png?alt=media&token=f0e70950-27e7-4c43-a66d-93d4b2b638fb","id":"aecc994d-bbd1-4397-a992-95999f39233f","width":1414,"height":992,"filename":"image 12.png","type":"image/png","caption":"","border":false}]}
```

## 3. Designing in Figma

During the design phase, I noticed that some ideas I had during the wireframing stage were not as relevant as I initially thought. I challenged those ideas and proposed possible alternatives. The responsiveness of the content, as well as the different photo/video formats, were also crucial steps, as some users post in square format, others in 9:16 or 16:9. Everything needed to be consistent.

The motivations behind this redesign were mainly to achieve better consistency across pages, a cleaner design, and improved usability. I also made sure that the design was easily resizeable/responsive.

I added vibrant colours to make the application more attractive and used rounded corners to give it a warmer feel. The goal was to transition from a more technical approach to Instagram to a more mainstream platform, open to all types of audiences.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FXVTYWeVDPGX3IYUJCyNNoHrUNxh2%2FxnAiidtHeFkbOxlNLw1b%2Fa9db7c8a-b7f4-45a8-af7a-467921e03117.png?alt=media&token=b91c9d78-0f8d-4a02-b878-31841751a666","id":"a9db7c8a-b7f4-45a8-af7a-467921e03117","width":2880,"height":2048,"filename":"Home alt.png","type":"image/png","caption":"","border":false},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FXVTYWeVDPGX3IYUJCyNNoHrUNxh2%2FxnAiidtHeFkbOxlNLw1b%2F81910927-0bf0-403e-b1e9-bcf0c7f1e172.png?alt=media&token=2ecbe61f-955e-4bcb-bbd0-f1acca456444","id":"81910927-0bf0-403e-b1e9-bcf0c7f1e172","width":2880,"height":2048,"filename":"Home alt-1.png","type":"image/png","caption":"","border":false},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FXVTYWeVDPGX3IYUJCyNNoHrUNxh2%2FxnAiidtHeFkbOxlNLw1b%2F9c48e6f7-a151-4347-b719-0ff79832b982.png?alt=media&token=36148255-6513-4941-84c0-e17749cd3d20","id":"9c48e6f7-a151-4347-b719-0ff79832b982","width":2880,"height":2048,"filename":"Explore.png","type":"image/png","caption":"","border":false},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FXVTYWeVDPGX3IYUJCyNNoHrUNxh2%2FxnAiidtHeFkbOxlNLw1b%2F8e2e4a38-c5d5-4123-be2c-1c110a2b0265.png?alt=media&token=3430bad6-f9c8-457a-b1c2-296ab7a703af","id":"8e2e4a38-c5d5-4123-be2c-1c110a2b0265","width":2880,"height":2048,"filename":"Explore-1.png","type":"image/png","caption":"","border":false},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FXVTYWeVDPGX3IYUJCyNNoHrUNxh2%2FxnAiidtHeFkbOxlNLw1b%2F7efe6395-f6ea-4fd7-adb3-ca201ad24986.png?alt=media&token=a3799d76-abc1-45df-b296-076e287ec982","id":"7efe6395-f6ea-4fd7-adb3-ca201ad24986","width":2880,"height":2048,"filename":"Notifications.png","type":"image/png","caption":"","border":false},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FXVTYWeVDPGX3IYUJCyNNoHrUNxh2%2FxnAiidtHeFkbOxlNLw1b%2F9ddda8b0-b677-4617-866f-c1c118f355d0.png?alt=media&token=c0ff921d-b2cf-4155-9071-fe646d5c08d7","id":"9ddda8b0-b677-4617-866f-c1c118f355d0","width":2880,"height":2048,"filename":"Direct messages.png","type":"image/png","caption":"","border":false},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FXVTYWeVDPGX3IYUJCyNNoHrUNxh2%2FxnAiidtHeFkbOxlNLw1b%2Fc12d6e07-c93a-45aa-903f-bb33c2c02996.png?alt=media&token=6ccb1a58-e4c8-481b-870b-8f5e34a55227","id":"c12d6e07-c93a-45aa-903f-bb33c2c02996","width":2880,"height":2048,"filename":"Profile.png","type":"image/png","caption":"","border":false}]}
```

If you like my work, you can find me on [matlfb@mastodon.design](https://mastodon.design/@matlfb). I’m also a freelance designer, and you can reach me at `contact@matlfb.com`. I’m currently accepting new clients, and would be thrilled to help bring your projects to life!

Pixelfed

Open to freelance collaborations. If you’re interested, feel free to email me at contact@matlfb.com. I’d be glad to help!