Building great technology starts by building a great process. This Playbook describes the process we use at FullStack, and includes all of the best practices, and tips and tricks we've learned over the years. We've included an example project (TableBank) to show you the process in action. We encourage new and potential clients and new employees to read it so they know what to expect when working with us. This is a living document that is regularly updated by our team as we learn new and better ways of doing things, so expect to see changes and improvements over time.

The Introductory Call

Most new clients are referred to us by existing clients, find us through our involvement in the tech community, or discover us on Google. After doing some basic research they will usually get in touch by completing a form on our website or by shooting us an email.

Once we receive the initial request, we’ll schedule a 30-minute call to discuss the project in more detail and answer more specific questions like:

  • Does your project fall within our area of expertise (custom software, web apps, mobile apps, integrations, and web design)?
  • Do you have a sufficient budget for the scope of the project?
  • Does your timeline work with our current availability?

Once we’ve confirmed that we're a good fit for your project, we will talk a little more about the FullStack culture and our philosophy on building technology. We will get into more detail about rates and timelines as well.

If it looks like we have a good match, we will usually sign a mutually facing NDA so you know your IP is protected, then we’ll start the first (and most important) step of the development process, the discovery phase.

Example: In 2015 Willow Tree Roots, a nonprofit organization focused on empowering HIV positive women in developing countries, contacted FullStack Labs seeking help with managing their community banking program. Community banking is a banking system in which small groups of people form a micro-bank for the purpose of making deposits, earning interest, and taking loans when needed. Willow Tree Roots was implementing community banking programs in Kenya and Peru, and needed an easy way to track depositors, deposits, withdrawals, interest earned, loans, loan interest rates, late fees, etc.

The Discovery Phase

Building custom software is inherently complex. Even seemingly simple apps have hidden layers of complexity that must be uncovered and accounted for before beginning development. The discovery phase allows our team to invest the time needed to understand your app from A to Z, and go over every required feature, user story, user type, screen view, etc., which in turn allows us to more accurately estimate time and cost.

Generally, the discovery process includes:

  • Describing the different types of users (general user, admin, super admin, etc.).
  • Describing all major users stories for the different types of users.
  • Describing all major features of the app.
  • Building wireframes for the primary pages of the app.
  • Deciding which technologies will be used for the front-end, back-end, server, etc.
  • Building a detailed timeline for each major section of the app and each phase of the software development process.
  • Building a detailed cost estimate for each major section of the app and each phase of the software development process.

At the conclusion of the discovery process we'll provide you with a detailed document that describes all of the items listed above.

Example: After our first call with Willow Tree Roots we had a general understanding of what they wanted to build, but we knew there was a lot of hidden complexity that we needed to uncover during discovery. Below are the findings from our discovery process, as well as wireframes and time estimates. The app that we eventually built for Willow Tree Roots was named TableBank.

The Design Phase

Great apps start with great design. You can build the most amazing app in the world, but if it's ugly and difficult to navigate, no one will want to use it, and your efforts will all have been for nothing. The success of your application is as important to us as it is to you, so we place a high degree of importance on getting the design right, so that you end up with an app that’s as beautiful as it is functional.

Generally, our design process includes:

  • Building wireframes of each page of the application: Wireframes are black and white sketches that show the layout of each page. They show the general structure of the different views and where buttons and content will go. They may also describe user interactions, like swipe left, swipe right, single tap button, double tap button, etc.
  • Sitemap Construction: Once all of the wireframes are complete, we usually build a sitemap showing how all of the pages and sections of the app interact with each other. For instance, it will show which page a user is taken to when they click on a button or complete a form.
  • Graphical Interface Design: Next, we’ll be ready to design the graphical interface of your app. At this stage we decide on font types, color pallets, icon libraries, etc. All of this will be incorporated into a style guide, which can be used to guide future design campaigns.
  • Color Mockup Creation: Once the style guide is complete, we build full color mockups of each page of the app, showing exactly what each fully designed page will look like.
  • Interactive Prototype: Finally, we import all of the mockups into InVision App, and link them together, creating an interactive prototype that looks and feels like the finished app. Explore all of our prototypes.
Example: TableBank was a relatively simple application with only 11 screens to design, so the design phase was shorter than normal. In about four days of work we were able to design every view of the app, and load all of them up to InvisionApp, where we stitched everything together, and created the following interactive prototype. Although this prototype looks and feels like a fully functioning app, it’s really just a series of designs.

Interactive App Prototypes

The Development Phase

Coding is the most complex and time consuming part of building software, so we only start writing code once the discovery and design phases are complete. This ensures your budget isn’t wasted building features and functionality that will require major revision, or worse yet, have to be thrown away and completely rebuilt. It’s best to make these mistakes during the much less costly design phase, when things can be changed with just a few clicks of the mouse. As we mentioned above, we would not take on a project without a discovery process or design phase (skipping these steps pretty much ensures failure), we would rather decline the project than agree to a process that we know will fail.

On most projects, the development phase includes:

  • Setting Up the Development Environment. We begin by setting up our development environment, which basically involves getting all of the systems and software in place to start developing.
  • Developing the Data Architecture. This includes structuring the database in the proper way, setting up user authentication and user accounts, etc. At this stage we are basically laying the foundation of the app.
  • Building Features. We take all of the user stories discovered during the discovery phase and enter them into Jira, our developer project management system. We then assign those stories to the different developers on the project, and estimate the time required to build each one. As the developers complete the features, they mark them off in Jira, and the feature is moved to quality assurance.
  • Quality Assurance. As features are completed, our quality assurance team reviews the code and tests the feature to assure quality and look for bugs. Additionally, we set up an automated test suite that will ensure the functionality of the application. We use several testing paradigms that in conjunction, provide coverage of high level behaviors of your system as well as ensure each separate modules functionality. With a proper test suite your company will be able to achieve future development, optimizations and maintenance with ease.
  • Putting it all Together. Feature by feature the app is built until finally, the beta version of the app is ready to be shipped.

Let’s Talk Project Management

As you’re probably figuring out, building custom software applications is a complex process that requires collaboration and input from multiple people. It’s not uncommon for a project to include half a dozen people (or more) on your side, and half dozen people (or more) on our side.

To give you an example, most of our projects will include:

  • an account manager who works on the business side of things
  • a project manager who oversees the project itself
  • a designer
  • a frontend developer
  • a backend developer
  • a quality assurance tester who reviews the code and tests it for bugs

Given the number of people involved, communication, collaboration, and management can be challenging. Based on our years of experience, we’ve developed the following process that we use on each and every job. It’s designed to increase productivity and maximize your budget, while at the same time keeping you up to date on what’s going on.

Here’s what you can expect when working with us:

One communication channel. The last thing we want is everyone on your team and everyone on our team spending all their time discussing the project over email. We find email to be an ineffective method for communicating within groups. It’s slow, lacks transparency and clarity, and doesn’t integrate with our other project management systems. So instead we use Slack, an enterprise focused, team chat application.

For each of our projects we create a “Slack Channel” which is basically a group chat room where everyone on your team and ours can communicate and collaborate. Sometimes the communication is between someone at your company and someone at ours, and other times the communication is between our developers, managers, and designers. For instance, it’s common for our developers to use client chat rooms to discuss challenges they are having, or for our project managers to ask for updates or give advice. This level of transparency into our team communications gives you complete visibility into what’s happening on your project, both good and bad, and makes collaboration and communication between your company and ours easier and more effective.

Additionally, we’ve integrated all of our project management systems into Slack, which allows us to automatically post updates to the Slack channel throughout the day. For instance, each time a Jira story is created or completed, and each time a GitHub pull request is merged, a notification is posted Slack. This allows Slack to serve as the activity feed for the project, showing everything that’s happening, as it happens.

FullStack Lab's Slack

Jira

Building technology is a complex undertaking that requires careful planning and extreme organization. There’s thousands of things that need to be completed in specific ways and in a specific order. Trying to achieve this level of organization using email, excel, verbal conversations, etc. is nearly impossible…. so instead we use Jira. Jira is an enterprise project management software solution built specifically for developers. For each of our projects we create a Jira board and provide access to everyone on your team and ours. Each Jira project is broken down into “sprints” which are short term (usually two week) development goals, and each of those sprints is broken down into daily tasks (stories), which are further divided into four groups:

  • To Do - stories that haven’t yet been selected for development
  • In Progress - stories that are currently in development
  • In Review - stories that have been completed by the developer and are being reviewed by our project manager and / or quality assurance team
  • Done - stories that passed review and have been merged

Our goal is for each story to take approximately three hours to complete, so on any given day each developer should complete 2 - 3 stories.

FullStack Lab's Jira

Toggl

It’s important for everyone on your team and ours to know how much time is being spent on the project, where that time is going, and how much it costs. To achieve this we use Toggl, a team based time tracking software solution. Each of our team members uses the Toggl desktop timer throughout the day to track their time down to the second, and assign their time entries to clients and Jira stories. Then at noon each day you automatically receive (via email and Slack) a report that shows you how much time was logged the previous day, who logged it, which Jira story it was assigned to, and the cost, plus the month-to-date time and cost totals for that month. This level of automated reporting ensures that you’re never left wondering

  • “Did they work on my project yesterday?”
  • “How much time did they spend?”
  • “What did they work on exactly and who did the work?”
  • “How long is this portion of the project taking?”
  • “How much is this portion of the project costing me?”
  • “How much time did they spend on my project last week?”
  • “How much time did they spend on my project last month?”

FullStack Lab's Toggl

Weekly Check-ins. For our larger projects, we usually have weekly check-in meetings each Monday, where we update your team on everything we completed the previous week, and everything we plan on completing in the current week. These weekly meetings are a great way for us to update everyone on your team at the same time, and for your team to ask us questions as a group. And when possible, we’ll push up our work-in-progress to our staging servers, and show you what’s been completed and how it looks.

Example: Here’s a picture of the FullStack team meeting with WillowTree Roots for a check-in meeting.

FullStack Lab checking in with Willow Tree Roots.

Internal Project Management. In order to keep your project on track, it’s important for us to keep our team of designers and developers on track. To do this, we have daily, company-wide standups each morning at 9 AM. Each team member takes their turn explaining what they completed the previous day, what they plan to complete that day, and if they have any blockers (things other people need to get done before they can complete their work). If there are blockers we put together a plan to overcome them as soon as the meeting is concluded. Each team member’s daily goal is written down in our goal tracking software, and referenced during the standup the following morning. If everything goes according to plan, these daily goals add up to weekly project goals (also know as a sprints), which add up to monthly goals, which add up to project milestones, which add up to shipped products. How do you eat an elephant? One bite at a time. How do you build awesome apps? One daily goal at a time.

The Beta Testing Phase

Here is where we see how your app behaves in the “real world”. Even the best code will have bugs, so it's imperative that your application is put through its paces by trial users prior to launch. Beta testers often include the final users of the software, who will use a trial version of the app in much the same way they intend to use the final version.

Sometimes the beta process will be broken into a private beta, where only invited users get to test the app, and a public beta, in which anyone can log on and play around with a beta version of the software. This process will undoubtedly uncover bugs, as well as missing critical features, which will need to be addressed and/or added prior to the final launch.

Example: Once version 1 of TableBank was built, we were ready to start testing. We started by having everyone at FullStack use the app at the same time, and try their best to break every feature. This uncovered a few bugs that we were able to quickly fix. Next, we had the team at WillowTree Roots test the app in our office with our help, then in their office, without our help. Once this was complete, WillowTree was ready to test the app in the field. They flew a team to Kenya, where one of their manufacturing and education centers is located, and trained a team of 18 women on how to use the app. This user testing generated a lot of positive feedback from WillowTree’s users, who found the app easy to use and navigate.

TableBank User Testing

The Launch Phase

After months of hard work and dedication, the big day arrives and we launch your live application! Corks are popped, confetti is thrown, and backs are slapped. It wasn’t easy, but that’s the point. As John F. Kennedy said, “We choose to do these things [go to the moon], not because they are easy, but because they are hard.”

Example: After making a few small adjustments after the field testing, TableBank was ready to launch and be used by other nonprofits. FullStack built a marketing website for the app, and the app was launched for public use.

Maintenance

Like any complex system, software requires maintenance. When you buy a new car everything (hopefully) runs perfectly. But over time, if you don’t change the oil, the engine will eventually breakdown and stop working. The same is true for software. The day will never arrive in which your application is 100% complete. A certain level of maintenance will always be needed, including:

  • Error monitoring and bug fixing: All software needs to be monitored for errors on an ongoing basis. As more and more users are added to the system, and the application is used in different ways, more bugs will be discovered and will need to be corrected. We use BugSnag for error monitoring, and New Relic and Skylight for performance monitoring.
  • Dependency management: Modern web and mobile applications are often built using open source frameworks like Ruby on Rails, Ember, Angular, Bootstrap, etc. Additionally, API’s (Application Program Interfaces) will often be used to integrate data sources, payment solutions, social media accounts, etc. These dependencies will change over time...new versions will be released, bugs will be fixed, and integration methods will be changed. To keep your app running properly, you will need to update and maintain these dependencies on an ongoing basis.
  • Performance optimization: As you add users to your application, performance will be impacted, so ongoing optimization will be needed.
  • Security: Cyber criminals are constantly finding new ways to hack web apps, so ongoing security maintenance and monitoring is essential. We offer different security monitoring and maintenance agreements, based on your specific type of application.

Fullstack Error & Performance Monitoring Tools

Ongoing Development

Once users begin using your application, you’ll quickly realize that some of the features that you thought would be important aren’t really needed. And some features that you never even considered are critical and must be added ASAP. This is why it's important to budget for ongoing development upfront. Again, the best applications are always a work in progress, and are never really finished.

Our Development Philosophy

Lean methodology and Building Minimum Viable Products

We are big believers in lean development methodology...which put simply is an approach to building software that emphasizes building the simplest version of your application (called an MVP or Minimum Viable Product). The MVP includes only the core, critical features of your proposed application (and nothing else). This approach is the fastest and most cost effective way to get your app in the hands of users, so you can start getting feedback and learning from their behavior BEFORE you start adding features.

Sounds great right? We understand that our clients want to be as cost-conscious as possible, while getting the best possible product on the market. That’s why we work closely with our clients to ensure that the MVP vision is consistent across the team. Our experience has shown that the more lean your initial offering, the more bang for your buck you’ll get in the long run.

Why is that? Because you won’t be adding superfluous functionality that, while it may seem like a great idea initially, isn’t actually what your users want. Why spend money on code that will ultimately be scrapped. Our clients have found that it’s best to start lean and spend money only on the super-awesome functionality that their users have proven they want.

Let’s Get to Work!

Now that you understand how our development process works and our general philosophy and approach to building successful software applications, let’s schedule some time to talk about your project.