Mobile Website Design / Development Project


ubmobile_home

I designed and developed this mobile website for the company I am currently working for. This is not a mobile app, this is a website optimized for mobile devices. I created the entire UI, layout, design, front-end code, back-end code, ColdFusion logic, MS SQL database queries/inserts/updates, javascript code, support of Google Map API, SEO optimization.

There are three options that can be accessed on every single mobile page. Those options are the access to the main navigation, the search option and the contact by phone.

ubmobile_mainnavi

Slide out main navigation shown in the screenshot above.

ubmobile_storecall

The call option then dials the number automatically for phones that support it. The search option is expanded by default on the front page.

ubmobile_geolocation

This is the front page which offers location awareness. This is a html5 geolocation feature and I created the necessary javascript to handle it the way we need it.

ubmobile_autosuggestion

I developed a feature you might be familiar with using Google, an auto suggestion feature. This is an ajax call against the stores table in the database.

ubmobile_state

State selection screen showing in which state we do have locations. Once the selection is made it goes over to the city selection.

ubmobile_stateselection

The city screen is similar to the state selection screen.

ubmobile_stores

This is the screen showing all available stores in the selected city. The entire process is dynamic and shows actual inventory on every page load. The stars rating needed to be added to satisfy SEO needs.

ubmobile_store

Once the store has been picked basic information about this store and available spaces for rent are displayed. I added responsiveness to all pages for which it made sense to show the content in a different way depending if the device used is a phone or a tablet. This is done through CSS media queries.

ubmobile_storetablet

The above screen demonstrates the responsiveness of this page. As soon as the device offers a specified width the output changes to a 2 column output.

ubmobile_storehours

The information button right of the store expands additional information about the selected store.

ubmobile_storedirections

When the ‘Directions’ tab is clicked, I am hooking into the Google Map API to show the store on the map. There is a ‘Change Size’ option that offers the customer to select another space size.

ubmobile_storesizeselector

This is the popup from which the user can select a different size. A size marked in yellow is the currently selected size. Visual hints are important to keep the user up to date, this is especially true for mobile devices. As soon as the reserve for free button is tapped it brings up a summary about the store and the space and options to reserve.

ubmobile_storereserveoptions

From here there are three ways to reserve, through a direct call, a hold for today option which only requires a phone number and optional email and a 3/4 step reservation process. The difference is that a ‘Hold for Today’ reservation is only valid for the current business day where as the 4-5 step reservation is good for up to 14 days.

ubmobile_storereserve

The user is presented with the 4 step (3 if the store doesn’t offer a truck) reservation. The user sees where he is at every step of the reservation and can switch between those steps during the reservation.

ubmobile_storehold

The hold for today option is a breeze and I have just integrated it for people on the go trying to quickly reserve a storage space without the need to supply all the information required for the 3/4 step reservation.

This is a simple looking page but contains rather complex logic. A random captcha is preventing bots from spamming this form. This page is office hour sensitive, meaning that time needs to be considered especially time zone differences. For example 12PM in New York is not 12PM in Colorado. Reservations can not be placed outside office hours or in the event of unexpected store closings. This single page ended up a lot more complex than the 3-4 step reservation process.

Tools/Skills Used: Adobe Illustrator, Adobe Photoshop, Adobe Dreamweaver, Many different mobile devices (running iOS, Android, BlackBerry, Windows Phone, webOS, symbian), UI mockup/wireframes and design, UX testing, ColdFusion, JavaScript, jQuery, jQuery UI, Google Maps API, MS SQL, Debugging, Testing, Version Control, HTML5, CSS, Responsive Design,

Requirements/Considerations: This website needs to be accessible by as many mobile devices as possible. Other mobile devices that lack support for HTML5 and/or javascript should still be able to navigate the website. Extensive testing on different physical mobile devices has been done.