MyTimes
Your Photo on Times Square Now!
​
Lo-Fi and Hi-Fi User Flows | UI Design | Sketch | InVision
My final project for the Web Design summer course at Pratt Institute was a prototype for an app that allows you to upload your photo in Times Square to one of Times Square’s billboards.
The money paid is donated to a charity of the user's choice and one would use AR to find their billboard and get their cameras ready!

App Features
-
A person in Times Square can choose to upload different number of photos to a Times Square billboard at varying costs for a few seconds
-
The user can choose which charity to donate the money to.
-
Images are checked against appropriateness guidelines
-
Billboard chosen is a surprise
Design Challenges
-
The audience mainly includes tourists from all over the world and some New Yorkers
-
App must be universally accessible and easy to navigate​
-
-
Times Square is a noisy and hectic user environment
-
App functionality must be based on simple and quick tasks
-
Sitemap
Lo-Fidelity User Flow (Choosing Plan to Making Payment)


Design Decisions
Simplified color palette to white and shades
of blue

First action performed by the user is choosing the language
Selected vibrant and energetic neon blues to reflect surrounding atmosphere
Easy 4-step process with visual markers of progress
Information is always input by choosing from options, not typing. App has access to phone's gallery so that images can be viewed quickly and easily in-app.

Neon blue used to highlight important actions to be distinctly visible at all times
Only middle window of the screen changes for different tasks but the bottom and top layouts remain consistent

User can choose to read more information but initially only provided with a short bio of each charity


A preview of the chosen options is provided to avoid user errors
Payment screen is highlighted with a different background color for emphasis
Final Prototype
Hi-Fidelity Interactive Prototype Built on Sketch and Invision