http://www.phillyphotoday.com/ (Event Finished)
http://www.hyunkyu.com/ppac - saved (functioning) site
Making a mobile site + forms exciting. They're usually bland and use default visuals from its parent Operating System.
This mobile website / application was done for Philly Photo Day by Philadelphia Photo Arts Center.
I coded + designed the app for Android and iOS6+ Devices, as well as desktop browsers.
Purpose of Philly Photo Day was to people take a picture in Philadelphia and upload it. One picture, one day.
Taking advantage of iOS 6's ability to upload photos, and Android's default ability to upload files, it made it easier to cater to majority of smartphone owners for this app.
For more traffic, I proposed a mobile version of Philly Photo Day, which came out quite successful albeit the limited device compatibility. Submissions are still being accepted; in less than 24 hours, the product processed more than 1000 submissions successfully without a single malfunction.
I coded this with your run of the mill HTML/CSS with Jquery, PHP and MySQL for database management.
In the mobile version it detects the devices + browsers to give proper feedback. iOS <6 prompts the user to use a desktop, same with other devices that aren't compatible. For iOS6 + Android platforms, it functions as normal.
In the desktop version for IE; the placeholder information in the textboxes "REQUIRED" doesn't come up. So I have implemented a little trick that if the browser is IE, the textfields are actually PREFILLED with "REQUIRED" on them. It sucks because the user has to delete "REQUIRED" to input their info; but it's a small sacrifice to keep the visuals universal. Also in the index/home page, a different method of background image is implemented compared to Chrome / FF / Safari, etc. (-filter in CSS).
The challenge for the mobile device was to overcome the "standard" or rather; boring look of website forms and its functionality. I tried to stylize the entire site/app so it looks more like a "traditional" downloaded app. I also wanted to replace "default" visual elements such as buttons, etc for a custom one so the visuals stay universal and intact regardless of platform.
The main visual / flow changes are:
1. Default browser buttons are minimal (Only one is the "Browse" button to change/upload your photo).
2. Check boxes are replaced with "on/off" style toggle switches that animate.
3. Buttons react by displaying a shadow when pressed, and disappears when let go (Which a lot of people do not implement; a lot of times, the shadow is stuck).
4. Contact / E-mail form is actually a pop-up with "close" functionality. The user can e-mail directly to the organization without opening a separate e-mail app.
5. For iOS, a notification pops up when using Safari (iPad and iPhone) so the user can add it to the homepage; furthering the app-like experience. It also has a launcher/splash image when the app is launched (for both iPad and iPhone/iPod Touch 3.5 + 4" screens)
6. The layout is 100% functional regardless of orientation.
7. In the form to fill out their information, when they have tapped/clicked to fill out that particular area, a shadow surrounds the box they're focused in. Triggering more focus.
8. Of course the basic keyboard switches are implemented. So when they're in ZIP, the number keyboard comes up. In e-mail the keyboard with @ in the keys, etc.
9. They're prompted / Alerted when there aren't sufficient information to submit.
Another experimental layer I have added are these elements:
1. I made it unable to "highlight" any text that is rendered by the browser in the page. Preventing accidental "blue" boxes when things are high-lighted.
2. The default highlight of gray/blue box when a clickable/tappable element is tapped.
3. The default yellow/blue glow when Text input is highlighted.
4. No "zooming" function. The design is simple enough to be used without any zooming.
5. Added proper "loading" and other feedbacks when the user interacts with the site.
The above elements although small, even minimal, in my belief extends the user experience.
I believe default text boxes, buttons, typefaces, and especially the ability to zoom, and highlight text; brings the notion of the product to the user as a WEBSITE. Not an app/program.
As for the process of actually entering the Philly Photo Day Submission; I have made 2 different versions for the mobile and desktop.
For the mobile:
1. The user taps on "TAP TO CHOOSE" Button, which will bring up a menu in iOS and Android to upload a photo by taking a picture on the device or choosing an existing image.
2. When the user has an image selected, the website views a "Loading Image" with a spinning loading circle until loaded(to downscale the image to preview); then shows a preview of the image before continuing.
3. The user fills out necessary information to enter. (The user can change the image at this stage as well)
4. When the user agrees to the ToS and taps on "SEND" a preview window of their relatively important logistics input is previewed. Which at that point, they can either cancel to edit for mistakes/changes, or continue.
5. They will receive an confirmation e-mail which includes their image, and their address. They are landed on a "Thank you page" after.
6. At the Thank You page, they can choose to tweet their photo. Which says "Just submitted a photo to phillyphotoday! Submit yours athttp://philaphotoarts.org/phillyphotoday . View mine here - with link to their image"
For the desktop, the process is same. Except #1/#2 is does not exist. They land straight to #3; the form to add/change photo (Not just change, like the Mobile).
All of the submissions are uploaded on to a server as well as its logistics information in a database.
Each user is assigned a Submission ID in case of problems. (They can just refer to the submission ID and their submissions can be pin pointed precisely in the database in a very short amount of time).