This week, I started an exciting new project called – “Foodsite.” I am in the early stages of developing a new Framer website template. This upcoming digital product is meant for sale on the online marketplace. It is designed to help culinary businesses establish an online presence and targets web developers and tech-focused individuals seeking a quick, professional, and functional site.
On this blog, let’s explore my first steps in development and discuss how to build a solid foundation for a digital product from the ground up.
It starts with a roadmap
Think of a roadmap as a big-picture and a visual plan that outlines the key steps, goals, and milestones needed to achieve our desired outcome within a specific timeframe. It serves as a strategic guide for projects, product development, or business initiatives, providing clear priorities, timelines, and direction.
Creating a roadmap starts by defining the vision and purpose we’re working towards. The roadmap is basically a clear plan for achieving that vision. With that direction in mind, we outline the key objectives or goals that will get us there. These goals need to be specific enough to track progress, but also flexible enough to adjust if things change.
Next, we pinpoint the main initiatives or actions that will drive those goals. Rather than getting bogged down in small tasks, we bundle related activities into larger themes or phases. This makes it easier for us to see the bigger picture. With these outlined, we map them out on a timeline, typically breaking it down into short-term, mid-term, and long-term timeframes, so everyone can see what’s coming up and what’s still on the horizon.
Our roadmap also needs to prioritize key areas, so we can make informed decisions about what to tackle first and clearly communicate those choices. Once the structure is established, we’ll design it in a visual format that’s easy to grasp, often using horizontal lanes for themes and vertical markers for time. Then, we’ll keep the roadmap a living document, revisiting it regularly to update progress, adjust priorities, and ensure it stays aligned with our vision.
We can create a roadmap using tools like PowerPoint, Google Slides, Excel, or Sheets for basic outlining of timelines and milestones. For more organized and collaborative planning, platforms like Trello, Asana, ClickUp, Notion, or Coda offer flexible, customizable options for mapping initiatives and stakeholder views.
Foodsite – the roadmap
Regarding “Foodsite,” I aim to develop it within three weeks. My objective is to complete this timeframe with a fully operational Framer website template prepared for commercial distribution. To accomplish this, I have devised a three-week roadmap, segmented into three distinct phases.
Week 1 – Development phase 1 (Planning and first building)
Here, I will set the stage for Foodsite. I will outline its structure, map out the information architecture, create a site map, and develop wireframes. Next, I’ll design a website template concept, choosing fonts, selecting color palettes, content, and creating a mood board. Finally, I’ll start building the template’s core elements, such as the Footer, navigation, and buttons.
Week 2 – Development Phase 2 (Building)
For this phase, I will concentrate on creating the core pages of Foodsite, including the homepage, menu section, about, and contact pages. My goal is to set the content, animations, transitions, and UI elements. By the end of the week, I’ll finalize the website’s responsiveness and prepare it for testing with potential users.
Week 3 – Finalization (Test, Iterate & Package)
Next, I will conduct testing sessions with several potential users to gather feedback. Then, I’ll analyze the insights and make any needed improvements to the product. By the end of the week, I’ll have refined my product and started preparing for the sales phase.
I found walking through Foodsite pathway with this clear roadmap very beneficial for several reasons:
- Clarity: My roadmap displays my goals and priorities in one place, giving me a clear path to the target.
- Time management: It helps me manage my time more logically and makes it easier to coordinate efforts, avoid miscommunication, and ensure a smoother development process.
- Orientation: My progress is constantly monitored, and at any given point, I am aware of what has been done and where I am going next.
- Locate roadblocks – as those are clearly pinpointed at the pathway map.
Dealing with roadblocks
Roadblocks are barriers that slow or stop progress toward a goal. They can be anything that disrupts our planned flow of work, such as a lack of resources, unclear requirements, technical limitations, budget issues, or delays in decision-making.
We can still reach our destination, but we may need to find a way around, remove the obstacle, or change our route. Identifying roadblocks early is crucial because it helps us address problems before they get worse and keeps the project on track.
In practice, some projects can face roadblock due to unclear goals, shifting priorities, or resource shortages. Others encounter them less frequently, perhaps only at major milestones; if planning is thorough, those are easier to manage.
The best way to manage or tackle roadblocks is:
- Identify early: Early detection helps prevent small problems from becoming major obstacles.
- Brainstorm solutions: We can try shifting resources, breaking the task into smaller manageable chunks, or exploring technical solutions.
- Maintain flexibility: Projects rarely go exactly as planned. We need to keep ourselves adaptable and encourage iterative approaches.
- Document and learn: Document the roadblock, the solution, and the outcome. This will serve as a reference for future projects, allowing us to anticipate similar challenges and respond more effectively.
This week, I encountered a significant roadblock. Framer’s complexity comes from its precise pixel-based design, which impacts how the design appears on different devices (desktop, tablet, and mobile). When I started building the template, I noticed that the layout looked great on the desktop version but wasn’t suitable for smaller devices like tablets and phones. This caused me to feel frustrated as I dedicated several hours attempting to resolve or comprehend this issue.
After watching several video tutorials that guided me step-by-step on how to create a responsive website in Framer, I solved this issue.
Conclusion :
What I have learnt this week is the importance of dedicating time to the planning phase while developing a project. It helped me organize my schedule and set a clear path for each of my outcomes of the Foodsite project. I am confident that this will lead to a smooth process in the following weeks.
I successfully completed all tasks assigned for the first week, and despite facing several challenges, I remain highly motivated as I move into the second week. Next week, I plan to work on developing all the pages of my website, including adding content, organizing sections, and enhancing visuals with animations. Here is a quick preview :
Enclosed is my initial product development journal, which outlines each task I completed during my first week of development on Foodsite project.
