Rentcheck Web App - by Kaleo Design

#NoCode Flutter Apps

We know that sounds crazy! I mean you have Webflow for a drag & drop for web sites, you have Bubble.io for web apps I mean who needs another one? Well meet the easiest way to build a hybrid native app known to man.

FlutterFlow - Build cross-platform Flutter mobile apps visually | Product Hunt

Client Summary

The FlutterFlow team approached us as they were preparing to make a pitch to Y-Combinator (a very well established and prestiguous funding group). Alex & Abel both come from a development background and both worked at Google together before finding out their ability to create products that are loved and easy to use.

Overview

They were looking for a design team in order to help them put together the core User Interface of their application. We were able to work out the specifications needed for their desired SaaS product at the beginning of the engagement. And continue with them as they built out features and had design needs for their builder in the early funding stages of YC.

Timeframe

Oct. 2020 - Ongoing

Client

FlutterFlow

Services

Product Design
Strategy
UI Design

Creating the Builder UI

One of our first action items was to create the general bones of the UI Builder so that a you could drag and drop elements onto the canvas to create your applications.

Color Theme

The very first task was to come up with a design system and color theme based on their current palette (purple, orange and black). We worked off the purple and black and came up with a few shades of dark charcoals to help layer our UI, we also tweaked the purple and orange to create a nice fluidity.

Icon Set

One of our first action items was to create the general bones of the UI Builder so that a you could drag and drop elements onto the canvas to create your applicaiton.

Rentcheck Web App - by Kaleo Design
Rentcheck Web App - by Kaleo Design

Sidebar States

We worked on designing about 12 different sidebar states for the different type of elements that FF provides and the different properties needed for those elements.

  • Page Styles
  • Cards
  • Text Elements
  • Images
  • Icon Button
  • Buttons
  • Icons
  • Containers
  • Rows
  • Column
  • Stack
  • List View
  • Grid View
  • Spacer
  • Divider

Building a #NoCode Builder

We work in design programs, prototyping and motion design tools all day everyday, so figuring out how a designer would like to interact with an interface is literally our job.

We worked with the FF team on figuring out the requirements for what a user can do; and how they can do it and we took it from there, providing a consistent design system for them to carry out to elements of the app they spun up in their spare time.

Rentcheck Web App - by Kaleo Design
Rentcheck Web App - by Kaleo Design

Drag & Drop Builder

In FlutterFlow you can easily create complext interfaces with a simple and easy to use drag & drop builder. We are able to build UI’s in code almost as fast as it takes us to build them in Sketch.

We love this tool becuase the use cases for it are out of this world, #nocode is really gaining traction and with agile frameworks handing over the reigns from development to design and cutting down on time spent coding the frontend is going to save a lot of $$$ in the future and @FlutterFlow will be there at the forefront of the movement for native app development.

Project Outcome

We excited to see how FlutterFlow grows from here; they are officially launching their beta in March 2021 & were #2 Product of the Day on Product Hunt on Feb. 22nd, we will continue to provide design guidance and product strategy for the team at FlutterFlow as they build out their product features; which are already robust for a team that has been working on this project since Nov. 2020.

Rentcheck Web App - by Kaleo Design

"We have been so fortunate in finding Andrew and his team at Kaleo. Starting with the first UI work that Andrew handed off, which he turned around in less than 6 hours after one short meeting, we have been extremely pleased with the work. Practically everyone who uses our product loves the design. They are also super responsive and are just wonderful to work with, we couldn't be happier."

5-stars for Kaleo Design

Abel & Alex,

Founders @ FlutterFlow (YC W21)