Creating digital products can be both fun and hard at the same time. That's why in today's episode we show the four stages Think it, Build it, Ship it, Tweak it, and two examples of creating a product.
Creating digital products can be both fun and hard at the same time.
That's why in today's episode we show the four stages Think it, Build it, Ship it, Tweak it, and two examples of creating a product.
📦 Browse all examples of Think it, Build it, Ship it, Tweak it tools and best practices.
Creating a new website or mobile app
Today I will show you the four stages we use to develop websites and mobile applications from start to finish:
- 💡 Think if the product is worth building
- 🛠 Build the smallest possible version
- 📊 Ship it to 5 - 10% of your customers
- 📈 Make it available for everyone and Tweak it
You can use these four stages for projects of all sizes, from small personal websites to big company web applications.
The steps are designed to minimize risk and to increase customer value.
And I will show you two examples, one small, and one big so that you can learn how you can apply this yourself and show you that you can have both fun and be super productive at the same time.
Hey, I'm Arthur, and today's topic is one of my favorites.
I've helped more than 60 teams to implement this way of working and thinking about products.
You might already be familiar with these four stages, and that's because Spotify published an article in 2013, "How Spotify builds products." They described that product development isn't easy.
Most product development efforts fail.
And the most common reason for failure is building the wrong product.
And that's why they have a step by step approach: Think it, build it, ship it, tweak it.
Four stages we're gonna talk about today.
And their core philosophy is that they create innovative products while managing risk by prototyping early and cheaply.
We don't launch on date, we launch on quality.
And we ensure that our products go from being great at launch to becoming amazing by relentlessly tweaking after launch.
And this is this phase.
So they start with an idea.
They think if it's worth building, if they build it they try to build it in the shortest amount of time.
Then they make it publicly available for a small part of their user base, usually five to 10%, and then it comes available for everyone and they can learn continuously and improve over time.
Or maybe they come up with an even better idea and then they start the loop again.
The first time I introduced this way of thinking about digital products was at a digital product agency where we mainly created mobile apps, iOS and Android, and our clients we usually had a new client every other week.
And there was always a lot of risk involved in starting a new project.
So one of the things we did there in the think it phase was to use a design sprint to validate our assumptions, to see what was possible, and also to align with the client.
But if I'm running a small personal project then in the think it phase I usually go for a different route.
So that's why I'm gonna show you two examples:
- One of a bigger project at the agency, and
- one of a smaller project where we're gonna walk through each four stages.
The first stage, Think it there's a lot of risk because there are many unkowns.
And if people are actually waiting for this idea that we have.
Driving down risk
So what we wanna do is we wanna drive down risk as much as possible while also minimizing the cost that it takes to develop this idea.
And of course, for a small project, the risk is lower than for a bigger project.
But let's use this line.
So in the think it phase we wanna drive down risk as much as possible.
And we wanna spend the least amount of money for that.
And then only when we ask the question, is this worth building, we are actually going to start building the product.
And in the build it phase the risk stays the same because we don't learn anything new from our customer.
We are not selling anything yet, so it stays the same.
And we wanna keep this phase as short as possible because this is the riskiest phase to be in for the company.
We spend a lot of time and energy maybe in the wrong things.
You want to go to the shipping phase, because in this phase you're gonna make it publicly available to five or 10% of your customers.
And in this way you can actually learn from those customers.
So you can get data-driven feedback and you can see if people are actually buying it, if they're actually using it.
And this way you can improve your product.
Your costs usually stay the same because you have the same team working on it but you decrease the risk.
So up until the point where you decide, is this ready for everyone? Do we want to make this publicly available for everyone? And then you go into the tweak it phase.
So there you will learn much more and you will gain much more data and you can tweak the product continuously.
Example: Creating a overview page
So let's start with a small project and run through each of the four stages so that you can get an idea of what to do in the stage.
And in this case, if you are looking at this video then you can already have a sneak peek of this project because it's a project which creates an overview of all the different categories.
So for think it it shows all the best practices and the tools you can use over there.
And the same goes for the other three categories.
So the first draft of the tools and the best practices you can find at Agile Product Development.
For the Ship it phase I have a question for you in a bit.
But let's start with Think it.
Think it: Lightning Demos
In this case I started with lightning demos in the think it phase.
Lightning demos are inspiration you can use for your solution.
And in this case I made a lot of screenshots of other websites where I thought they displayed the information really well.
And for each example you describe what it specifically is that you like, the more specific the better, why you like it, and also how you can use it for your solution.
And it was one specific lighting demo that I really liked which was an overview by growth.design.
And in this case it was about the biases and principles that affect your UX.
And the next step is a really important step in the think it phase is where you create a prototype and in this where you make your idea way more concrete without actually building it yet.
So what I did is I copied the example over here.
And actually I also copied an example over here of framer.com because I really like their style.
And I try to visualize how this page could look like.
So you can see here, this is a combination of what's on the growth.design website and also the style that's over here in framer.
Build it: No Code (Webflow)
And after spending half an hour in prototyping this and making a simple design, I realized it's easier to go to the next step, to the build step.
And that's because I make use of Webflow and Webflow is a tool where you can design your websites and when you design it they automatically generate the code for you.
So I don't have to write any code at all.
And this makes it a really cheap step for me to move to this step.
And that's also because I already had a list of agile tools and best practices build up through the year.
It was not complete yet.
So what I had was the names of the tools and the best practices, but not the one-liners yet.
So what I did for the build it phase was to take the first 20 items and then describe them, so make one-liners, add an emoji to them and then import them into Webflow.
And if I had to do that in the design tool then it would have taken me more time.
So as you can see here in Webflow I implemented the design, which took me I think maybe an hour.
And then after that I could import the items I described over here.
So in this case I created a lot of items for think it, so the four-step sketch, prototype, the lightning demos I just described.
And this gives an overview of the different tools and best practices.
In the think it phase, and then I did the same for build it, ship it and tweak it.
Ship it: Give your feedback
And actually now I'm moving to the ship it phase because in this phase I want to learn if this is valuable for someone else.
And maybe based on the feedback of people who are using it, I can improve it.
So I'm moving to a better testing where I'm sharing the link to a small group of people.
So it's here below the video if you want to have a look at it and I'm also gonna invite people one-on-one and this way I can learn if the thing that I've built if it's valuable for them as well.
And if it's actually valuable, then there will be a moment in the future where I'm gonna make this publicly available and spread the word.
And once I have tested it with 10 to 15 users and get the feedback and improve the page, then I will make it publicly available and start tweaking it.
Example: Improving a charity campaign
Now let's go to an example of a bigger project. And in this case it's at the digital product agency.
In the Netherlands every year there is a charity campaign where kids go around the neighborhood.
In 2016 the foundation that was running this campaign came to us and they asked us if we could help them to make the campaign more fun for kids by creating a mobile game.
Think it: Design Sprint
And for bigger projects like this I like to start off with a design sprint because this helps to validate assumptions everybody involved has.
Usually in a bigger project like this more people are involved.
So there are more expertises and ideas that you have to combine.
And the really nice thing about the design sprint is that you actually make a prototype of what the solution could look like and that you test it with real customers.
And in this case we created a prototype which we handed over to kids, the kids would simulate the campaign.
And we could learn so much about this that we actually changed the complete direction of the project.
So within only a week we learned that we should not focus only on the fun part.
It should be there, but making it more easy is the main factor that we should focus on.
And that also concludes the think it phase because we had a concrete idea and we now can move to the build it phase.
And for the build it phase we usually use the user story map.
And a user story map is a visual presentation of the work that will create the most delightful user experience.
You start by outlining the steps a user takes within your product to reach their end goal.
And then below the steps you create an overview of all the possible ideas and all the possible solutions that could be for that step.
And then you decide what you're gonna build first and what you're gonna build later.
And in this way we had a really tangible roadmap where the client could see what we're gonna approach.
And it was also combined with the design sprint results.
So they knew exactly what they could expect.
Ship it: Beta test
And with the ship it phase we run a beta test again.
We now had a real version of the product which we could hand over to the kids.
So we did a simulation of the campaign again and the kids could run into bugs or other problems with the app and we could solve them before making it publicly available to all people involved in the campaign.
And with tweak it we actually run the campaign of course, and then you could also see the data and the results and the feedback and our base out of all this, we decided on improving the roadmap and deciding on the next steps.
Like I said, this collection page with an overview of all the think it, build it, ship it and tweak it tools.
It's still in the ship it phase.
So I would love your feedback.
If you have any remarks or suggestions or you're missing something then leave a comment down below.
And every week I will make a detailed video about one of the tools or best practices.