Why choose a custom web application roadmap for your business growth journey?

If you’re considering a custom web application build, chances are you’ve got:

• Legacy applications that are past their use-by date, or
• Big plans for a new system to drive customer value

To help you create a successful outcome, we’ve pooled our 20+ years of experience to share a roadmap and template for launching your custom web application development process.

We’re often asked to parachute into projects that have slid off the rails and help them recover so this insider’s perspective will help you avoid some common pitfalls.

Web Application Development: The Movie Method

The way we think about the web application roadmap is similar to movie production:

Making a …	Film	Custom Web Application
Ideation & Pitch	Storyboarding	Vision Session(s)
Logistics & Planning	Pre-Production	Discovery & Design
Build & Gauge Interest	Sneak Peak Trailer / Audience Testing	Minimum Viable Product (MVP)
Complete Product	Production & Post-Production	Full-Scale Deployment
Digital Distribution	Online rentals, purchases, special features, etc.	Optimization & Assurance

How is a custom web application roadmap like a movie?

Great movies (and web applications) rely on iterative development.

Amazon didn’t start out as the global behemoth it is today. Jeff Bezos originally wanted a user-friendly way for customers to purchase books via the web.

The entire web application development journey of Amazon is a great example of how the user experience and business model of an application can iteratively adapt over time.

First, there is the seed of an idea, which should be carefully refined and validated with key stakeholders before production commences.

Only when the vision and storyboard scripting for the movie are fully understood, do you see full-blown production take place.

One of the main reasons we’re asked to help support struggling custom web application projects is that the fundamental vision of the web application was poorly conceived at the outset.

Sometimes the vision is either too vague or ‘fuzzy’.

Other times the ‘plot’ is too complex, translating into a ‘Frankenstein-application’ with seemingly random use cases and features bolted on from different teams without any clear direction.

That’s why we focus so heavily on two key activities early in the process:

• The Vision Session
• Minimum Viable Product Launch

We do this quickly and early to eliminate wasted time, risk and cost of launching solutions that were never fit for purpose in the first place.

The ‘Movie’ Roadmap Process

This diagram outlines the Custom Web Application journey:

Leading the Custom Web Application Development Roadmap

Define your vision through vision storyboard sessions

The Initial ‘Storyboard’:

First, you need to gather key stakeholders for a 2-4 hour meeting to review the current (and future) business model.

Pay close attention to these key activities:

Business Model Fundamentals:

• Target audience, customer segments and personas
• Value propositions, revenue and costs
• Business activities and partnerships

Market and Industry Forces:

• Key trends: Economic, societal and cultural, regulatory
• Industry forces: Supply chain dynamics, stakeholders and investors, competitors and new entrants, substitute solutions
• Macro-forces: Global market shifts, capital markets
• Market forces: Market segments, shifting needs and demands, switching costs, revenue attractiveness

Commercial Drivers:

• Profit margin: Cost reduction and revenue increase
• Performance: Lead time optimization and manual reduction
• Availability: Digital on-demand, one-touch and no-touch automation
• Stability: More robust backend operations, cloud infrastructure
• Reputation: Digital by design and innovative
• Customer experience: Best-in-class user buying and service journey

Aspirational Goals/Legacy Challenges:

• Growth: Ability to scale the business and remove historic blockers
• Design: Replacing a tired, legacy look-and-feel, with a fresh ‘digital shop-front’
• Alignment: Building technology and infrastructure that accelerates the core business vision, instead of repeatedly blocking it

TIP: There are various free tools such as the following resources to help you think more clearly about your current/future business model

• The Business Model Canvas
• The B2B Elements of Value

Important questions during the Vision Session:

Many discussions and challenges will be raised; here are some common queries:

• How will a new custom web application fit into (or enhance) our business model?
• How will our present IT capability support the business process?
• What information is crucial vs nice-to-have?

Working through your custom web application use cases

Next, identify problems and business cases, then match them against potential technology solutions – including commercial products.

If your project’s design and requirements are still unclear, clarify and focus on the most critical, must-have features.

Keep pushing the proposal with stakeholders and decision-makers until you get a clear response. Remember, many projects don’t happen because people don’t follow up enough.

Confirm it’s the right time for a custom web application

Keep your project tracking system updated.

Once the project is green-lit, bring together all your insights. Work with your IT team or software vendor to plan the next steps, assign resources, and set dates.

Finally, review everything with the project manager and lead stakeholder.

Note: For detailed guidance, read: “When is the right time to build a custom web application?”

Template for Running Custom Web Application Discovery, Design and Web Application Development

Duration: 4-8 weeks

Start by briefing the design team with the information you’ve collected.

Plan for weekly meetings with key stakeholders to jot down current processes and how you’d like them to change.

Here’s what you’ll typically need to create depending on the scope and scale of your app:

• Workflow and Swimlanes: These help you map out your current processes and how they need to operate in the future.
• Requirements Traceability Matrix (RTM): Helps you list desirable features in your new system – the essentials, the nice-to-haves, and things you’ll skip. It’s crucial to note what won’t be included in the new setup so everyone’s clear on any deleted features.
• Wireframes and Mockups: Web page wireframes and functionality mockups for the main screens of your system provide a clear mechanism for communication between all parties involved in the project. You will collaborate with designers and developers to use the wireframe to discuss the structure and features of the web application more effectively, particularly so the front-end development work goes smoothly.
• Data Modeling: Some data modeling work is always required to model the structures and relationships in either your existing or new system. Occasionally you will need to build a staging or transition data model to migrate from the old system to the new platform.
• Design documents: Design documents guide the development process, outlining the technical specifications, architectures, user interface designs, and functionalities of your Minimum Viable Product (MVP). This guidance is crucial for maintaining a coherent development path and ensuring quality assurance.
• Risk Management: You must outline and track any assumptions, risks, and strategies to mitigate potential risks and issues.
• MVP Project Plan and Estimate: A ballpark estimate might also be needed to check if the project is financially viable.
• A Communication Plan: This ensures that information is shared effectively and minimizes disruptions.
• A Change Management Plan: Depending on the scale of the project, you may benefit from a structured change management plan to formally manage any scope, cost, or timeline changes during the project.

Finally, all these elements should be combined into a final presentation for stakeholders to review.

Additional Guidance

Minimum Viable Product (MVP)

1. The MVP addresses must-have requirements for an initial product implementation sufficient for determining service value and next steps.
2. Think of your MVP like a sneak peek trailer for a movie. It gives your audience a taste of the fantastic story to come, leaving them excited and eager for the whole experience. Just enough to spark curiosity and anticipation without revealing all the plot twists and turns too soon!
3. Duration depends on the complexity of the MVP, but three months is a good starting point.

Development Team:

1. Identify and allocate a development team for the duration outlined in the MVP plan.
2. The project manager briefs the team with the artifacts produced during each phase.
3. The team creates virtualized development environments to facilitate easy sharing with all team members and to isolate the technical stack from other projects within your organization.
4. Develop in an Agile, incremental manner of 1-4 week sprints when requirements are:
   1. Broken down into individual tasks across front-end and back-end development
   2. Fully developed
   3. Unit tested, automatically where possible
   4. Deployed to a staging environment (on-premise or in the cloud) for User Acceptance Testing (UAT)
   5. Accompanied by test plans to facilitate evaluation of the requirements and user stories, the resulting feedback is captured and addressed in subsequent sprints.

Reports and Scrums: Throughout this effort, produce:

1. Weekly status reports and meetings with stakeholders to review the latest efforts and assert progress, priorities, schedule, and budget.
2. Scrums or daily coordination meetings to ensure the team is clear on current priorities and overcomes blockers quickly, leveraging team dynamics and knowledge.

Production Environment: As you near development completion of the MVP, establish the production environment.

1. A complete integration test ensures all features work as expected within the production environment.  Clarify who is responsible for such testing.
2. The organization decides who to roll this MVP to e.g. the entire user base or to a select group that fits the requirements addressed by the MVP.
3. Training and help materials are developed and provided for targeted users.
4. Create a support and maintenance plan ahead of go-live to ensure desired availability.

Full-Scale Deployment

Feedback: Develop surveys and touch points with your user base to ensure feedback is properly captured to inform the subsequent full-scale implementation.

Full-Scale Deployment Planning: Develop a plan and budget for the follow-on, full-scale implementation of the custom web application.

Full-Scale Deployment: Consider a full-scale development once the MVP has demonstrated system value and financial viability. Follow the same Agile development as performed during the MVP:

1. Allocate and brief the development team.
   1. Iterative (1-4 week sprint) development, deployment and testing.
   2. Daily scrum or coordination meeting.
   3. Weekly status report and checkpoint.
2. Production deployment:
   1. Precede it with integration and regression testing within the staging environment to ensure expected behavior. Clarify the testing resource.
   2. Develop and provide training or help material for targeted users.
   3. With a large full-scale implementation, consider intermediate production deployments for specified milestones.
   4. Assuming users are already in the system using the MVP, communicate upcoming changes or downtime from a production deployment.
   5. Develop support and maintenance plan ahead of go-live to ensure availability.

Optimizations and Assurances

A modern, scalable, and adaptable web application will be updated and refined often, reinforcing the need for continuous improvements. Work with your IT team or vendor to:

1. Develop a Service Level Agreement.
2. Determine an acceptable budget for addressing feedback after going live.
3. Allocate resources and people to match the budget.
4. Implement and schedule a periodic (weekly or monthly) and systematic production environment check to ensure the (cloud or on-premise) infrastructure runs optimally.
5. Maintain a regular (weekly) touchpoint to review outstanding issues or enhancements (your product backlog) and prioritize what to work on next if development hours remain during the given period.

Action!

Our Helm Budget case study showcases the approach in this guide.

The roadmap is the same whether you are replacing a system or developing a new one.  However, a legacy system may provide grounds for user resistance to a different or modern approach.  Involve all or part of your target user base early, capturing and addressing their concerns where possible.

Spending more time in the early stages (vision, design, and even MVP) is well-spent, avoiding late discoveries that might cause you to change direction later and at a higher cost.  Conversely, reducing MVP requirements can be difficult since many might lean toward a full implementation.

To enable this essential, early collaboration, you need visionaries and curious team members who are not afraid to ask questions of a “why” nature.  As software development approaches, introduce detail-oriented people to the team, having them respond to “what” and “how” questions.

You preferably want people with technical skills that align with your organization’s (infrastructure, software development stack, project management tools, etc.).  Still, these technical skills are often easier to learn than the soft skills aforementioned.

Building a new custom web application is a significant investment for you and your organization.

This roadmap will ensure your organization has clear gates and what to expect.

Selecting your custom web application partner

Almost one in four companies prefer to choose a software development company to outsource their custom web application project.

We thrive in helping organizations along their custom web application roadmap.  We deliver each process step outlined in this guide and love to get involved early.

Our approach works best with forward-thinking organizations, leveraging a desire to provide increased value while being organized about work and communication.

Book a discovery call to explore your custom web application goals, learn from our past projects, and explore what a roadmap for your own web application journey could look like.