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

ux/ui designer

The Voltaire Certification is an assessment that measures proficiency in French language and spelling, evaluating a candidate’s ability to write clearly, accurately, and professionally in various contexts.

Voltaire

The Opquast certification assesses web quality and best practices, evaluating a candidate’s knowledge of essential guidelines for creating accessible, efficient, and user-friendly digital experiences.

opquast

My first-ever UI Design school project !

Content : 

* Mockups

* UI kit

Take a look below ⬇️

I recently redesigned the pixelfed social network for fun.

Content :

* Hi-Fi mockups

* UI kit

Take a look below ⬇️

This project was focused solely on UI design, carried out as part of a class assignment. It involved developing a user interface from concept to final design, emphasizing aesthetic appeal and user experience, without the integration of UX research phases.

Car Interfaces (School Project)

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.

Gayacoin (School Project)

This project centered on the design of the Petit Chef cooking app, aimed at amateur cooks looking to exchange and share recipes in a safe and accessible environment. As part of a class assignment, I developed a user interface from concept to final design, emphasizing both aesthetic appeal and user experience. The app features 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.

Petit Chef (School Project)

For our final school project, my classmate and I designed an app and its entire design system, which we documented in Zeroheight.

Content :

* Full UX process leading to UI

* Entire design system

* Documentation via Zeroheight

* Mockups

Take a look below ⬇️

Urbaneo (end-of-year school project)

During this internship, I was responsible for helping with the design process. This included tasks such as creation of invitations, business cards, posters & paper printing. I also prepared the printing materials, setting up the printer, monitoring the quality of printing and troubleshooting any printing issues.

Printer Assistant (intership)

I was tasked with creating commercial brochures, as well as Instagram posts, video editing, and website architecture.

Community Manager (internship)

Instagram content management about new technologies and construction. Website creation on Wordpress featuring Elementor.

Digital Project Manager

* Clearing the design issues backlog

* Onboarding in Figma

* Collaboration with front-end developers

UX UI Designer Freelance

I joined the Sapiologie team as an ux/ui designer. I mainly design interfaces and am in charge of the company’s system design.

Mathieu Lefebvre

2024

2022