Using Shape Up to build a Shopify App

Arjun Rajkumar
Oct 16, 2019 · 5 min read

Shape Up is a product development strategy (written by Basecamp) that helps you ship faster.

Shape Up pic via

I used to build products this way.

Old way of building products

Old way of building products:

  1. Draw wireframes on paper
  2. Convert into mockups
  3. Write the front-end code (HTML/CSS/JS)
  4. Build the back-end (Ruby, PHP or whatever programming language you choose) — Only after the front-end work, did I start the back-end development work.
  5. Publish live

This is the approach I followed for a long time and it works well — but it has a few drawbacks.

Main drawbacks of the old way:

  • Project is mainly scoped by features that needs to be built
  • Based on the scope of work you calculate the time that will be required to complete the project
  • You only ship once
  • You only ship after the whole project is completed
  • Because the mockups and front-end development code is done before the back-end work — its more expensive (time wise) to make changes to design/front-end after the back-end development work is over.

In this old way of building products, the project is taken live only in the end after the whole thing is done. This works well but Shape Up is a better way to build, especially for bootstrappers and small teams that have less time to focus on a particular project.

Shape Up is written by Basecamp and a must read if you are building products. Their docs explain everything much better than this blog post.

These are the main differences I found using Shape Up

  • At the beginning of the project you assign the time, and then based on time you decide the scope. The scope can change, but the time remains fixed. Because the time if fixed, you have to be selective on what exactly you want to ship — you have to narrow down the problem, and only focus on features that matter the most.
  • Instead of shipping once, after the project is over — in Shape Up, you ship almost every week.
  • Instead of drawing detailed wireframes and mockups in the beginning of the project — you use breadboard and fat marker methods to understand what needs to be built. Over here, the details are left out which means you have more room to play around in the later phases of the project. Below are two images of an important page from the app. I started with the low fidelity page to understand the important things that are needed on the page. Then built the back-end work and made sure it’s working and finished by adding colours, graphs etc to make it more useful for the customer.
Low fidelity page: The challenge here is to include the important things without adding the fine details.

You can see in the picture above that the important details are included — but decisions on design, colours, buttons, graphs etc were left out until I finished the back-end development work.

The same page after it is done.
  • Instead of doing the back-end development work AFTER the front-end development phase — in Shape Up, you do both simultaneously. You start by dividing the project into different smaller sections which are all independent of each other. This allows you to ship something to production every week. For example I narrowed down the app into 5 different sections initially. I then could ship each section to production as soon as it was complete.
Five sections all independent of each other to a large extent
  • You define risks right at the beginning. This was the first Shopify App that I built — and I knew that the initial phase will take longer as I had to learn Shopify’s best practices. By being aware of this, I wasn’t disappointed when the initial setup stage took a little longer than usual. As you can see in the image below, I gave myself more time in the setup phase (figuring things out)
Hill Chart showing the project breakdown

I gave myself three weeks to go from zero to submitting the app to the Shopify App store. Every week, I shipped something — and seeing it live in production makes you more motivated to ship faster.

Because of the limited time frame I had to cut back and exclude certain features from the initial build — which I put under ‘Someday todos’. As of now I want to focus on getting the first customers before I start working on the todos in Someday Todos.

Product Roadmap

This is the fourth product I have built using Shape Up’s product development strategy. The biggest advantage of using this for building new products is that you get to ship faster. I feel like shipping is a muscle — the faster you ship something and the more you ship, the faster you can complete the project.

To know more about Shape Up :

Arjun Rajkumar

Written by

Software Developer

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade