Bootstrap Migration Project

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.


Finding a Candidate

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 Dribbble

Sourcing the Background Files

I did some searching around to try and locate a html version of the mock up in order to:

  1. Confirm that the design is not in Bootstrap. (Copy and pasting someone else's code isn't a sought after skill by most potential employers)
  2. Get the background image files.

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.

Screen shot of code

Rough Layout

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 Layout

Refining the Rough Layout

Porting the Web Page Design

HTML Port to Bootstrap

The next thing I worked on was adding the images from the archived html mock up to create a responsive bootstrap port of the design.

Porting the Dribbble Design

Dribbble Port to Bootstrap

Once I finished the web page port, I made the changes to reflect the final design from Dribbble.

My Take on Things

The main changes I made are as follows:

  1. Changed the Tag Line from business facing to consumer facing.

    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.

  2. Reordered the features explanations to reflect the sequential order of the main use case scenario while using the app.

    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.

  3. Replaced text links to the app stores with buttons.

    Replacing the text links with standard buttons increases the scannability of the page for users who what to download the app immediately.

My take on the design