top of page
rr cover photo.png


Rooftop Republic 

> DEC 2021- JAN 2022 (2 weeks) 


Designing a crop recommendation system for farm management


My team and I designed a recommendation system for Product managers to plan the crops for farms


UI Research
UI Design
Wireframing and Prototyping




High fidelity prototype for web version
Design handoff to developers
Business report & presentation

The Problem

Rooftop Republic (which will be referred to as RR in the following ) has no proper communication channel between stakeholders, and there are no data systems where management can store and access information created by stakeholders. Their only way to communicate right now is through Whatsapp, however, all the information exchanged between stakeholders can get lost among other messages. There is no proper system to store this information, and to access them on demand is nearly impossible. Which makes it difficult for the management of RR, should they want to access these log histories, or conduct investigations.

The Solution

To tackle this problem, our teams have come up with three different solutions in three different touch points within RR’s digital system. The first is a farmer's farm planner section, the second is the client’s dashboard, and the third is a recommendation system. My team and I were responsible for designing the recommendation system for Product managers to help planning the crops for farms in Hong Kong.

The goal is to help RR collect more useful data, storing them in a more organised fashion, and make them more accessible. Our team believes that by refining these touch points, stakeholders can carry out their tasks more efficiently, and ultimately help them to save more time and maximise their output.


With the number of experienced farmers declining, having a proper system to collect all their actions is crucial to the education of urban farming in Hong Kong. Having a proper system to collect and access these data and experiences will not only help guide new and inexperienced farmers in learning; but it can also help predict future forecasts in the long run.

This project involved a hackathon challenge, where all departments including Web Developers, Data Scientists and UX/ UI designers worked together to complete the tasks in a 2-week sprint. Our team was in charge of designing a recommendation tool in the form of a web version with the aim of alleviating the product manager’s workload. This tool offers accurate crop recommendations based on festivals and farm conditions. We believe this tool can facilitate communication between Project Managers and clients reliably and efficiently.


What is Rooftop Republic?

As Hong Kong's urbanisation increases, natural spaces consequently decrease, making it even more important for nature and urban living to coexist harmoniously.

Rooftop Republic, an award-winning social enterprise with a mission to engage and empower the communities to lead a sustainable lifestyle through urban farming. It builds urban farms in under-utilised spaces like rooftops of commercial buildings and transforms them into a source of nutritional organic foods. Its clients include property developers e.g. Swire Properties, JLL; enterprises e.g. Cathay Pacific etc.

Research & Identify
Design Evaluation
Final Prototype
Frame 2623.png

Research & Identify


Having learnt more about the project brief, our client arranged a site visit for us to one of their largest urban farms in Hong Kong, located at MetroPlaza in Kwai Chung. Our team gained a better understanding of the business and daily operations of the farm.

Site Visit


We conducted an interview with the Project Managers from the Rooftop Republic. The objectives of the interview are:

  • To understand the communication process between project managers and their farm clients

  • To familiarise the daily operations of Project managers

  • To find out pain points of their current business process

  • To explore ways and possibilities that speed their business operations

As a result of the conversation with the project manager, he agreed that a digital planner with crop recommendation tools would be useful for planning ahead and as a platform for communicating with their clients.

With regards to secondary research, we used the research done by the previous bootcamp cohort and enhanced the research wall.

fabio-neo-amato-xhHQNHM9Sus-unsplash 2 2.png


  • Provide a more systematic and efficient way for Project Managers to plan client's farms?

  • Deliver accurate recommendations to Project Managers when planning the farm?

  • Support Project Managers to effectively communicate with their clients?

Frame 2623.png



Low Fidelity Wireframes

Based on the conversations and our understanding project managers’ painpoints, we built some low fidelity wireframes ready for the Hackathon.

Rectangle (1).png

Mid Fidelity Wireframes

We then moved on to develop mid fidelity MVP using Figma. We conducted usability tests and made iterations several times.

Frame 2623.png

Design Handoff to WD & DS

Part of the project was an internal Xccelerate Hackathon competition with the aim of learning how to collaborate with multi-departments. Prior to the Hackathon, we contacted instructors of Web Development and Data Science to learn more about how their departments work and to know more about the transition of design handoff, i.e. what documents and files they need to build our designs.


Our team also needs to understand whether our design is feasible to be executed by their students within the Hackathon (3 days including weekends).

We then developed a design brief to help web developers and data scientists to get to know our project better, and distribute the tasks accordingly.

Frame 2623.png

Design Evaluation

Usability Tests

Before launching the product, we did more usability tests to further polish our design and enhance user’s experience. The feedback we received were generally positive with a few minor suggestions from the user:

  • Separation of event-purpose and non-event purpose crop suggestions

  • Remove sowing and harvesting percentage

Design Evaluation
Frame 2623.png

Final Prototype

Final Prototype

Feature 1 - Seasonal Crops Recommendation

Frame 33387.png

Feature 2 - Gantt Chart timetable

Frame 33573.png

Feature 3 - Crops Library

Frame 33574.png
Frame 2623.png



Our project clients were very satisfied with the end result and that we were able to accomplish so much within 2 weeks. They were also impressed to see how we have picked up the work from the previous cohort and developed our own research findings.


We were given the opportunity to work with Web developers and Data Scientist during a hackathon. It was an eye opening experience to learn how each department operates, and watch how a project is conceive between the group. Initially, I only know a little on how the developers work but not in depth. Luckily, we had the opportunity and the platform to talk to respective instructors to make sure our design handoff is feasible to work for the given timeframe.

Throughout the conversation, not only I was able to learn how to collaborate with the others in the tech industry, I have also learnt how to communicate with them using their industry language, which will be very helpful for me to apply a similar working style to the real workplace in the near future.


Thank you for reading!


Read other case studies...

Bixie - Cover.png


I improved current user flow and enhanced user’s experience through revamping their existing mobile application.

Cover mockup.png


I  challenged the initial assumptions and came up with a better feature backed up by my user research findings.

Frame 2Rooftop republic.png

Rooftop Republic

I designed a recommendation system that helps Product managers to plan the crops for their clients.  

bottom of page