What is the process behind creating a web application / e-commerce at Studio Present PART 2
Read the PART 1
This is the phase when we are starting to create the skeleton of the web application.
Based on the documentation, diagrams, and priorities, we create a wireframe, sometimes this may even be a clickable prototype.
Every page which is to collect some input data or pull some data from the database is created with the utmost care.
In this process, we also welcome any form of contribution from the clients, as it gives us invaluable feedback and confirmation that all the fields and requirements are in place. This is a crucial part because in this process we make a point of enlightening the clients, i.e. teaching them that sharing their time and knowledge is of great importance.
The wireframe is a rough sketch, without any design elements so our attention can be focused only on the basic functionality.
This is the time in the process, when most of the time, the first changes happen, as compared to the initial technical documentation.
Design UX / UI
As soon as the wireframe is approved, the designer can then start to prepare the future design.
This is the step when we select the relevant colors, fonts, app “voice”, specific to the devices where the app will be most in use.
It is crucial is to pay attention to the particular user niche (age, gender, job type...), i.e. what target group this app is aimed at.
When several of the pages have been designed, we again bring the client to the table for discussions. At this stage we invite the client to provide feedback, we also change certain setups, add or remove options.
For most people, it is hard to imagine the final result based purely on the written documentation because it seems too abstract or too technical… However, once they see the designed elements, it suddenly becomes visual and therefore also easy to react to it.
For the design presentation, we have developed our internal platform. It is something like a client profile page, where we store all the designed pages, versions, and wireframes for a certain project. In this section, the client can have a separate library for logos or other assets for later use.
Sometimes we start with the mobile design, sometimes with the desktop design, mostly depending on app usage.
During this process, the designer can produce a logo and other brand materials, such as pictograms.
How many people need to work on a given project?
As soon as we have the project documentation, wireframe, and design, I can present the project to the senior developers. This gives me the chance to lay out the big picture for the project and point out the possible pain points.
My job is to help and isolate the parts which we have never created before because we need to calculate the time for research. The senior developers are key factors in this process.
We discuss the technology to be used and the way the app will be developed.
The frontend and backend developers will also add their comments, so at the end of this meeting, we are 80% sure how much people are actually needed for completing this project and what kind of tasks can be done by our junior programmers.
Now we can inform the client about when we can reasonably start with the coding process of the app.
Offer for developing a web app
By this stage, we have all the information necessary to make an initial offer to the client.
For the last 3 years, most of our projects have involved creating complex web applications. We usually opt for working using the Agile method with Scrum or Kanban elements. This means that our main goal is to deliver MVP as fast as possible, to see how well it performs and also to have early feedback.
We allow the client to make changes in the application during the development time. My job is to explain to the client what will be different after the current change.
How will these changes be reflected in time/price and functionality?
This flexibility has one “flaw”. The project price cannot be fixed. The price given in the initial offer is purely for information purposes and in 99% of the cases, it will be higher.
It is completely normal that the client does not know what he or she will need in the future (or cannot know before seeing it in action). What’s more, the developers cannot predict every single step in the developing process. It is impossible to estimate time accurately when the app in question is so complex.
Even given our combined experience of 50 years, we always face some unpredictable situations or challenges.
The discussion with the client is again a crucial element at this stage. We present the various options, which may include abandoning of certain function for MVP version or transferring some tasks to the next development phase.
Frequent and honest communication entails mutual respect between the client and the agency and this is vital for completing the project. In this process we strive to have a long-lasting business relationship.
Depending on project complexity, we offer multiple levels for maintenance packages:
- Monthly site checkup
- Maintaining server and services on it
- Security updates
- Quick response to ongoing issues
When the client agrees to the maintenance agreement, this means practically that the client books our time and ensures that we will act immediately.
Personal agreements and handshakes are more important to us than real contracts. Still, there are certain rules in the business world that must be respected, such as signing a contract.
Our contract is written in plain language, without overly complicated lawyer talk. It explains the rights and obligations of both parties.
During Studio Present’s life (since 2006), we have never had legal problems, a fact we are extremely proud of.
There have been situations where we had disagreements with the client because it turned out we had different goals. In these cases, it’s always better to cut the cooperation early on.
Setting tasks and user stories
Studio Present is divided into several teams:
- Project managers
- Backend developers
- Frontend developers
- QA team
- Server team
- Team for content
- Digital marketing
The team managers and team members are responsible for creating the tasks and we discuss the right time to start. So how does the process work? For example, the QA team does not have anything to do before the programmers finish their work. The sequences are carefully coordinated to make the entire work process run smoothly.
During the creation of one task, we estimate the time needed to develop certain functionality. Sometimes the larger tasks are divided into smaller ones and frequently we are forced to make priorities. We often are faced with some problematic issue that was not previously visible or known, requiring a prompt reaction.
The senior staff are crucial at this stage because their experience provides vital information on how much time will be consumed or what the pain points are that will likely take more time to sort out.
When this planning process is completed, we have a more realistic time estimate for app development.
Team “kick-off” meeting
It’s time to bring all the team to one table and once more talk through the entire concept of the app.
However, apart from this initial meeting, there are regular short briefings on what the main goals are.
We go through every task and perform additional adjustments as necessary. This is the time where we choose our priorities for the first two weeks of development.
The senior programmers are left with the task of providing additional explanations to junior developers.
This is also an opportunity to identify the new challenges connected to the given project and work out the possible solutions.
Preparing the development environment
Our colleague responsible for the server side needs to make a local copy of the CMS, so that every developer can pull it and start to work.
The version control system is configured, which means that the client can start to follow the progress of the app development on the developer domain.
However, it is important to note that sharing the app development process at such an early stage is only possible if the client is somewhat technically educated.