The purpose of this project is to demonstrate my skills in the context of taking an existing web page design and migrating it to Twitter's Bootstrap framework.
I located a design that would be suitable for the project. I located this mock up on Dribbble by Muhamad Reza Adityawarman. The problem with the mock up is that it is a flat PNG file so the text is saved on top of the background images. This meant that I would have to fire up Photoshop to rid the backgrounds of the text, or find another way to get the background images.
Original on DribbbleI did some searching around to try and locate a html version of the mock up in order to:
I checked archive.org with not luck, and after some searching I found it had been archived at http://archive.is/, so I clicked the "download .zip" link and had all of the images necessary to proceed to migrating the design to Bootstrap. I also inspected the code with Chrome's developer tools to confirm that it wasn't already in Bootstrap. Below is a screen shot of the archive.is code. I think it was probably mocked up using Bootstrap (Based on the row widths of 970px and left and right margins that are 15px and -15px), but the way that it has been archived has replaced the code with a bunch of span tags and inline css declarations, which you can see below.
I then created a new project using Jekyll, deleted unnecessary default files that Jekyll generates for a new project, and added the Bootstrap CDN links. I used dummy images using Placehold.it to quickly work through the rough layout.
Rough LayoutThe next thing I worked on was adding the images from the archived html mock up to create a responsive bootstrap port of the design.
Once I finished the web page port, I made the changes to reflect the final design from Dribbble.
The main changes I made are as follows:
The original idea for the app was to allow customers to check in to a restaurant and order meals from their smartphones. When a customer goes to the web page to download the app they are greeted with a tag line "Let The Buyer Be Your Business Marketing" which really speaks to restaurant owners. I think that most customers would not download this app just to order food when traditional ordering from wait staff is so easy. Fudsquare needs a more compelling way to entice customers to download the app. I changed the tag line to "Foodies: You've found the app for YOU". The app marketing should be aimed food buffs who want to find, collect, and share the meals that they experience. The original tag line could be used in a "Fudsquare for business" page on the web site, but it is potentially confusing for customers.
The first change I made for the web page was to move the three glyphicon bullet points up from the middle to just below the splash image. Once a customer lands on the home page it is very important for them to clearly see what the app can do for them. Moving the glyphicons to the top will give them an immediate sense of what the app can do for them with three simple points. The customer can then scroll down the page to get more informative explanations of the features in the sequential order of the main use case scenario to reinforce the apps capabilities.
Replacing the text links with standard buttons increases the scannability of the page for users who what to download the app immediately.