Foodsite Development – Phase Two

Foodsite Development – Phase Two

Posted by

·

“Foodsite” is a culinary business website template on Framer designed for commercial sale in the digital market industry. It targets restaurants, bakeries, and coffee shops looking to establish an online presence for commercial purposes.

On this blog, I will explore the development of phase two of this product, outlining the key milestones, challenges, decisions, and reflections during this phase.

Phase 2

During this phase, I developed all the main pages for Foodsite using the designs from the previous week as a guide.  I put all the essential features in place, following the wireframes, information architecture, and designs that had been set earlier. I have completed the development of an interactive menu section, a visual news page, and a detailed contact and about page.

My focus was on setting up the main structure of the template and leaving some sections temporarily unconnected to each other. Next week, I will add more content features and establish the interactions between the template elements.

Example menu wireframes and website page. Image by the author

The challenges faced during phase two

As I worked on building all the Foodsite website pages, I hit several major roadblocks. The first costly challenge arose during the development of the menu page.  Here, I aimed to create a dynamic and interactive section instead of a “plain text” menu, enhancing the marker value of the template.

There are several third-party plugins available for purchase that would enable this interactive feature. However, their average cost exceeds the average value of a Framer template, often above 100$. This would negatively affect my original goal of pricing Foodsite at no more than $39.

To solve this problem, I spent hours studying the key elements of interactive features on websites, which was very interesting yet time-consuming. At the end, I successfully added this interactive solution to my menu without incurring additional costs. I believe this feature would give Foodsite an edge over its competitors.

Superfields plug in on Framer. Image by the author

Another roadblock involved developing the “product page”, a detailed description of each menu item. Here, I planned to add a “Related products” section at the bottom of the page. The goal was to recommend a related product that the customer might like (e.g., add a latte beverage to a key lime pie). 

Unfortunately, the Framer platform doesn’t have a randomizer feature for the list in this section. I faced an interesting dilemma – should I spend more time trying to solve this problem or just move on with this development, leaving it unresolved.  Considering the limited benefit of this feature compared to competitors and the minimal added value of this upgrade, I decided to move on. If I find time next week, I plan to explore more tools to address this issue.

Looking back, I wonder if those roadblocks could have been anticipated and identified during my preliminary design phase. While there is no straightforward answer here, I do believe I should have considered more potential roadblocks, especially ones involving key elements of the template.

Conclusion

Phase two of foodsite development was particularly challenging, emphasizing the importance of the planning I did in Week 1. These solid foundations allowed me to develop the template efficiently by strictly following all my plans. As a result, I have completed 75% of the Foodsite website template.

Here is my product development journal for the second week of the Foodsite project, outlining the tasks I finished during this development phase

Mauricio Zúñiga Avatar

About the author

Hello, My name is Mauricio Zúñiga. I am an enthusiastic entry-level UX designer who is captivated by mind-blowing yet easy-to-navigate websites. I excel in converting abstract concepts into mesmerizing, user-friendly web experiences, always focusing on the user’s essential needs.

Discover more from Mauricio Zúñiga

Subscribe now to keep reading and get access to the full archive.

Continue reading