How I've made my digital product

Hugo
Bootcamp
Published in
4 min readDec 10, 2021
Post cover

Hey 👋

I’ve always been a watch enthusiast and through time I’ve noticed one thing, especially according to luxury watches:

Some watches keep (or increase) their value over time.

Why? There are some reasons like scarcity, sentimental value, and the story of the watch model.

What are the watches concerned about? Hum… why not create a product that lists these models?

How I’ve made this digital product? Let’s get into it 🤟

1. Shape a value proposition

Give a list of the best watches for investing.

What kind of value do I want to offer? There is the core question. In my case is relatively simple, just put my knowledge as a watch enthusiast on the table. And I want to do that for people that already invest in some crypto and stocks stuff, there are many little “investors” these days!

Key points to shape a clear value proposition:

  • Ask yourself “I want to build X for Y”, cliché but try it, you’ll see it's not so simple to down this sentence with crystal clear statements :)
  • Peoples are more important than your idea. You always prefer to start with a group of people with a need/problem rather than a raw idea OR try to solve your own problem.

2. Make the product

Airtable view
Did you guess the tool?

What if a super cool tool for building a list of things exists? Air…table :D You can embed and share it easily and the free plan is just what you need to build this kind of list. After some research and data reading about watches prices and performance, I’ve listed my top selection into Airtable, create a free and premium list, and voilà.

Key points to make a cool product:

  • Don’t reinvent the wheel, refer to your value proposition and search the fastest and the simplest way to make it real. (In fact, it’s relatively easy!)
  • Keep things simple, people's attention is a super rare thing and you don’t want to lose it with a complicated product.

3. Present the product

Blender screenshot
Art Direction R&D in Blender
Figma screenshot
Design in Figma
VS code screenshot
Coding in VS Code

For me, website design is an important thing. Yes, you can check some billions $ companies with ugly websites but I personally don't want to just share a product, I want to give an entire experience and a great functional and visual design is a key for me.

According to my audience, I’ve chosen a simple, serious, and light art direction. You’ve got the whole process by images above :) Note that I wanted to code this website totally from scratch for this project but you totally can integrate this kind of design in a no-code tool like Webflow!

Key points to make a pretty product:

  • Always design it according to your value proposition targeted audience. You have to remain coherent with the value you offer and the way you present it!
  • Explore and be original. Don’t fear to play with 3D, colors, try to make your product presentation tasty, and just like Disney land: Everything is possible, so yes, do things just to make them pretty and easy to use.
  • Gather references and mix them! Explore websites you like, art you like, and mix them as a brand new purpose.
  • Attention to detail, give your user the 10% more. Everything is possible, so with the goal of not complexifying your website, you can add some details to make it pop! In my case, look at this tiny widget in the bottom right corner that shows time :) We treat about watches, don't forget!

The End, thanks for reading! Don't forget to see the live website here!

I’m happy to connect with you at duprez.hugo@gmail.com or on Twitter @HugoDuprez 👋

--

--

Hugo
Bootcamp

Product Design at Craiyon AI 🖍 Design + Code = ❤️