Watermelon Advertisement Portal – A Case Study

watermelon home

The initial design concept behind Watermelon Classified Ads was to use it as a portal for site users to be able to advertise any products or services they would like to sell and connect with potential customers.  As part of the initial structure of the project administration features to the site in order to allow employees tasked with day to day site maintenance to do so without needing to know how to code from scratch.

Choice of technology

Once the initial design concepts had been laid down and agreed upon the members of the development team we decided to complete the project using PHP.  As an open source programming language it is one of the most widely used methods for building fully featured sites on the internet today.  As an added bonus the open nature of the technology means that were able to draw from the best coding practices from developers around the world that detailed the most effective way to implement feature sets we wanted to include within the overall site; which included user registration and login components to allow the posting of new ads, site wide search, cloud tagging of the most common search items, and the ability for users to submit questions to the original ad poster.

Site Search

watermelon search

Perhaps the most crucial feature to get working properly for this type of site was the search feature.  This allows a user to search for key terms based on the types of ads that been posted.  The user is able to search by several areas including the category of the ad, title, or price.  based the key terms they search for they logged in users have the option of submitting a question to the original ad poster to for additional clarifications.  One of the key learning challenges to overcome during the implementation of this feature was ensuring the proper results were posting back upon the user submission of a search.

Designing for Mobile First: Or how I learned to stop hating and embrace the touchscreen

When I was sitting down the do the initial design and mockups for what would become my  portfolio site I found myself fascinated by idea of responsive web design; that a signal site could designed in such a fashion that it would display properly on any type of device no matter how large or small is an idea that honestly still blows my mind.  However, what I think has a tendency to happen in web development is that because we’re doing our coding on a desktop platform the majority of time spent on the design and functional aspects of any site have been dedicated to its desktop version.  Any versions that have been made available for either tablet or smartphone sized screens have been at best a rushed job and at the worst completely disregarded.

This is a large part of the reason why browsing the internet on a tablet or smartphone even in 2013 can still be a pretty hit or miss experience for users, designers simply aren’t dedicating the time to required to make their sites just as awesome on the touchscreen as they are on the desktop.  There are a whole bunch of tools out there now that can help developer get their feet wet in getting their designs up and running on a mobile device two that I’ve checked out:

Zurb: http://foundation.zurb.com/

Twitter Bookstrap: http://twitter.github.io/bootstrap/

While these frameworks are great for getting started quickly I found myself never really feeling satisfied building my sites off of coding that others had done.  Call me crazy if you want but to but it felt like using a crutch all the time.  So when it came time to building a portfolio site for myself I decided to set myself to challenge of building the layout & functional elements of the site from scratch.  In addition since I wasn’t about to let myself get caught with a sub-par experience on a touchscreen device I decided to concentrate my initial design energies of perfecting the mobile layout first.

mobile version

So in order to pull this off the first item in the bag of tricks unlearning most of what I had previously learned in web develop fixed widths are all but removed from the equation and replaced with either percentage values or “em” tags.  The other interesting thing that coming at the site design from smallest to largest taught me was that often times on a touch screen the best designed user interfaces are the simplest ones.  On a smartphone the lack of precision you can expect from a persons finger really forces designers to think long and hard about otherwise complicated navigation which to I discovered was more of a hindrance than a help screen size decreases.

As the screen size increases to realm of a tablet (anything larger than 800 pixels wide) there is enough room available to enhance the core mobile user experience adding a two column layout for easier display of content in my case.tablet  As you can see here this gives the user a much more desktop look and feel whilst still retaining all of the elements such as larger navigation options that made the mobile version as easy to use as it was.





The last stage in this design evolution is the final iteration of the site with the most distinctive look and feel to it, the desktop version.


With this version the design elements can truly be opened up as we know have access once again to a pointing device in the form of a mouse the enhancements made both the mobile and tablet versions of the site, bear fruit on the desktop side of things with an uncluttered easy to navigate user interface that helps the user get at the content they want as quickly and effectively as possible.