Web Application Development Process: Strategic Artifacts. Step 2 of 7. (with Airbnb examples)

Sculpting the Framework of Your Web App

For any business, how customers perceive its product and related services is crucial. Consumers value simplicity, convenience, and achieving their goals effortlessly. This is particularly important in web application development, where a deep understanding of customer preferences is essential.

In this article, we continue our exploration of the web application development process. After covering the first stage, requirements gathering, we now move to creating representations of user behavior scenarios. These meticulously gathered requirements serve as a guiding light, linking initial concepts to the finished web product. While numerous artifacts can be used, we prioritize three essential ones for successful development: User Stories; Wireframes; Entity Relationship Diagrams.

These artifacts are suitable for most applications. It is imperative to follow this sequence rigorously; otherwise, it can potentially compromise the integrity of the final product. Starting with the User Stories, we establish a clear and structured app development workflow. In the following sections, I illustrate these key points further, using Airbnb as an example.

Creating Effective User Stories for Web Apps

User Stories - these are simple descriptions of features or functionalities told from the perspective of the individual who desires the capability. User story mapping allows us to deeply understand and empathize with the user's interactions with the application.

Acceptance Criteria:

1. The user should be able to enter a specific city or area in a search bar.
2. The user should have the option to select check-in and check-out dates from a calendar.
3. The user should be able to specify the number of guests that will be staying.
4. After entering the search criteria, the user should be presented with a list of available properties that match the search parameters.
5. The user should be able to click on a property in the search results to view more detailed information, including photos, amenities, price, and reviews.
6. The user should be able to filter the search results based on various criteria (e.g., price range, property type, amenities).
7. The user should be able to sort the search results (e.g., by price, by ratings, by proximity).
8. The user should have the ability to clear the search inputs and start a new search, or modify the current search criteria.
9. The search functionality should be fully functional and visually coherent on different devices (desktop, tablet, mobile).
10. The user should be shown an appropriate message if no properties are available based on the search criteria, or if an error occurs during the search.

Building Web Screen Wireframes

Moving on, we turn towards the development of Wireframes. For each User Story, we create wireframes; these are the skeletal, visual guides that represent the framework of our web application. Wireframes provide us with a clear picture of:

• The structural layout of the application
• The placement of the app's various elements
• Identifying potential design challenges early in the process

Entity Relationship Diagrams for Data Structure?

Finally, we delve into the construction of the Entity Relationship Diagram (ERD). Think of this as the architectural blueprint of our database system that provides a visual representation of the data and the relationships between data entities. It outlines the entities, attributes, relationships, and cardinalities within the database, playing a crucial role in analyzing and designing the structure of the database, clarifying the functionalities and constraints of the system, serving as a foundation for creating the schema of the relational database, and facilitating forward and reverse engineering of the database design.?

Importantly, as new user stories are written and the scope of the project evolves, this diagram should be continuously revisited and supplemented to reflect the most current and comprehensive view of the system’s data relationships.

How can an app win over a customer?

In essence, User Stories, Wireframes, and the Entity Relationship Diagram are the linchpins of our web application’s blueprint. These strategic artifacts are carefully crafted to bridge the gap between initial ideas and final implementation. By placing these artifacts at the heart of our development process, we establish a clear and focused app roadmap that guides our team every step of the way, smoothing the path toward a successful and vibrant web application.

Each individual application requires an individual approach. At the stage of composing the strategic artifacts we have considered, the analyst, researcher, designer, and product manager develop a distinctive usage guide that helps users achieve their goals.?

If you have any difficulties in compiling the artifacts necessary for your future application, our team will be happy to advise and help you understand the issue.

And we will go further, the next step on our development path is the UI/UX Development Process. Stay tuned for our next article!

Tom Ponomarev, Co-Founder & CBDO at Kernelics