5 Steps To Making Web Apps Work
Over the last few years, we’ve worked with our clients to build a variety of web apps. Web apps deliver more complex functionality than regular websites, and often replace the need for software that is installed on a computer, providing services such as email, word processing, and even accounting. Almost anything computer software used to do can now be done ‘in the cloud’. As the internet becomes a more established way of providing services, so our clients are increasingly asking us to design and build web apps for them.
We’ll always build a web app from scratch, as this is the best way to fulfil the client’s requirements. Each client’s business is different, so it follows that the online services they wish to provide, as well as the way they would like them designed and supplied, will also be very specific. But there are some general principles we tend to adhere to when undertaking the development of web apps.
Let’s take a look at the five stages involved.
We take the time to fully understand the client’s needs. It’s worth discussing the business requirements in great detail. If the web app is to replace an existing system, we’ll also take care to understand and document the functionality and technical infrastructure so we can migrate users from the existing platform to the new one without disruption.
We’ve been working with food trends agency thefoodpeople for a while, and have built a complex web app that enables them to distribute their content and manage subscribers, as well as a wealth of other services, all through their TFPTrendhub platform. They were previously using Microsoft Sharepoint as a way of engaging with their subscribers, but the shortcomings of this off-the-shelf service were beginning to frustrate both thefoodpeople and their clients alike. When we initially discussed the project with them, we took the functionality of Sharepoint as a baseline, and merged this with the ideas and ambitions of thefoodpeople to make a truly tailored solution.
We take care to ensure that we cover all aspects of the app during the design phase. There are two main areas to this process: abstracting the client’s business requirements into a database structure and core logic that we will implement in code, and wireframing the interfaces via which users will interact with the app.
It became evident in our early discussions with thefoodpeople that a flexible permissions structure would form the core of their web platform. They needed fine-grain control over access to different services within the app to enable them to build subscription packages for different companies. At this stage we didn’t know what future services were to be included, as they would be developed and integrated into the platform as thefoodpeople’s business expanded. Likewise, we were careful to develop reusable components in our wireframes to compliment the modular and extensible principle of the development process.
We always aim to prototype our design ideas before undertaking a complex build. This acts as a sketch of the main functionality, and can help identify any problems with database design or coding concepts. The key is speed. We use frameworks like Laravel and Bootstrap to allow us to quickly assemble core business logic and interfaces, so we can interact with them, test them out with dummy data, go all out and try to break them. Problems identified at this stage are far easier to solve than those discovered just before you hand over the project to the client.
Alongside prototyping, we also had to undertake a little research and experimentation with the foodwatching online project. They have a large archive of content in pdf form, and we needed a way of indexing this so clients using the platform could quickly find the most relevant content. Rather than finding and downloading an entire pdf document, and then scrolling tediously through for a mention of a search term, we tried various methods until we were able to rank individual pages within scores of documents in terms of relevancy. This has become one of the major selling points of the platform.
During the coding of the project, we like to employ an iterative approach. We will develop the next stage of functionality, merge it into the main app, test that it does what it should, and often discuss the new feature with the client. This pattern of incremental development helps to keep the client engaged with the project, and prevents it veering too far from the client’s expectations. It does of course have the downside of being far less dramatic than ushering the client blindfolded into a room and pulling back curtains to reveal the finished app, amid gasps and tears.
During the coding stage of the TFPTrendhub project, we had to ensure that our ambitions for modern code and boundary-pushing design would not stop thefoodpeople’s subscribers from being able to use the app. Many of them are using fairly antiquated corporate networks, and don’t have an option to use the latest web browsers. So at each stage of the build, we would check that our graceful degradation practices allowed even those still using IE6 to use basic functionality.
The previous steps usually ensure that launch day nerves are kept to a minimum. We like to ensure that everything is tested before giving the client the go ahead to start using the app, and before they invite their customers to start interacting with it. An unhappy experience, ranging from confusion caused by incomplete or poorly designed interfaces to outright bugs, error screens and lost work, reflects badly on all parties. Testing at this stage will move from automated unit testing of code to user acceptance testing and refinement. We’ll ensure the seamless transfer of data from a previous system, and ensure our technical infrastructure – our part of the ‘cloud’ – is running smoothly.
We were lucky enough to be able to deploy a phased ‘invite only’ launch for TFPTrendhub. With all the content migrated from Sharepoint, we were able to send invitations to selected subscribers, guide them through the new platform, and take detailed feedback from them. It rapidly became clear that they were blown away by the design, convenience and all round improvement. From thefoodpeople’s perspective, they were able to manage and fine-tune their subscribers’ experiences much more easily, removing hours of needless admin. More importantly, they can build on the platform, upselling new content and services and growing their subscription base to a scale that would have been impossible before.
If you’re interested in finding out more about the TFPTrendhub project, you can read about it in our thefoodpeople case study.
Or, if you have an idea for a web app or you have a system that needs updating then let us know if we can help!