back to home


Eat Local. Live Green.

groofs mockup

The G-Roofs project was inspired by the emerging green roof systems across the world. For the purpose of better fostering the communication process between the rooftop service provider and anyone who want to get involved with the green roof activities, G-Roofs, an interactive mobile platform, is developed. This mobile application helps people reach out to green roofs and interact with the roof farmers, while at the same time learning more about organic foods and their benefits.


UX research,
UX design,
visual design,


Sketch, Illustrator, Photoshop


Aug 2017 - Dec 2017

Getting to Know Green Roofs

The story starts from the Green Roof system, a concept that has been bringing up more and more frequently worldwide, as part of a growing effort to meet the challenges that we face, including climate change, denser cities and the need for healthier neighborhoods. As one of the leading cities, since 2010, Copenhagen has become the first Scandanavian city to adopt a policy that requires green roofs for all new constructions with roof slopes less than 30 degrees.

Vegetated roofs, or green roofs, may provide various benefits for buildings and their surroundings. They can absorb 50 to 80% of annual rainfall in a sustainable way, by reusing the water to plant cultivation. While supporting biodiversity in the city, green roofs can also help reduce urban temperatures and mitigate the Heat Island Effect.

Currently, green roof projects have already been applied to many different settings in Copenhagen such as residential area, commercial uses, and public buildings through the forms of roof farm, rooftop eatery, and rooftop garden.

Diving into the Research

Competitive Analysis

Currently, there are four basic but limited ways for green roof owners to manage public events, spread the words, and communicate with people who are interested in their services. But there is no particularly efficient point of communication.
facebook posting

Facebook Page

congress booklet


individual website

Individual Green
Roof Website


Environmental Organization

Persona & Anti-Persona

To further analyze how potential target users would manage communication regarding green-roof-related issues, three personas and one anti-persona were generated with information gathered from secondary research. persona and anti-persona

[Click for larger view]

Brainstorming Solutions

Brainstorming and Storyboarding

Carrying through with some preliminary research and potential solutions, I brainstormed and evaluated eight distinct design ideas. brainstorm solutions

[Click for larger view]

For each solution, a storyboard capturing a clip of user journey was created, hoping to dig more into the essence of each solution.


[Click for larger view]

Story Mapping

Story map was created with respect to the primary personas that highlight specific tasks and narrative flows. In the current story maps, Carl, a roof farmer and Lina, a full-time mother was used as two protagonists, trying to shop organic foods on the online market platform. Besides describing how they would interact with the platform, the story map also featured what types of problem they would potentially encounter. story mapping

[Click for larger view]

Design Synthesis & Defense

QOC analysis was also incorporated in the design process in order to better synthesize and defend the design solution, and eventually narrow the solutions down to one. QOC stands for Questions, Options, Criteria, meaning some particular feature can be seen as one of multiple possible options, which answers a particular question. The feature being looked at in the QOC analysis is the comprehensive green maps which show location, direction, and link to individual rooftop stories. It is likely that the map will be the first point that people arrive at when using the application. qoc analysis

Prototyping and Testing

Paper prototypes were created for initial concept exploration. Additionally, several peer testing sessions were conducted in groups of three. My role was the "wizard" (acted as the mobile device) and the facilitator. The other two participants acted as the user and the observer. After quickly describing the project and few sample tasks, the user was asked to play with the system.

paper prototype testing

Major pain points that arose from the testing sessions are:

  • users expected to see more information on the product page,
  • adding product to cart was a heavy process,
  • users couldn't find the home button on certain pages.

Accordingly, some adjustments were made with respect to the key user feedback along with three design iterations. Explore the final clickable prototype through:

Reflecting and Envisioning

Throughout the design process that involves a lot of testings, iterations and refinements, certain issues and limitations should be noticed. First of all, it was not until the final digital prototyping phase did I realize that with the current design, users would be limited to browse products in a single roof farm. There is no place for them to see and search products from all farms. This could be problematic for users who are not familiar with any of the roof farms or don’t have preferences in the beginning, but just want to find particular produces. This seems relatively easy to implement in the GUI design level, but could bring up a lot of issues, such as “who will be responsible of handling orders involving multiple farms” and “how could the application support collaboration between roof farms”.

Thinking ahead, although the current problem initially started from a green roof project in the city of Copenhagen, the topic of green roof has been discussed all over the world. European countries have long put this issue of fighting against global warming on top of their agenda. Many cities in the United States have also started different green roof projects in places such as Chicago. With the development of current mobile-based online platform, cities and green roof advocators could have a easier time creating public awareness on the environmental issue. Moreover, from the perspective of city residents and organic market customers, they could benefit from using the application by adopting healthier eating habits and lifestyle. For either creating a better living spaces or transitioning to a healthier and more sustainable lifestyle, the application could be helpful and impactful.

up arrow