How to Plan for Your Next Web App?
One of the most important steps in building a good application is to have a practical, clear, and organized plan that you can rely on to carry out the project. There have been countless times that I am working on code, get stuck on a bug, and lose my sense of focus and direction. That’s when referencing my project outline has helped me re-prioritize my time and efforts with the big picture in mind. Throughout this article, I will introduce a few tools that are helpful in planning out my projects, and they are Lucid Chart, Figma, Forest, and Notion.
For the sake of this article, let’s build a project outline for an app named Cafecito.
A few Questions Worth Considering:
- What is the purpose of the application in one sentence?
- What is your Domain Model?
- What are the attributes of each model?
- What information should I be able to access each model?
3. What is your MVP?
- Are there any stretch features for the project?
4. What will your wireframe look like?
5. What is the timeline for your project?
Why Summarize your application in one sentence?
Summarizing the purpose of my application helps me have a clear goal and reminds me why I am adding specific features. When I start thinking about features I can ask, will this feature help users “find the best coffee shops by rating and reviews?” If not, I should reconsider that feature. Summarizing also helps me gauge how well I understand the project. If I need to explain it in multiple paragraphs then I might not have a good grasp of the subject. The shorter the better.
The purpose of the Cafecito app is to help users find the best coffee shops by rating and reviews.
The domain Model for Cafecito will look like the following, using LucidChart :
Want to read this story later? Save it in Journal.
Once you establish the relationships you can determine the exact attributes for each model to make sure you have access to the information necessary to make your application work as intended in the database.
Here is an example of how to create the relationships above with Lucid Chart.
What is your MVP?
MVP is short for Minimum Viable Product. Ask yourself, what are the essential foundational features that make your app ready for a user to test before finalizing? One of the places I love to start is by using CRUD. The user should be able to at least:
- C: CREATE an account or some feature in the app
- R: READ, in other words, view content or app features
- U: change or UPDATE information
- D: DELETE an account or any other feature
Here are some examples of MVP for Cafecito!
- User should be able to create an account
- User can create a review and rating for a coffee shop
- User should be able to read all reviews for a coffee shop
- User should be able to update username, email, password, and review
- User should be able to delete a review and account
MVP Status Board (using Notion)
Stretch goals?
Once the MVP has been met, the stretch features are next! I love being able to think practically and creatively of new ways to take the app to the next level for the user but also to challenge myself as a programmer.
Here are some examples of stretch goals:
- Allow an option for users to leave a video with their review
- Users/customer can take a picture of the receipt and when a user finds a coffee shop on the app they can see the average cost
- Search bar functionality that can use GPS, and/or zip code to auto-populate local coffee shop listings
- Send a friend an invite via link or SMS with the chosen coffee shop to set up a date or a meeting. Maybe include an agenda for that meeting if applicable.
WireFraming and Figma
Wireframing helps you bring your project to life and helps you anticipate potential challenges in how your features will be experienced by the user. As programmers, it’s important to keep the user in mind as we build because it can become challenging to restructure our app once we are in too deep. It’s important to be able to build out each page that the user will experience. What will it be like for a user to get to their profile page? What will it be like to find a coffee shop and write a review? Here is a rough draft for a landing page. You can make some pretty amazing looking wireframes.
Figma also provides templates to build off of. For example, check out this wireframe for an iPhone app. It looks clean and predictable for the user to get around.
Once we create our basic wireframe, one thing I really like to do is choose a color palette to have a level of consistency across the app. I recommend using something like COOLORS. The website/app provides you with randomly generated, recommended pallets, or you can customize your own. In addition, it provides the hex codes, RGB, and almost any other format you may need.
How long will it take me to build this project?
This is a challenging question to answer. You truly learn with time and practice how long it takes you personally to build out particular features, and how long it will take you to debug. I love using the Forest app. It has helped me gauge how long it will take me to complete tasks so when I work on future projects, I can set a realistic timeline for myself.
The Forest app is based on the Pomodoro Technique. Click on the link if you want to learn in greater detail about the technique. Briefly, it’s an app that helps you set timers to complete tasks. One of my favorite features is the deep focus mode. Sometimes I can’t help but get sidetracked by using my phone, but with the deep focus mode, if you use any other app while the timer is going, it kills the tree you would have grown if left uninterrupted. I love using Forest to focus my time on creating features for my app. This app has helped me see how long it has taken me to build some of those features for my Cafecito app and it helped me build a realistic timeline.
Notion brings it all together
Notion allows me to place all my information on one page, collaborate the page with my team, and assign specific features or tasks. This is where most of my planning for my Cafecito app was done.
Here is what the notion page would look like.
Notion is extremely useful and works well with other programs like Figma, this is how you would incorporate your Figma document to your Notion.
Just in case you’re interested in learning about other great tools that interface well with Notion I’ll list several popular ones.
Thank you for reading, hope you find these apps useful for planning your next project! Until next time!
📝 Save this story in Journal.
👩💻 Wake up every Sunday morning to the week’s most noteworthy stories in Tech waiting in your inbox. Read the Noteworthy in Tech newsletter.
