Build software products the right way — feature doc & wireframes

Hrishikesh Pardeshi

Co-founder, Product & Dev at Flexiple ($700,000 revenue) & Remote Tools.

Last updated on19 Feb 2024

We all want the end product to be a replica of the thoughts/ ideas we have in our mind. However, often a lot is lost in translation from the entrepreneur to the designers and developers working on the product. Hence, communicating these thoughts in the right structure — features, user flows or even initial-stage thoughts — is extremely critical to building a great product.

Let’s run you through a couple of useful concepts/ tools that will serve handy to strike the right chord with your designer or developer.

Preparing a feature doc

It is now time to start preparing documents that will be directly used in building your application. The simplest way to first communicate your idea to a developer or a designer is to give him/her a list of features you want the app to have.

The first cut of features we wrote down for Flexiple was as follows:

1. Separate signup pages for freelancers and companies

2. Onboarding form for company (description, website, size, industry)

3. Onboarding process for freelancers — Objective test, Task, Interview scheduling

4. Profile page for freelancer (overview, education, employment, portfolio)

5. Profile page for company (description, website, industry)

6. Tree-based project posting form

7. Recommendation engine — best-fit freelancers for projects & vice-a-versa

8. Dashboard for freelancers (projects that he/she can apply to)

9. Dashboard for companies (posted projects & recommended freelancers)

10. Payments dashboard

11. Project management tool

Now that’s a huge list!

There are two things about the list above that are worth discussing:

• Many features are quite extensive & complex (e.g. recommendation engine, project management tool). It’s perfectly fine to have such features noted in a single line in the first cut. You can delve into the specifics as you move ahead.
• The feature list is quite long. Not all features are necessary for the MVP — a product that contains minimal number of features to validate your idea substantially and be usable.

So, we revisited the list again and observed which of these features, if not present, would still make the product usable.

1. Separate signup pages for freelancers and companies

2. Onboarding form for company (description, website, size, industry)

3. Onboarding process for freelancers — Objective test, Task, Interview scheduling

4. Profile page for freelancer (overview, education, employment, portfolio)

5. Profile page for company (description, website, industry)

6. Tree-based project posting form

7. Recommendation engine — best-fit freelancers for projects & vice-a-versa

8. Dashboard for freelancers (projects that he/she can apply to)

9. Dashboard for companies (posted projects & recommended freelancers)

10. Payments dashboard

11. Project management tool

Again, a very minimal version of these features did the trick for us and hence, we didn’t implement them in their entirety. For example, the tree-based project posting form was replaced by a simple form with text fields, the alternative to the payments dashboard was asking the users to fill in their account details in the profile. Simple yet effective.

So, your action items are two-fold:

1. Write down all possible features you envision the app to have (one-liners to describe the features should suffice).
2. Create a shorter version of the list by striking off all features that can either be simplified or skipped altogether in the MVP.

Wireframes and rough sketches

As an entrepreneur, it is important to understand that the app itself is the manifestation of your idea. So, you should be in a position to visualise every page of the app in detail. This helps avoid surprises post design & development.

Let’s try to understand this better. You will have a version of the user flow in mind. A wireframe or a sketch allows you to accurately convey it to your designer/ developer and not leave it to his/ her interpretation. When building Flexiple, we knew we want to have the list of recommended freelancers shown as summary cards with an option to view their detailed profile. We made sure this was part of the wireframes we sent over to our designer.

The importance of sketching your app yourself can’t be stressed enough. It becomes even more critical when you plan not to have a designer at all — your developer then completely relies on your wireframes to build the UI.

Sounds tough? Just pick up a pen and paper and sketch out the pages for your app. You don’t need to be artistic or even accurate in terms of individual elements. Have a look at our first attempt to visualise Flexiple:

Now, a more nuanced (albeit still amateur) version of these sketches are wireframes. A sample from Flexiple below:

In summary, it is time to get your app on paper at this stage, to help you and even others visualise your app better. Be it rough sketches or wireframes, it is important to visualise your app in some form.

What’s next you ask? We delve into whether you should consider hiring a professional designer, keeping in mind the huge value he/she can bring to the table.

Watch this space to read about it!