Design First - Code later

TL;DR: In this Design First post, here is a deep dive of how we build features rapidly @ Clearplan.

When you are working on an app/website, User Interface is the app. You can have the most brilliant architecture in the backend - but what the user is left is the true User experience- UX. This might not completely apply if you are building services.

UI/UX is extremely hard

We had a zones page which was pretty bland when we initially developed it - just a list.

9:30 AM: This page is good enough, but there is nothing actionable. We wanted it to be more actionable - something which provides metrics, feedback and also visually simple. John and I started with a simple idea -Cards is the future of UI. Taking this idea, we jotted down in a notebook what the user model should look like.

Once we discussed how each of these metrics are actual links, we were pretty happy with the way we were heading. This is not the end design yet - paper is where we continually improve. It is cheap and blazingly fast to design on paper.

12:30 PM: We took our paper designs and improved in Sketch. Clearly, the paper provided a design - but we improved upon it very quickly. Here is our first iteration in Sketch.

3:30 PM: Here is where we split - We both agree that services and the UI are completely plausible. John continued working on the Sketch and I created backend and UI services to start fetching the data.

10:30PM: Pretty tired at this time, but we are super excited. We are continuing coding individually. Awesome wife respects my work ethic... got me a shitty beer.

Day 2

9:00 AM: Some more brainstorming and we figured out how to hook the UI into the Services. We are continuing to code and here are the final mocks of actions and the UI on paper.

4:00 PM: We are end of development. With Zero testing and solid feedback channels in place, we push it to 10% of our users to A/B test. Here is the final outcome!

9:30 PM: Took the feedback - improved the product and pushed it to the rest 90%.


Feature Development and Design don't need to be written in stone. It is a chemistry between developers, designers, product owners and customers. It cannot be evolved/improved without one of them. We believe the feature is never done - it is constantly evolving. Listening to customers is important but when you have 3000 paying customers, everyone wants to dictate the direction of the product. Designing and Delivering a product which satisfies most of them requires a master orchestration.