On Day 9 of our Knowlo journey, we’re embracing utility over polish as we dive into wireframing the prototype, using Excalidraw to create basic mockups of the product.

Today we’re going to put on our designer and product manager hats. After mapping out all the pages we’ll need in our prototype on Day 8 with the help of CofounderGPT, it mostly gets a break today while I dive into the world of basic product wireframing and try to find a UI template that meets our needs.

In this very early stage of our startup, we don’t want to spend too much time on the polish. We want to build something we can test as quickly as possible with potential customers. The focus for now is utility and not so much how Knowlo looks. Most customers will use an ugly product if it solves a pain point for them.

So Let’s do some basic drawings.

Which pages need mockups?

The reason we are doing this is that we need to have a visual way to represent how our prototype will look like so that CofounderGPT and Slobodan can bring it to life.

I usually like to start with a diagram:

The grey boxes we already have and we have to build the blue ones. These are all the pages that we’ll need in order to be able to test Knowlo out in Vacation Tracker and a few other pilot customers.

Some of these pages are pretty standard: Login, Signup, Forgot Password and My Account. So there is no need to draw mockups for those pages, I’ll just jump straight into the product pages.

Wireframing tools

Before we get into doing some mockups, I want to take a second to discuss a few options when it comes to tools that you can use to sketch your ideas. For this article, Excalidraw was used for all wireframes and diagrams. It was suggested by Slobodan and I really like it.

Here are 5 other recommendations from CofounderGPT for simple wireframing tools:

1. Balsamiq: A simple tool for quick, low-fidelity wireframing.
2. Moqups: An intuitive online tool for wireframes and flow charts.
3. Pencil Project: Open-source and straightforward for wireframes and diagrams.
4. Wireframe.cc: Minimalist web tool for easy wireframe creation.
5. MockFlow: User-friendly with templates for wireframes and flow charts.

One more that I heard was good is TLDraw, but I never used it. The only one I’ve used on this list is Balsamiq and from what I see they’ve gotten quite expensive. All the other options are either free or have a free tier but I’ve never used them. So decided to stick with Excalidraw because It’s really simple, Let’s me work quickly and It’s free.

Dashboard page

The first page our future customers will see when they sign up or log in is the dashboard page. So I guess it makes sense to start there.

Here is a reminder of what CofounderGPT suggested we should put on the dashboard page:

I think we can improve on some of this as we’re mocking it up. For example, we’ve already changed the menu and “Training” is now a separate page. we’re not going to do a welcome banner for now, we’ll be onboarding this handful of teams ourselves. And we’re going to do the quick stats and recent activity sections a little differently.

Here’s my quick and dirty mockup of the dashboard:

Very basic, I know. But that’s ok. If people start finding utility in this product, they’ll tell us what they absolutely need on this page.

I made a few small edits to what CofounderGPT suggested. Who knows if they make sense? We’ll find out soon enough hopefully.

Import page

The first thing users will want to do when they sign up for Knowlo is to import some data. The product is kind of useless without some data to build tooltips from, so Let’s take a look at what CofounderGPT suggested should go on this page:

All of this makes sense. So I went to back to Excalidraw and made a wireframe according to CofounderGPTs specifications:

I added one section outside what CofounderGPT suggested which is the Import history table at the bottom of the page. But besides that, everything else is according to the specs provided by CofounderGPT. Although there are no mockups for 2, 6 and 7 on the list, there are detailed descriptions provided in the specifications that we wrote for the Import page.

Tooltips page

The next thing users are probably going to want to do after they import their data is to create a tooltip. The basic idea for this page is that we need an easy way for people to create, edit and delete their tooltips. we’re not quite sure how people are going to interact with this type of product, so we want to keep it really simple for now and build on it as we see how people are using their tooltips.

Here is what CofounderGPT thinks should go on this page:

I reviewed this list with Slobodan, and we agreed to do it a little differently than how CofounderGPT suggested we do it. Specifically, we don’t want all these different fields for the tooltips. We think the better way to do it is to allow Knowlo to create the tooltip based on the training that it was provided.

Here is what we came up with:

Super simple and clean for now. Users will be able to see the names of all the tooltips and associate some tags to each tooltip. they’ll be able to edit, archive or get the embed code for each tooltip from the main Tooltips page.

In terms of creating a tooltip, this is where Slobodan had an interesting idea. When creating a tooltip, users will provide a name and a short description of it and from there, Knowlo will generate a preview of it based on the training provided through the imports. If the user is not happy with What’s being suggested, they can make changes to their description and reload the preview. Users will also be able to vote on the tooltips that Knowlo suggests to help improve the recommendations.

Here how this page will look like:

When a user clicks Save, Knowlo will provide a code that will allow them to be able to embed that tooltip into their software product.

Analytics & Reports

Once we’re up and running with our tooltips, we’ll probably want to know if they’re being used and how useful our customers think they are. that’s what the Analytics and Reports page is for.

Let’s see What’s in the specs for that page:

The description looks relatively straightforward. Here is what I came up with in Excalidraw:

I modified the table columns a bit because this is what is more logical for me. Besides that everything else is how CofounderGPT described it. One fun thing to try once we have this up and running is to download the CSV report and then paste it into ChatGPT to analyze the results.

Training page

Once users have this feedback loop going and they have some analytics coming in from their tooltips, they’re probably going to want to improve the training. One way to do that is to keep importing more data. They may also want to look at which questions people are asking that Knowlo was not able to answer, or questions that it answered with a lower level of confidence. This is another way Knowlo customers will be able to improve the tooltip answers.

I have to say, I’m not exactly clear on how this page will work. I understand the need for it and it makes sense in theory that there should be a place where you can see what questions are unanswered. I’m just concerned that this training page may end up getting filled with garbage information and irrelevant questions. But Let’s start with something and we’ll improve it once we see how it works in practice.

Here are the specs we came up with for the Training page:

And based on those specs, here are the wireframes I came up with:

we’ll see what Slobodan has to say about this page. I didn’t create a mockup for what happens when you click on the Fix button, but there is an explanation for Slobodan in the specifications.

Finishing wireframing

The rest of the pages are pretty standard. I did wireframe one or two more pages, but those pages are not the important ones. The most important pages of the Knowlo product are the ones that are in this article.

You’ve probably noticed that I made a bunch of small edits to what Cofounder GPT suggested should go on each of the pages in Knowlo. I did that because making those small changes made sense to me in terms of how we want to use Know inside Vacation Tracker. It doesn’t mean that It’s the better way to do it and it may turn out our customer may want those pages to look different.  

The workflow we’ll be doing here is that CofounderGPT is came up with the first idea for each page. Then I refined and improved the pages a bit during wireframing. And finally, Slobodan will make any necessary adjustments and improvements as he’s actually putting the product together with CofounderGPT.

Product template

As you’ve probably noticed, we’re using a lot of templates for everything in order to save time and move more quickly. we’re going to be doing the same thing we did with WordPress with our product. In other words, we’re not going to hire a designer to come up with how our product is going to look like. we’re going to find a template which has all the elements we’ll need on the pages we just mocked up. To this day, we’re using Ant Design for Vacation Tracker which we modified to suit our needs.

The good news is, there is nothing extraordinary on any of Knowlo’s product pages. It’s all pretty standard stuff. So most templates for products would probably do. In fact, we may end up using the same one we’re using for Vacation Tracker since we’ll be using the same front-end technologies. Another option Slobodan suggested we consider is Tailwind CSS.

The available choices of the product templates will depend on the technologies you decide to go with. But most front-end technologies have some templates to make it easier for developers to put user interfaces together. Themeforest, which is where we bought our WordPress template from, also has all kinds of UI templates. And there are lots of other websites to choose from, many of which offer free templates.

Both of the choices we’re looking at are open source which means they’re free to start working with. Tailwind CSS has some additional stuff you can buy to make your life easier. Since Slobodan will mostly be working with this template, he’ll make the final call on which template he thinks will get our prototype out quicker.

Scoreboard

No money was spent today, only time:

Time spent today: 6h

Total time spent: 57h

Investment today: $0

Total investment: $288.54

Users: 0

Revenue: $0

What’s next?

There are two things we’ll be working on next week and I’m not sure in which order we’re going to do them. We need to do a deeper dive on our go-to-market strategy while Slobodan writes some code with Cofounder GPT and starts bringing these wireframes to life.