CASE BRIEF & WORK

SpecNota is a web app for automating and simplifying functional specifications and requirement documentation, used majorly by Business Analysts, Project Managers, Software Engineers, and Architects. It is easy and quick to use cloud-based SaaS software that allows anyone to create a specification document. The web app aids collaboration on projects by providing all that an individual or a team needs to plan, capture, and manage their Functional Specification Documents (FSDs). This web app is created for project owners and teams working on a technical project that requires them to describe/annotate functionalities and requirements. 

The Task at Hand

As a Business Analyst and Project Manager for IT companies, our client has had to work with project owners who couldn’t vividly paint a picture of how they wanted their website or app’s interface to look like. They didn’t fully know what functionalities to add or what was required. For this reason, he decided to create a platform that can clearly state all the information about a project in terms of its functionalities/features and requirements. He wanted the app to be one that allows project owners, teams, and individuals to collaborate and clearly communicate.  He was sure our team could deliver a ready-to-use web app containing all the features stated in their FSD.

During the discovery meeting with the client, we were informed of the platform’s goal which we bore in mind throughout the development process. SpecNota’s aim is to provide an in-depth picture of a project and help in managing a team’s resources. Ultimately, with the use of the app, scope creep can be reduced, if not eliminated. 

How We Helped

Despite the Coronavirus pandemic ravaging the world, our entire team had proactively embraced the act of working remotely. We were certain that though we were all away from the office, we could still deliver quality products within the stipulated time frame. We began the development of SpecNota web app in March after the kickoff meeting. It was scheduled to last for a period of four months over six sprints of two weeks each. The development of a web app for technical projects is expected to have a lot of technical bits involved. Thankfully, our client had mapped out what they wanted, the interface, functionalities, and all. However, some of those features evolved during the development process. Among all the features of the app, here are some of the most notable ones:

The Annotation Board: This is a canvas-like interface where users can upload or drag images into their board. The users can then annotate such an image by clicking on the ‘Call-Out’ icon which has a set of numbers. These set of numbers are used to identify sections on the image where explanations or instructions are stated. 

Comment: Here, users can drop comments on a separate call-out for other team members to see and take note of. Each call-out or annotation number can have its own separate chats. It all depends on how they want to make use of it. 

Admin Profile: The admin profile has a data analysis feature which is in the form of graphs, bar charts, pie charts, and line charts. An admin manages the number of active users on the platform or teams working on a project. With the ‘Notification Text’ function, the admin can also broadcast messages to his team members/collaborators. 

Templates: With this feature, the admin can create templates or pre-defined pages for the users. This eases the work on the part of the team members since they won’t need to create all their designs from scratch. 

Assigning Pages: A user who is the project owner or creator can assign a project or pages to other collaborators or team members that have been added to the particular project. 

Project Status: This indicates the current stage of a project. A project status could be: Open, In-Progress, Approved, On-Hold, or Close. It helps users to be aware of a project’s current stage. 

Activity Stream: This keeps track of all that is happening on a project or all projects created by a user. It shows when a user adds/uploads a page or image as well as when they make comments or a change in the project status. 

Flagged: Once a user is tagged to a section in the annotation board, they get a notification which appears in the ‘Flagged’ section when they log in. 

Export: Users can export annotated pages or tables into a PDF format which they can eventually print out and distribute to project stakeholders. 

Subscription Plans: Apart from the free plan that allows all new users to create one free project/page, SpecNota has three other subscription plans. They are Freelance, Collaborators, and Organisation. Depending on the scope of a project, and the number of collaborators or team members, users of the app can easily subscribe to whichever best suits their needs. With the subscription feature, there was also the need to integrate a payment gateway. 

This web app was developed in such a way that projects have a hierarchy made up of several pages. A project can have a number of pages and a page can either be an annotation page (one with an annotation board) or a text page. The text page gives users the space needed to write an elaborate text or a review of the project. It typically looks like Ms-Word though without all the features. On the text page, users can do various things to a text like, bold, italicize, underline, align, justify, change font size, list items, and more. Furthermore, an annotation page can have a number of screens added to it. Apart from all the above functionalities, there are also other features like predictive text, embedded documents, annotation text database, user profile, and more. 

In Addition

Over 50 APIs were integrated into SpecNota web app to bring to live most of the functionalities. This project was developed by two Software Engineers and a Project Manager who ensured the proper execution of the project. Our client was carried along every step of the way from the beginning of the project to its delivery and beyond. We used JIRA as our project management tool and fixed regular demo dates when the development team presented the work done so far to the client and his team. On such days, we get their feedback and make adjustments if need be. For the app’s front-end development, Javascript was used along with React as the library while we used Python on the back-end to write the APIs. According to the client’s preference, the app was created to run on all browsers that support HTML5. 

CASE RESULT