Designing and prototyping a web app project

An in-depth guide on how to go from idea to a sketch, to a working prototype to a high-fidelity design.

Introduction

👋 Welcome to part 2 of the newsletter series about building a web app side project!

In the previous issue, we discussed creating a design system and picking technologies that allow you to work fast while shipping great quality products.

Table of contents

In this issue, we’ll talk about the following:

1. Why do you need side projects?

2. Coming up with an idea for a side project.

3. Researching existing solutions for your app idea.

4. Adding value with your app over existing solutions.

5. Validating your idea without coding.

6. Sketching your idea (low-fidelity design).

7. Creating a final high-fidelity design.

What will you learn in this guide?

After reading this guide, you should be able to build a high-fidelity design for your app, even if you have no experience in web design.

Why do you need side projects?

Side projects are a great way to learn outside your job. They allow you to:

• Learn technologies outside your current role.

  • If you know the backend, you can learn the front end. If you know the front end, you can learn the back end. If you know both, you can learn infrastructure.

• Learn skills outside tech.

  • Marketing

  • Sales

  • Design

By getting the skills, you can have more angles to look at your career. You’ll understand the business side of programming and product development much better. This will help you to progress faster in your career.

Personal example

During the Covid-19 lockdown, I had spare time, so I built a side project with my colleagues. We decided to make a side project to help restaurants serve clients faster with fewer staff members.

Pijero Mobile Ordering system.

While building Pijero, I learned the following skills:

• Bootstrapping a project.

• UX/UI design.

• Branding.

• Web development.

  • Next.js.

  • Vue.js + Nuxt.js.

  • React Native.

    • Releasing an app to Apple Store and Google Play.

• Product development.

  • Mixpanel tracking.

  • Talking with customers to develop new features.

• Customer support.

• B2B Sales.

• Marketing.

If you want to learn more about the project, you can check out https://pijero.com/

How to come up with a side project idea?

The goal of technology is to solve real-world problems. If you have specific domain knowledge, you may have insight into how you could solve that domain’s problems with code.

Here’re three simple ways you can start.

a) Solve your own problems.

b) Solve problems for people around you.

c) Research problems you can solve online.

Personal example

The main thing I’ve learned from my side project with Pijero is that you need deep insight into the industry you’re building for. Neither of us had insights into the hospitality industry, which made us hard to develop solutions that solve problems relevant to the customers.

This time I picked the option a). I know that I need to learn how to solve my own problems first, then build an app that can solve them, and then I can start thinking about other people’s problems.

I know that by developing an app I can use myself, I’ll be able to tell how good it is.

💡 Using your own product for better product development is called “dogfooding “. The company behind IntelliJ IDEs, JetBrains have pioneered it over the years.

The developers creating those IDEs use them to write code forcing them to see the flaws of their own product faster than they could from their customers.

How I came up with my new project idea

One evening I was reviewing my career plan and created this diagram.

First, I wrote down some options I could take. Then I rated the options based on the following criteria:

• Learning opportunities.

• Earning now.

• Passive income potential.

• Need for active effort.

• Need for an audience.

• Need for capital.

• Need advanced technical knowledge.

• Need for a network.

By seeing my possible decisions visually in this diagram, I solved my own problems and thought, “Wow, I should create an app out of this!“.

Researching existing solutions

Although I discovered something interesting, I didn’t let the hype of building an app carry me away too far. I invested some time in researching existing solutions.

I’ve found that Weighted Scoring Model is a very close solution that could roughly solve the same problem.

Weighted Scoring Model. Credit: https://buildd.co/product/weighted-scoring-model

To put it simply, Weighted Scoring Model works in the following way:

Step 1: Define the Criteria: Identify the criteria or factors important for evaluating or scoring the options or alternatives. Cost, effort, time, risk, and ROI (return on investment) are great ones to start with.

Step 2: Assign Weights: Assign a weight to each criterion based on its relative importance or priority. The weights reflect the significance or impact of each criterion on the overall decision. The total weights assigned should add up to 100% or 1.

Step 3: Set Scoring Scale: Determine a scoring scale that will be used to evaluate each criterion. It could be a numerical scale, 1 to 5, or a descriptive scale, such as poor, fair, good, and excellent. Make sure the scoring scale is consistent across all criteria.

Step 4: Score Each Criterion: Evaluate and score each option or alternative against each criterion based on the established scoring scale. This step involves independently assessing each option's performance or suitability for each criterion.

Step 5: Apply Weighted Scores: Multiply the scores obtained for each criterion by their respective weights.

Step 6: Calculate Total Weighted Score: Sum up the weighted scores obtained for each criterion to calculate the total weighted score for each option or alternative.

Step 7: Interpret and Compare Results: Analyze the total weighted scores to interpret and compare the options. The option with the highest total weighted score is considered the most favourable.

Applying this model allowed me to simplify my thinking. Instead of a dynamic amount of factors, I settled on 6:

• Financial cost

• Level of effort

• Time investment

• Risk

• Short term return

• Long term return

Find out how I can add value to existing solutions (aka discovering competitor’s app limitations)

I created a Google Sheet and plugged my decisions and numbers there.

I’ve found that according to this model, I should take the “Start a B2B SaaS Company“ option.

Well, that’s not an option for me right now as starting something like this is a huge time, financial and effort commitment. It’s also highly risky.

I realised that this model is flawed. I can’t just take the highest-scoring option for each decision I make. The score might be the highest, but the risk involved might not be attainable.

Digging deeper into the existing solutions

There was another thing I didn’t like about the Weighted Scoring Model:
- It forces you to specify weights. But how do you know which weight is correct? Is it 0.1 or 0.5? It introduces complexity to decision-making that’s hard to justify through the value it brings.

A better approach would be to think in terms of trade-offs. It’s hard to find an option with a high return likelihood which is not very risky. But it is possible to plot them to find the most sensible intersection.

For example, I would like to specify that I’m optimising for long-term reward opportunities with the least effort needed.

My app’s value proposition

Through this research, I learned that I can add value through my app by allowing users to list their decisions, specify what they’re optimising, and find the best solution for their situations.

In other words:

Step 1: describe the problem you’re having

Step 2: list the possible options you have to solve that problem.

Step 3: rate the options regarding risk, reward, time, etc.

Step 4: See your options based on the tradeoff you want to make.

Using Google Sheets to build a prototype without coding

Next, I tried to create a functioning prototype without coding to see if my hypothesis for tradeoffs being more useful than a weighted score was true.

💡 How it works? You should look for options that are low in the negative and high in the positive scores.

Or, in other words, low into the right side of the chart above.

Key takeaways from the “How to come up with a side project idea” chapter

1. Instead of thinking of an idea, solve a problem.

   1. Solve a problem for yourself.

   2. Solve a problem for others.

      1. Colleagues

      2. Family

      3. Friends

      4. Online communities

2. Research existing solutions for your problem

   1. Does the solution already exist?

      1. You win, your problem is solved, and you don’t have to design or code.

   2. The solution doesn’t exist?

      1. You also win. You can build something new and useful.

3. Find a unique value proposition you can bring to existing solutions.

   1. For me, the existing solution is the Weighed Scoring Model

   2. I made the following improvements:

      1. Removed the weights to reduce the complexity of using such a system.

      2. Changed the decisions making process from the overall score to make you think about what you’re optimising for and your tradeoffs.

4. Create a functioning prototype to see if your app idea is useful when outside the idea realm.

   1. In this example, I used Google Sheets.

   2. Here’re other tools I recommend

      1. Notion

         1. Its AI integration is super strong. You validate many ideas without coding.

      2. Airtable

         1. Great tool for advanced spreadsheets and automation.

How to design a side project?

After you have the idea for a project, it’s a great idea to make it visual. I like to split the process of designing an app into two stages:

1. Low-fidelity design.

   1. Move fast, discover UI blockages.

2. High-fidelity design.

   1. Add brand colours, fonts, and logos.

   2. Make sure the design is mobile-friendly.

Tools

• Figma

  • Collaborative tool for advanced designs. Great for making your designs look professional and get feedback from others.

• Excalidraw

  • Simple tool for sketches and ideas. Great for fast iterations.

Sketch (low fidelity design)

I sketched the idea fast to keep the creativity going. This allowed me to test if the concept I’m designing solves my problem (making decisions based on trade-offs and optimisations).

Here are the steps I designed for my app:

Step 1 - What problem do you want to solve?

This is the first step in the process for my app. Start with one question at a time that you want to answer.

Step 2 - What options do you have?

Next, specify what options you have. This is the equivalent of adding new rows in the Weighted Scoring Model.

Step 3 - Evaluate options

As a user, you can add scores for the options you specified earlier. Add scores from 1 to 5.

Step 4 - See tradeoffs

Lastly, you can specify what tradeoffs you are optimising—for example, Low Risk and High Return, Low Effort and Low Time Commitment and more.

The final design (high fidelity)

I was happy with the flow after making several iterations of my sketches. I decided it was time to move to high-fidelity design.

Figma is a tool of choice for me for high-fidelity designs. It’s free and easy to get started.

Design Component system

If you read the previous issue of Building Bytes, you might’ve seen that I picked shadcn/ui as the UI framework.

I also found some beautiful Figma components allowing me quickly design my ideas.

You can find these Figma components here.

End result

In the screenshots below, you can see what I was able to design by following the steps in this guide.

Step 1 - Tell about yourself

Step 2 - What challenge/problem do you have?

Step 3 (optional) - View examples of problems.

Step 4 - Specify the options you have

Step 5 (optional) - edit the options you have

Step 6 (optional) - delete the options you have

Step 7 - Rate your options

Step 8 - See the tradeoffs of your options

Summary

In this newsletter issue, we’ve discussed coming up with an idea, researching existing solutions, finding a way to add value to existing solutions with your app, drawing a basic sketch and finally using that sketch to create a final high-fidelity design.

We'll start coding our designed solution in the next Build Bytes Newsletter issue.

Learning resources

• The last issue of Build Bytes discusses choosing brand colours, fonts, tech stack, etc. You can read it here.

• You can view the Figma design for gile.to project here.

👋 Are you building a side project right now? Let me know in the comments!

P.S. I’m open to feedback on this app’s design. If you want some things improved, drop your thoughts in suggestions! Let’s build this app together 🙌