Building a layout generator

End-to-end product design - Personal project
Coming soon...
Project Overview
I spent this last year designing and developing this product as a personal project. I wanted to automatize my research during the wireframing phase. I started this project to solve my own problems with the desire to gain precious time.
My Contributions
As a personal project, I take care of every step in the conception. I try to do as much as possible within the range of my abilities. From listing layout possibilities to the interface design and front-end development. My friend Alexandre Geng helps me to make this tool come to life.
A screen from the product's prototype
Problem statement
I've always found the wireframing research phase time consuming. Every wireframing UI kit offers a lot of pre-conceived solutions but I don't have enough control over design. I find myself trying the same layouts over and over again when possibilities are endless.
Without omitting UX best practices, I know grids can offer a lot more options.
Project goals
1
Gain productivity

2
Gain cognitive ressources

3
Having an exhaustive view of the solutions available
A figma file with more than 1700 layout possibilitesi
Just one Figma file with roughly 1700 layouts and some live applications.
User research
Without commercial purpose at first, this tool is for my own use. This enables me to check my interfaces hyptothesis first-hand. Still, as this product evolves, I will be looking for new users.

By design, it covers the wireframing phase in a designer's process. Therefore, designers are the logical target.

My guess is that it would be best suited for agency or freelance work. A single product or website doesn't need layout redesign on a daily basis. To be confirmed with actual data...
A showcase of my research
Trying to figure out what types of content are the most used.
Challenges
There are two big challenges.

First comes the gigantic amount of layout options available. I found myself restarting once because the options I came up with were not the most pertinent layouts. I stuck with grids that show the most potential for a real project. I have now more than 5000 possibilities listed, for up to 5 elements.

Second, the technical limits I have. I have to consistently simplify my work to be able to develop the MVP. The large amount of content is a concern I can't ignore to have an efficient tool. I have to limit the features to provide enough value without complexity.
Several layouts tests that I did
A lot of tests to get to the the right layout and the right features
Visual Design & Development
I keep the visual design to the bare necessity. The project's MVP status and the lack of live feedback make any kind of visual adjustment unrelevant, so I save as much time as I can.
I chose the Inter OpenType throughout the whole site. It's readable enough even in small sizes and comes with a lot of weights. My only concern is visual hierarchy, I use green as a primary color to make actions stand out.

I develop the interface on webflow because it allows me to deliver fast and reliably to my friend. Alexandre Geng handles the back-end development .
An excerpt from the results
Wireframe research phase reduced down to a scroll.
What I have learned
This project has taught me how to prioritize and focus on long term vision. I must satisfy myself with a "good enough" MVP in order to stay on track without losing too much time. I'd rather ship fast and iterate after.

It has also taught me how to remain organised in order to keep very large files usable and to control their quality. I can now see recurring layout patterns inside my design files. Although listing everything by hand was painful, it has helped me understand grid systems better.
Credits
  • Alexandre Geng - Back-end develoment.

Next project

Networking app redesigned