K.A.

Khalid Adil | Thoughts and Work

Web Development

Case Study: Koreatown Collection Website

By

Client: MJW Investments, Inc.
Technology Used: Drupal 7 CMS, PHP, SASS, Compass, Sketch

The client came to us with the need for a website that showcased 3 of their communities (Chateau La Fayette, La Fayette Marquis, and City Park View) in Los Angeles, California.

The website needed to be able to display an overview, floor plans, amenities, and a gallery for each property. Amenities such as banks, restaurants, and night life nearby the properties were to be showcased on a map so that prospective residents could visually see the benefits of living in each location. Also necessary was a form for current residents to request maintenance and a form for prospective residents to contact the property owners.

Challenges:

This was my first Drupal website, so there was a lot of learn in a short period of time. I learned all about creating a responsive website using Content Types, Views, and integrating things such as OpenLayers into the website. Having only previous experience with Photoshop, using Sketch as a design tool was also a new experience, and there was a learning curve in how to extract all the measurements and assets I needed to create the website.

After the handoff from the designer, I started by first printing a copy of the website pages. I took a pencil and broke down each page to see if there were any logical groupings. After finding a logical grouping in the properties and amenities, I then searched for each potential field that would be necessary to create the Property and Amenities “types” so that I could use information entered into those fields and render that on the front end of the website.

Next, the OpenLayers integration step took place. Through a copious amount of research and asking lots of questions, I figured out the integration and was successfully able to create the OpenLayers map and create a “view” of all the nearby amenities in list form as well.

Creating forms was relatively straightforward, and that’s exactly what I did next. I created a form for the residents and thereafter created the form for prospective clients.

The final step was styling the website so that it was pixel-perfect to the mockups. I jumped into SASS not knowing much except for a few basics I had learned through online courses and my knowledge of general CSS. The trickiest part of this step was ensuring that all sizes of browsers and devices were accounted for so that using the website was a positive experience no matter which device was used. I tested on my laptop, tablet, and iPhone throughout this process.

After a designer QA and some fixes, the website was ready to be taken live!

Check it out online: http://www.koreatowncollection.com