Townhouse Landscaping Proposal Web App
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
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 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
- 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
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.
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.