I built my first project for real-life design flow inspiration
Announcing userflows.design 🎉
What is it?
userflows.design was a side project that is a repository of design patterns that can be used as inspiration for feature design by any designer. There is a particular focus placed on searching by feature rather than the company.
Why build this?
As a designer at the beginning of his career working at a startup, I would often be given features to design really quickly. A major part of my process was looking for inspiration about how similar features are implemented in major companies like Google, Dropbox, Facebook, and so on.
The process was quite painful to say the least. I went through a lot of inspiration websites who curate design patterns but it took me a lot of time to actually find what I was looking for. This was because:
Designers’ search for inspiration is based on the feature they are currently designing. In contrast, most curation websites offer exploration based on products or companies first.
Let’s say the designer is creating an onboarding feature. They would want to search for “onboarding” and see all the products with good onboarding flows. In contrast, most curation websites offer exploration based on products. Users have to go through each product and painstakingly look for an onboarding flow from the many flows available.
Talking to other designers, I realised a lot of people were having this problem. They were looking for inspiration for the exact feature they were building, which could come from any company.
This is the idea that led to me creating userflows.design. In addition to this, I thought it would be a good exercise for me to create something from scratch, which means designing as well as coding it.
Enter, userflows.design
userflows.design is an inspiration website that helps designers ideate quickly by gathering inspiration from leading design companies in a straightforward and contextual way.
One aspect that sets it apart from other curation websites is that the focus is on exploring based on the flow/feature, not by the product.
The idea was to streamline the way of gathering inspiration, and not waste time searching for the right flow.
Each flow is curated from companies with industry-standard designs. All steps of the flow are documented in the form of screenshots, with an explanation about each screen in the context by hovering(web) or tapping(mobile) on the screen.
Right now, userflows.design contains inspiration for features like Onboarding, Subscription, Publish, Upload, Explore, Search, Delete, and Deactivate from companies like Dropbox, Google, Twitter, Facebook, Tumblr, and more, with plans to add a lot more in the coming days. The primary goal right now would be to increase the number of flows on the website. The website also only consists of web flows right now. I plan on adding app flows as well.
My process
Exploration
I faced the problem of finding inspiration for features very early on in my design career, and I realized a lot of designers were facing the same problem as well. The research phase was mostly talking to other designers and figuring out whether this is a problem worth solving. Once I realized that it is, I started ideating on the concept, and what would set this website apart from others.
Soon, I arrived at a defining sentence for the website: “userflows.design is an inspiration website that helps designers ideate quickly by gathering inspiration from leading design companies in a straightforward way.”
Design
This sentence helped in being a guiding north star for the website, and I started creating the wireframes and going through them quickly. Once I liked the direction I was going in, I created high fidelity mockups. Once I finalized the visual language I liked the most, I started with conceptualizing interactions.
Coding
The design phase took about a month, as I was doing it on the side. I started coding soon after. I used Ruby on Rails to create the whole website. The front end is in CSS, HTML, and JQuery. I used CSS Grids to attain full responsiveness on the website. The backend database is PostgreSQL. The website is hosted on Heroku.
All in all, this was a good exercise for me to design and code a product from scratch, and there were a lot of learnings for me along the way. I hope I learn more as I keep building and maintaining the website.
Thanks for reading! Go check out the website at userflows.design and let me know your thoughts. Was the website helpful? Was it not? What could be better?
Feel free to provide some feedback to me on Twitter, or on my email ahujasid@gmail.com. Don’t hesitate to reach out if you have other questions as well.
