Townhouse Landscaping Proposal Web App

Case Study: Townhouse Landscape Web App. Screenshot of the live home page design.

Personal project, Lara Lee.

Challenge

Michelle Lee and I rent a 1,120 sqft. townhouse in Waldorf, Maryland. The townhouse was built in 1983 and purchased by the landlord in 2005. As per a verbal arrangement with the landlord, the renters must maintain and perform minor DIY upgrades to the rental property in preparation for final sale after said renters complete the lease.

The renters wish to develop a web app discussing modest landscaping plans for the townhouse front yard and back yard. The web app must do more than simply portray landscape design illustrations; it should be a stand-alone item containing all the requirements of a request. 

  • Must be interactive, allowing users to illustrate potential landscape plans, estimate materials costs for each landscape, and contact proposal organizers
  • Must present information in a clear, organized, and eye-catching fashion
  • Must adapt to multiple viewport sizes and web browsers for increased accessibility/sharability

Strategy

The web app must engage and motivate the landlord, a middle-aged suburban woman with a modest income. She leads and inspires children in her day job; her aesthetic is whimsical, colorful, and simple. She stays busy at work and is often unavailable, so the proposal must be quick and easy to navigate.

Interactive features within the web app allow the landlord to immerse herself in the experience and provide immediate feedback on financial costs. As such, I wanted the web app to have a colorful palette inspired by spring, plenty of breathing room, clean fonts, and clean layouts. It also needed custom illustrations of the property for proper analysis and comparison of goods in the proposal.

The scope of this web app project includes a hand-coded web app using front-end web development languages HTML5, CSS3, and the JS library, jQuery. An essential component of this web app project is interactivity. jQuery will address issues such as:

  • Mouse Event Responses
  • DOM Manipulation
  • Mathematical Calculations
  • String Manipulation
  • Data Validation
  • Asynchronous Loading

Before & After

Results

  • Increased ease of use, enabling users to find information like materials cost estimates faster
  • Shareable, light-weight, and mobile-accessible for on-the-go audience
  • Increased aesthetic appeal via a creative proposal format
  • Allows greater customization options and live previews

Planning the Web App

Site map infographic.
A content map, one kind of web design deliverable, is useful for planning information hierarchy design and site maps (or sitemaps). A content map might look like this one I made for the Townhouse Landscape Proposal Web App.
Wireframe collage.

Custom Illustration

Since the web app focuses on a particular townhouse property, the graphics must be uniquely tailored. I drew custom vector illustrations to capture the unique landscapes. Symbols are detailed enough to identify an object, but generic enough for the audience to embellish with her own visions.

Measurements from before are retained with proper to-scale proportions but the distracting lines and numbers are gone.

These graphics will compose the layers of materials needed to illustrate cost calculations of various landscape materials.

Animation illustrating the interactive landscape builder app.

Responsive Web Designs

Some web page layouts changed during the development phase. Testing of the yard designer/calculator pages revealed, for example, that the buttons and calculator weren’t readily accessible when positioned beneath the landscape map unless the map was made small. Yet if the map was small, the visual representation of the landscape plan isn’t readily discernible. An exception was made to the one-column rule to re-position the calculator buttons beside the image so both parts are accessible and discernible at the same time. 

Case Study: Townhouse Landscape Web App. Before and after screenshots of the web design layout for the yard planner and calculator web page.

Responsive web design is easier to accomplish in websites due to their modern-day technologies, but its not impossible to create responsive emails either. Check out my mobile-friendly emails for Smile Team!

Style tile for the web design including primary palette and mocked-up UI buttons.
Texture and pattern swatches.
Organic symbols illustrated for the plant materials.
Case Study: Townhouse Landscape Web App. Animated screenshot of the live home page design showing the parallax animation.