Greenastic offers a one-stop gardening resource website. Where you can draw and plan the layout and then order all the plants and furniture you used in the layout. It also wants to act as a link between professional landscapers and customers searching either full service or just advice on their future garden.

The Challenge

Given the focus on attracting the professional landscapers, ideally, the app should be accessible and usable on both web am tables. The UI had to be created with tablets use cases in mind with optimal tapability


We started with a two-day workshop at our office, during which we learned as much as possible about the business logic while also reviewing competing apps and websites. We contoured a clear concept map with all the screens and functionality needed.


Since we managed to cover good ground on the app functionality I started sketching during the workshop. I had a lot of ideas about how the functionality should be structured and took advantage of the context in which I could quickly bounce ideas. I also encouraged the client to sketch his ideas on our whiteboard. At the end of the workshop, we parted with the core screens sketched and validated.


I usually prefer to wireframe the critical screens in flows and leave the smaller parts for the prototyping phase.


Garden projects needed a versioning system so that professional landscapers could do changes and suggestions without losing the client’s initial plan.


The builder was split into 4 steps: first 3 were for defining the garden area and the 4th was for adding plants and garden furniture. Under this step there was a catalog of offered items, an inventory of added items and then a comments section to facilitate conversation between clients and landscapers.

Final Outcome






Builder – Step 1: Garden Surface Area

Builder – Step 2: Shadows 

Builder – Step 3: Inner Garden Areas

Builder – Step 4: Kitchen Garden

Builder – Step 4: Filters