Forem: mich_thedev

Product Design: How Design Drives Business Impact

mich_thedev — Sun, 18 Jan 2026 06:37:00 +0000

Lately, I’ve been brainstorming ways to move beyond aesthetics and prove design’s business value.

I understand typography, iconography and colour theory. I know how to build beautiful, functional interfaces, and I’ve been in the industry long enough to have built cool stuff.

Okay, last year, I attended a hangout for designers.

Just a small get-together for individuals in the creative industry. Have a few drinks, talk about your accomplishments, network with people. Stuff like that.

There was a section of the hangout where key speakers would speak on their experience and give tips on how to grow as a designer irrespective of the design industry you’re in.

Ernest, one of the speakers, mentioned something profound.

He said: “the need to learn how design drives business impact.”

That was my key takeaway from the hangout.

I left pondering what that meant and how I could apply it to my craft.

Fast forward 2 weeks later, when my friends and I started building our Design Collective.

I went back to understand deeply: “the need to learn how design drives business impact.”

Because somehow, somewhere, it’d be crucial in the success of our collective.

I opened Claude AI.

Cuz what’s the best way to brainstorm ideas fast if not AI.

My prompt was essentially one question: “I know component libraries and design systems are crucial to design but what can I do beyond that to drive business impact, provide value to users and measure it”.

Claude gave me a response (which I had to filter through, of course 😏)

The response had these key points:

→ Product Strategy and Vision

→ Business Model Design

→ User research and insights

For brevity I will talk about product strategy only (other points may be covered in subsequent posts, so stay tuned).

The product strategy solution followed a 4-week framework I could use for every design/tool I would build:

→ Week 1: Define Success

What’s your goal for the flow/design/application?
Pick 2-3 metrics to track
Write your hypothesis: “This tool should save me X time”

→ Week 2: Measure Reality

Track for 5 days: Watch yourself use the tool in real work scenarios. Write down every frustration immediately

→ Week 3: Find the Bottleneck

Map your workflow, the actual steps you take to achieve your goal.

Where do people drop off most?

That’s your constraint.

→ Week 4: Fix ONE Thing

Pick the biggest constraint
Design one targeted solution
Predict the outcome
Build it, measure for another week

Simple right 🙂?

I chose to test the framework on a tool I built earlier: a device simulator, Mobily Responsive.

See, I had built this device simulator for website responsiveness testing.

Has iPhone and iPad options.

But I only ever test iPhone 15 Pro.

30% device coverage when the business goal was 100%.

What would most people do? Add more devices.

What did I do instead? I measured WHY.

I tracked my behaviour for 5 days.

The issue wasn’t missing devices.

It was friction.

Switching between devices meant:

→ Click dropdown

→ Scroll through list

→ Select device

→ Wait for reload

→ Repeat 2-3 times

So, I redesigned how I switched between them. The solution? Preset workflows that load entire testing environments with one click. Here’s what I built:

→ “Quick Mobile” Workflow → Just iPhone 15 Pro

→ “Full Mobile” Workflow→ 3 phone sizes

→ “Everything” Workflow→ Phones + iPad

Why this works:

I removed the micro-decisions that created friction. One click loads your entire testing environment, meaning no mental overhead, no excuses to skip devices.

What I’m Doing Next:

Taking this exact framework to client work.

When they ask for a redesign, I’ll say: “Let’s first measure how people use what you have. Find where they drop off. Then design the intervention.”

Data first. Design second.

Now, I want you to try this:

Pick one tool you use daily.

Track your behavior for 5 days.

Find where YOU drop off.

Fix that one constraint.

You’ll learn more about product strategy in one week than reading 10 books.

Then bring that thinking to your team. Watch what happens.

Questions? Want to talk design strategy? Hit me up on X @mich_thedev

Till next time.

Who knew hiring could be so tiring?

mich_thedev — Thu, 01 Jan 2026 23:00:00 +0000

My design collective is hiring a marketer to position our brand to clients.

The original plan was to reach out to people in our circle, see if they had experience positioning tech products or services with a sprinkle of design/dev knowledge.

After days of outreach, no candidates (I am still surprised I don’t have any marketers in my circle 😳).

We knew the search would slow other projects down (our portfolio design would have to take a halt), so I volunteered to continue the recruitment while the rest of the team focused on our portfolio design.

Back to the drawing board for me.

Since I wanted to hire design-focused marketers, design-focused companies became my search ground.
Figma, Linear and Rive were good fits. I would search among marketing team members or marketers who follow these companies at least.

I quickly drew up a three step framework for recruitment:

Find marketers who follow these companies’ marketing team members on X.
Score each candidate on their
- Audience quality (are their audience our target clients).
- Design/dev content understanding.
- Clarity expressed in their bio and posts they make.
- Lastly engagement quality.
Reach out to them via DM and offer for them to join if they passed the test (scored 90 or higher)

I went through a good number of candidate’s X profiles.

Every one of them failed the test.

I saw profiles whose audience were simply not our target clients, showing no substantial design/dev content understanding.

On the flip side, profiles with design/dev content understanding (the ones at Figma, Linear e.t.c) don’t get clients—they support an existing product that already has demand. Like product marketers 🤦‍♂️.

Seeing all this, I made small changes to the framework:

Firstly, re-defined the marketing role. The potential hire would generate inbound leads and build our collective’s presence on X and LinkedIn, so the role changed from Product Marketing to Growth Marketing.

I joined a few Design/Agency communities such as Design Buddies, to reach out and connect with said Growth Marketer.

Then offer for them to join if their portfolio was convincing.

I’ve met promising candidates using this new strategy and after I take the next steps, I’ll tell you guys all about it.

If you want to ask any questions or just have a talk with me, do reach out to me on X @mich_thedev.

Effects of listening 🎧 to music while coding

mich_thedev — Sun, 08 Oct 2023 06:01:00 +0000

"Do you listen to music 🎵 while coding?"

I was asked this question recently by a friend of mine.

Well, I do it a lot, even though it is a bad habit.

🤚 Don't get me wrong.

Listening to music 🎶 is great. It can:

Improve your mood.
Help reduce depression.
And decrease anxiety.

But becomes a problem when you do it too often.

Especially when listening to high-BPM music while doing work that you are required to be deeply immersed in.

This leads to sensory overload, which is the overstimulation of one or more of the body's five senses.

When our brains 🧠 are constantly bombarded with sensory information or have to process too much complex information, we become overwhelmed and exhausted.

The solution to this?

I recommend listening to Lo-Fi music while working.

Lo-fi music is a genre that features mellow melodies and calming vibes, making it ideal for creating a relaxing atmosphere while studying and working.

This type of music is often instrumental, with minimal lyrics, which can reduce distractions and help you improve concentration.

Do like 👍 and 🏃 follow for more content.

Client-side data storage with IndexedDB

mich_thedev — Sun, 01 Oct 2023 05:45:00 +0000

IndexedDB is a well sophisticated database for persisting data in a user's browser.
Although, there are other storage options like localStorage or Cookies, they are rather limited and cannot handle complex data types.

In this article, we'll delve into what IndexedDB is and its key features, so get ready to learn something new today.

What is IndexedDB?

IndexedDB is a client side database for
storing data directly in the the browser. It is based on the same origin policy, meaning that web pages of different domains cannot access the same IndexedDB database.

An IndexedDB Database is simply a collection of object stores.

So called object stores as their name implies are the storage of IndexedDB. It is where the actual data is stored. An IndexedDB database may have multiple object stores.

An object store holds records which are key 🗝️-value pairs. The keys of an object store can be a string, date, float, a binary blob, or an array.

Objects that can be stored must support the structured clone algorithm.

Haven't heard of the structured clone algorithm 🤔?

The structured clone algorithm is a mechanism that JavaScript engines use when copying objects using certain APIs. These objects can be arrays, maps, sets, objects and other built-in JavaScript data types (with the exception of functions, DOM nodes and Error objects).

The IndexedDB API uses many requests for its operation. What do I mean?

An IndexedDB API usage can happen in these steps:

You send a request to open a connection to the database. This request can either fail or succeed, so you can add event listeners 👂 to the success event.
Inside the success event handler, you create a transaction, get an object store from the transaction, then add or delete data to the object store.

Note: every attempt to add, delete or update data in an IndexedDB database object store must be wrapped 🎁 in a transaction 😲.

Now, what is a transaction?

A transaction is a group of operations to be performed on a database that should either all succeed or all fail. If you’re doing a lot of writes to an object store, it’s much faster if they happen in one transaction.

This is just the surface level of the IndexedDB API ad want it can do.

If you would like me to explain more about IndexedDB and other client-side storage options, you can tell me in the comments.

Image credits: Matt Anderson

Do like 👍 and follow 🏃 for more content.

🛑 Stop learning many frameworks.

mich_thedev — Tue, 26 Sep 2023 05:45:00 +0000

I have a confession...

While starting out as a software developer, I jumped from React to Solid and back and forth. Then, eventually, I'd abandon the project I was working on.

I fell victim to learning many stacks at once.

There was no clarity.

I didn't have a clear roadmap.

I learnt that I should focus on building something I truly resonated with, something that really solved a problem I had.

So I stuck with that for some time.

After a while:

I realized that my consistency to work on one project had 10xed.
I was learning better and understanding concepts quickly.
I had better project management skills.

This approach led me to finishing a note taking PWA successfully (link 🖇️ in the comments). Which I am so glad about.

What to learn from this?

You can build software with any language, any framework you want to use. Just pick one and stick with it.

Good luck on your software developer journey 🛣️.

Do like 👍 and follow 🏃 for more content.

Looping over a reactive array in NixixJS

mich_thedev — Sun, 24 Sep 2023 06:45:00 +0000

Looping over elements in an array is a very useful technique for programmers to know.
It is essential when manipulating the DOM, as I mentioned in my last post, how all JavaScript developers should know how to manipulate the DOM.

Fortunately, JavaScript provides developers with many different ways of performing this operation seamlessly, but that is beyond the scope of this post.

In this post, I will explain how to loop over a reactive array(an array which it's elements change when state changes) in NixixJS using the built-in 'For' component.
Be sure to keep reading because you will learn something new by the end of this post.

✔️ First, create a component that returns some JSX to create the UI.

✔️ Next, create a reactive array(also known as a store) with the 'callStore' function exported by the 'nixix/primitives' module; The function returns a tuple which the first element is the argument passed to it and the second is the setter function for the store.

✔️ Third, import the For component from the 'nixix/hoc' module; You can use the component in your code as it is used in the example below.

The For component requires three props -

The each prop: is the reactive array.
Behind the scenes, the For component
appends an effect which is called when
the length of the reactive array changes.

The effect does not replace old nodes

with new ones when the array changes,
rather it creates reusable DOM nodes
and uses the DocumentFragment Web
API to append new nodes to reduce the
DOM reflow time.
The children prop: is only one callback
that returns the nodes to be shown when
the reactive array is looped over.
The fallback prop: is the node to be shown when the length of the array is 0. This prop is optional.

In the example below, when the nodes are first created, three divs will be shown in the DOM. The next time - when the button is clicked and the reactive arrays length changes is '2', the first two of the formerly created divs are still shown in the DOM, with their props updated, and then the third div will be cached(removed from the DOM and kept in memory) for later use without destroying it wasteful recreating and replacing existing DOM nodes.

This is just the tip of the iceberg of how the For component works, there is a plethora of exciting features to learn about. You can ask me about them in the comments below 😉.

Do like 👍 and follow 🏃 for more content.

Benefits of note taking...

mich_thedev — Sat, 23 Sep 2023 12:53:49 +0000

My productivity was dead...

I was spending hours working without recovering and getting nothing done.

After 2 weeks:

I had more focus and motivation to work.
I was working 3 hours a day and getting more done.

Here's how I did it:

First, I started bedtime writing ✍️. This helped me sleep faster 😴 and get me motivated to do what I wrote when I woke up.

Second, writing easily achievable and few goals. The trick is to make your brain 🧠 think you have less work, thereby putting all your focus on what you have to do without feeling overwhelmed. It's a rule of thumb "Greater focus plus fewer goals equals the best result".

You can try it out and comment what your experience was like below 👇.

Making the Dummy Component

mich_thedev — Mon, 13 Feb 2023 14:21:09 +0000

In the last part of this series, we made the Navbar component which returns a nav element that has reactive variables. So in this part, I will explain the Dummy component. You may be wondering why it's called a "Dummy"; this is because this component will return some style dummy text i.e (Lorem ipsum dolor...).

Let's get started!!!

First, make a file called 'Dummy.svelte' in the lib directory.

  touch Dummy.svelte

We are going to create two h3 elements that have some text inside them and style the elements.

Dummy.svelte

  <h3>
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Cum quia quas voluptate assumenda quae ipsum incidunt, temporibus ducimus molestias, atque sunt amet sequi distinctio enim nostrum dolorum, culpa deleniti animi!
  </h3>

  <h3>
    Lorem ipsum dolor sit, amet consectetur adipisicing elit. Nulla dolor architecto facere expedita amet ex eum. Odit magni repellendus consequatur beatae. Animi voluptates quo, accusamus consequuntur soluta deserunt eius iure?
  </h3>

  <style>
    h3 {
      padding: 0 20px;
      line-height: 1.3;
      font-family: 'Trebuchet MS';
      z-index: 0;
      position: relative;
    }
  </style>

Notice that the h3 has a CSS z-index property of '0' and a position of 'relative'. In the Navbar component we set the z-index of the 'nav.nav-bar' element to 1. We did this so that the nav element will stay on top of the dummy text when it appears. To better understand what I mean, here's a link to the CSS z-index property.

Tip for VSCode users: type 'lorem' and hit tab to give you some dummy text. Powered by Emmet.

To test this in the browser, we will render the component we just made. Let's go into App.svelte and import 'Dummy', declare and import some styles in App.css.

App.svelte

  <script>
    import Dummy from './lib/Dummy.svelte';
  </script>

  <style>
    main {
      padding: 5px;
    }
  </style>

  <main>
    <Dummy />
  </main>

Notice that we did not declare any exports in the 'Dummy.svelte' file, that is just how svelte works.

App.css

  body {
    background-color: #000;
    color: whitesmoke;
  }

main.js

  import App from './App.svelte';
  import './App.css';

  const app = new App({
    target: document.body
  });

  export default app;

So, we have just made the main element have a padding of 5px to give some space from the sides. Type in the terminal:

  npm run dev

Click on the 'localhost:5173/' to see it in your browser.

That is it for the Dummy component, in the next part we will import the Navbar component into App.svelte and finish up the navigation bar.

Thank you for reading and stay tuned for the next part.

Making the Navbar component

mich_thedev — Sat, 11 Feb 2023 14:18:26 +0000

In this tutorial, we will be using SvelteJS for interactivity, CSS for styling and boxicons for icons to make a navigation bar that hides when a user scrolls down and appears when a user scrolls up on a mobile device.

What we will be making

To get started with this project, you have to install Svelte with npm. That is, if you haven't already. If you have not, type this in the terminal:

  npm create svelte@latest my-hidden-navbar 
  cd my-hidden-navbar 
  npm install 
  npm run dev

This will download the all the Svelte dependencies and devDependencies into a node_modules directory and 'npm run dev' command will open up a development server that you can click on to view in the browser. Also, if you are using VSCode, you can download the 'Svelte for VSCode' extension to get syntax highlighting and intellisense for Svelte components.

That is it for the configuration, time to get coding.
In the terminal, type:

  cd src && rm -r lib && mkdir lib
  rm -r App.css App.svelte && touch App.css App.svelte 
  cd lib && touch Navbar.svelte

Navbar.svelte will be the main component that will have our navigation bar. To make the navbar, our component will have a script tag for the functionality, a style tag for the CSS styling and a nav element that with a child ul element inside of it.

Navbar.svelte

  <script>
    let icons = [
      'bx bx-home',
      'bx bx-info-circle',
      'bx bx-user-circle',
      'bx bx-message-dots'
    ];

    export let opacity;
    export let bottom;
  </script>

Here, we have an array of strings that are actually boxicon classes which we will loop over to make icons; and two exported variables, which we will talk about later. They are called props by the way.

Next is the template syntax for our component. Add this to the Navbar.svelte.

Navbar.svelte

  <nav class="nav-bar" style="opacity: {opacity}; bottom: {bottom};">
    <ul class="nav-bar_nav">
      {#each icons as icon}
        <li>
          <i class={icon} style="font-size: 35px;"></i>
        </li>
      {/each}
    </ul>
  </nav>

This code block contains a nav element with a utility class which has a child ul element. The nav element has the opacity and bottom CSS properties in curly braces to interpolate the variables 'opacity' and 'bottom' as the values, so that when ever the values change, the CSS properties will update with the new values. What I mean:

The variables and their values in the script tag.

The values interpolated into the CSS properties.

After the values change

The new variable values in the script tag.

The new values interpolated into the CSS properties.

The block that starts and ends with '{each}' is called an 'each block' and is very similar to the 'for loop' in VanillaJS. It is mainly used for making lists and iterating over arrays. This code appears weird at first glance, but is really just a way of saying 'for each of the values in the icons array, make an li element which has a child i element with the class of the current value in the icons array'. For example, the first iteration will produce:

  <li>
    <i class="bx bx-home" style="font-size: 35px;"></i>
  </li>

The last part is styling our component. This can be done in various ways- by writing the styles directly in a style tag or writing the styles in a separate CSS file and importing it inside the script tag of our component.

But, we will be writing our's in a style tag.

Navbar.svelte

  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
    .nav-bar {
      width: 80%;
      height: 65px;
      background: orangered;
      padding: 15px;
      margin: auto;
      border-radius: 15px;
      position: fixed;
      left: 50%;
      transform: translateX(-50%);
      bottom: -10%;
      transition-property: opacity, bottom;
      transition-duration: .5s;
      transition-timing-function: ease;
      z-index: 1;
      display: flex;
    }
    .nav-bar_nav {
      width: 100%;
      height: 100%;
      display: flex;
      list-style-type: none;
      justify-content: space-around;
      align-items: center;
    }
  </style>

For the styling, I will explain the main properties we set on the elements.

We set all the elements to have a padding and margin of 0 and a box-sizing of 'border-box'.
Now we want the nav element to be 80% of the width of the body element and to have a height of 65px, padding of 15px, border-radius of 15px to make the corners rounded, a postion of 'fixed', so it stays in the same position when it appears, and a z-index of '1' to make it stay ontop of the main content. Left and transform properties of '50%' and 'translateX(-50%)' respectively to center the navbar horizontally, bottom of '-10%' to make the navbar stay at the bottom when it is not visible (I will explain how it will later). Now, for the transition, the transition-property to 'opacity' and 'bottom', duration of 0.5s and timing-function of 'ease' so the transition goes smoothly.
Lastly, for the ul element, width and height of '100%', display of 'flex', list-style-type of 'none' so we can override the bullet point style, justify-content of 'space-around' to give the icons some space around themselves and align-items of 'center' to align them vertically in the center.

In the next post of this series, we will make a component to render some dummy text(lorem ipsum...) and I will explain how the Navbar component will be connected to the dummy text component. Thank you for reading!!

Should I really make my project open source???

mich_thedev — Mon, 23 Jan 2023 21:33:19 +0000

I want to make a recent project of mine open-source, but I am not really sure on how to get people to know and help me on the project, in fact, I have never really done any open source project before.

If you have an answer to my question, please answer in the comment section.

Debugging "Fatal: remote end hung up unexpectedly" problem in git terminal.

mich_thedev — Tue, 20 Dec 2022 10:48:37 +0000

How do you deploy a React app on digitalocean?

mich_thedev — Sun, 18 Dec 2022 18:07:37 +0000