Apps are a ubiquitous part of our everyday lives. We use them for our finances, transportation, shopping, social interactions, entertainment, and the list goes on. Sometimes it seems like all of the apps that we interact with on a daily basis just sort of appeared out of thin air and landed in the app store or somewhere online.
But have you ever given much thought to how apps are created? Or, more specifically, who creates them? Consider the fact that apps are built by real people. And oftentimes a lot of time, money, and energy are poured into creating them (for more on that, see our post on measuring the ROI of your software projects).
So you may be wondering, “how are apps built anyway?” or “what does the process of creating an app look like?” That’s exactly our area of expertise. Crema utilizes product teams to help people and companies get their apps built and launched into the world - and we follow a highly strategic app development process to do it.
This article will walk you through the basic strategy, design, and development process that we and many other digital product agencies follow, and hopefully shine some more light on how web and mobile apps are actually built. Without further ado, let’s dive in.
It starts with an idea
Like with any other project out there, creating an app starts with an idea! But not all ideas are created equal. There’s a million app concepts that people are eager to make a reality, and really only a small percentage of those are actually viable. So how do you spot a diamond in the rough? There’s a lot of factors that go into it, but here are some qualifying questions to help you decide whether to build your app idea:
- Is it fulfilling a need that people have?
- Do you have the financial resources to get the app built?
- How much are you willing to risk/invest to make it a reality?
- Are you committed to maintaining it beyond the first launch of the product?
Due to how much of a financial undertaking it is to build an app from scratch (possibly a couple hundred thousand dollars or more), you want to be extremely confident that your idea is feasible. Any good agency will only move forward with the projects that they are confident can be a success.
Put your concept to the test with strategy
Once you’ve got a solid app concept and have a team with ample support and resources to build it, it’s time to align the entire team around the strategy, priorities, and direction of the product. At this point in the process, everyone involved (including the product owner, stakeholders, and the product team building it) has their own perspective on how the app can and should work. To get everyone on the same page and set a course for success, a Strategy & Alignment Session can be utilized.
In these sessions, an experienced strategist will lead various exercises to align the team around the goals and objectives of the project. Activities could include an Elevator Pitch, Story Spine, User Journey, etc. in order to identify key insights for the product. Regardless of what specific exercises are chosen within a strategy and alignment session, the following should be achieved:
- Pressure test the app concept with research to make certain that it’s the right approach for the team, market, and customers
- Make sure that everyone has a shared understanding of where the product is headed
To state the obvious, research is a key component to making sure that the product strategy is on the right track. Market research, user research, competitive analysis, etc. are conducted to help inform what the app should be. This data allows teams to understand the “who” and the “what” of the consumer landscape, the user behavior and needs, the value proposition of the app, and lots of other crucial bits of information that will help to shape the product.
With the research conducted, there are a couple more pieces of the puzzle that your team will need to strategize before you can start designing & building the app. The Lean Model Canvas quickly aligns the team around the context of the project: customers, problems, metrics, obstacles, opportunities, and unique value proposition. This document helps provide context to start, but is calibrated as new discoveries are made during the engagement.
Another important component is the Minimum Viable Product (MVP), which is the document that fleshes out the most important features of the product according to research, experience, and the lean model canvas mentioned earlier. Think of the MVP as the “bare necessities” version of the app that can still be released to satisfy users. It demonstrates enough future benefit to retain early adopters and provides a feedback loop to guide future design and development.
Start designing the product based on agreed upon deliverables
With the MVP features and requirements decided during the initial strategy, the designer can start to lay out those features and prioritize which to design first. They’ll begin designing specific application screens, sometimes starting with pencil and paper, then moving quickly to a design application such as Sketch. Within an agile workflow, designers will work on specific features, receive client feedback, and then iterate.
When designing the screens of an app, there are several different design perspectives or considerations that are working together to create a positive user experience. The primary forms of digital design that we want to focus on are the Information Architecture, Interaction Design, and User Interface.
- The Information Architecture (IA) of the app decides what data and functionality need to be presented and how it’s organized. The designer must figure out all the different journeys a user will take within the app and figure out the shortest route they should take to get there, making sure that all possible paths work together in a cohesive system. If you were applying the concept of IA to building a house, think of it as the floor plan or blueprints of the structure.
- The User Interface (UI) of the app decides what, where and how elements are laid out within the app. The interface elements (such as input controls, navigational components, informational components, containers, etc.) are determined by what the user needs to accomplish in the app. In the same house metaphor, UI is comparable to interior design - in that they’re both primarily concerned with visual components.
- Interaction Design (IxD) determines how users will interact with the features in the app. The designers will choose the functionality of the UI elements based off of the way users engage with the product. Think about the doors within a house, IxD determines how you would turn the knob to open them.
The final clickable prototype incorporates all of these design forms to make a high-fidelity mockup that will mimic the functionality of a real product. It’s used to conduct testing to ensure a good user experience. With the feedback from user, the designer can make improvements and iterate before landing on the final design. The prototype is ultimately the deliverable that the designer will hand over to the developer to start building out the app with code.
The handoff from design to development
With the form and function of the app planned out through the user journey and clickable prototype, the developers can begin to bring the app to life. The developers reverse engineer or notate the clickable prototype to inform the functionality of the app. While the designed prototype is extremely helpful in communicating the desired user experience, the developer must figure out how to best implement the design and make it fully functional with code.
Web/mobile development is typically separated into two different camps: front-end development and back-end development. We’ll quickly walk through the basics of both.
Front-end development
Front-end development manages what the users see and interact with. For example, in the Venmo app, the front-end development includes what button you click to send people money and the keys you tap to indicate the cash amount. Front-end is still heavily intertwined with the design of the app, so the designers and developers will work closely through this process to ensure a cohesive user experience.
The UI elements of front-end development can be created a couple of different ways. They can either be built from scratch, or frameworks (such as MaterialUI) can be utilized to make them. When the elements are built from scratch, the developer must build each piece as a standalone part from raw code (such as HTML, CSS, and JavaScript). The latter method of using frameworks is often preferred, as it expedites the development process.
Front-end development also deals with the ways in which data is captured. Or, in other words, how the user input will be entered. In order to be efficient, developers want to find a way to write code once and use it several different places. Small, highly-reusable pieces of code save time and make the experience look and feel consistent. Leveraging existing services also helps to lower the time it takes to start a product, although with the tradeoff of less customization.
Back-end development
Back-end development manages how the app actually works - which is everything you don’t see. This is the server side of the application, which involves tapping into a database where crucial user input information is stored. This type of development uses services that transfer and store data to make the app function how it should. In the Venmo example, back-end development includes how payments are run or how money is transferred between bank accounts.
What back-end developers are doing at this point in the process is connecting the UI elements to functions that take the user input and pass that data to some back-end service. They’re handling the important steps of transforming user input to something that can be stored in a way that is retrievable and actionable later. Oftentimes, both the database (that stores the information) and the API (that transfers information to and from the app) are third-party services. It’s the developers job to create channels for the app to communicate with those services.
Ensuring the code works through testing
While quality assurance is everyone’s job, it’s important to have a test engineer to help ensure that the code created by the developer is working properly and up to par with the acceptance criteria of the product. Due to how incredibly technical and intricate code is, it’s best to bring testers in as early as possible. Performing functionality tests during the development process helps to prevent any major issues or bugs when it comes time to launch.
Testers can help verify requirements, design, usability, performance, and accessibility. And when it’s time to deploy, the test engineer provides vigorous regression testing to make sure that previously developed and tested software still performs after a change. The test engineer is really the only person on the product team who places themselves fully in the mindset of the user, so their perspective and insight is vital in creating the best possible user experience.
Deploy V1 (version one) and iterate
Now that you’ve finished the first cycle of strategy, design, and development, it’s likely time to deploy the first version of the application into the user environment. But, as you already know, the release of the first version of the product isn’t the end. In fact, it’s far from it. Updates and iterations of the product are inevitable, which means the app is never really done.
The process outlined above may be repeated several times to improve the app or adjust the features and functionalities to the changing needs of the user. This is what agile development is all about: continual adaptation, learning and iterating.
Wrap up
While this article is by no means a fully-comprehensive explanation of the app development process, it should give you a pretty basic idea of the lifecycle of a product at an agency like ours. It should be said that this really only scratches the surface of the depth and complexity of the work that our strategists, designers, developers, and test engineers do.
If you want to learn more about our agency and our process in building applications, check out our YouTube Channel. If you think your business could benefit from our expertise in building custom digital solutions, don’t hesitate to get in touch.
