Flutter App: PotatoVerse — Sitemap
Welcome to part 5 in our PotatoVerse application development. In part 4, we looked at the requirements for our app and prioritised them using the MoSCoW technique. Catch up on that article here.
In this article, we are going to be creating our application’s sitemap.
A sitemap is a file (visual or written) that show the structure and hierarchical representation of a digital product, such as a mobile application or website. It includes the various pages, screens and/or sections of the application and shows how they are related to each other and how they are interlinked.
A sitemap can therefore be thought of as a “blueprint” of the application as it provides a high-level overview of the features and navigation.
Majority of use cases for sitemaps (especially for websites) is to help search engines to crawl the site more efficiently. They will tell search engines which pages on your site are most important.
However, in our context, we’ll be creating the sitemap to show the flow of the app and the navigation. This will make it clear to the developers and to the users on how they can move through different parts of the app.
Key benefits of having a sitemap
- Proper development planning: Because a sitemap is created early in the application development process, it will help the team to clearly visualise the app’s goals and functionalities.
- Creating wireframes: A sitemap can serve as a guide for creating wireframes and prototypes for the application. The flow and hierarchy outlined on the sitemap provides a basis for UX/UI designers to create paper sketches and/or high fidelity interactive prototypes. (It can also be useful for developers down the line to help in code organisation.)
- User testing: A sitemap can also be beneficial during the initial user testing phases. Sample personas can be used to ensure that the flow of the app is understandable. If they find the navigation complicated or confusing, then the sitemap can be adjusted accordingly. It’s cheaper to have these iterations during the earlier phases of app development.
- Documentation: Because a sitemap is like a blueprint of the application, it can form part of the application’s documentation. It can be used for references when more understanding of the project is needed, to debug and troubleshoot issues, to plan for future updates and even onboard team members to the project easily.
- SEO: In the context of websites (especially large ones), search engines like Google and Yahoo use sitemaps to find different pages on the site, giving them more visibility in search results. A sitemap will also tell the search engines which pages and files are important in the site, and also provides valuable information about these files.
Part 5— Sitemap
Now that we have our PotatoVerse features and their priority level, let’s go ahead and create a sitemap for it.
Step 1
Determine what the primary screens/features will be and what secondary screens/features will be. The secondary screens can be nested under the primary screens or even under some secondary screens. So in essence, we’re creating a hierarchy of related screens. For example, a user might start at the home screen, navigate to a search result, and then to a detailed recipe page.
Step 2
Determine the navigation paths/patterns between the different screens. That is; how will the user move from one screen to another.
- Are we using drawers, bottom navigation buttons, links, buttons?
- Where will the search function be and where will it lead?
- How are the recipes presented?
- What happens when a user taps on a recipe?
- How can users go back to a previous screen or to the home screen?
Step 3
Once the structure and paths are clear, create the visual representation! You can use various tools for this e.g., Figma, Lucidchart or even Canva. But if tools are not your thing, you can use simple boxes to represent screens with their content and lines to represent the navigation paths or relationship between them. I went with Figma and this is the result!
The main entry point of the application will be a screen with a bottom navigation bar comprising of four screens. Other screens will be nested in these four pages and the user can move back and forth between them.
Key: Blue (Must-Have), Green (Should-Have) and Orange (Could-Have)
Step 4
Once you have created your sitemap, it is important to review it with the entire team (I’ll be consulting with myself later on) and this could be comprising of the project stakeholders and developers. This will ensure that the app logic and flow meet the initial objectives set. The sitemap can then be iterated based on the feedback to address any gaps.
With more versions of the app, the sitemap should also be updated to reflect the new features added or removed.
Have you ever worked on a sitemap before? I’m curious to know what your experience with that was. I have only created one before this and it was for my post grad. But since I am not a product designer, feedback is always welcome. Let me know how I did :)
That sums up part 5! Any guesses about what our next step will be in this series? If you guessed ‘wireframes’, you’re absolutely right! And I hope you will be tuned for that!
“Every single diet I ever fell off of was because of potatoes and gravy of some sort.”
— Dolly Parton
Kama kawaida, thank you for reading ❤
Check out the previous articles on this project.
References
1. https://www.semrush.com/blog/website-sitemap/
2. https://backlinko.com/hub/seo/sitemaps
3. https://developers.google.com/search/docs/crawling-indexing/sitemaps/overview
