Flotr – A minimalistic photo-sharing app.
Late in the Fall of 2015, I got to work on one of my favourite projects in my entire undergrad. The task at hand was simple: pick an aspect of your daily lives that you wish was better, and improve it by designing and building a functional prototype. My group decided to create a distraction-free photo-sharing app that put the content first, and we called it "Flotr".
"Flotr", named for its ease-of-use and distraction-free UI that made browsing photos feel "as effortless as floating down a stream", was designed and built over the course of 6 weeks at McMaster University for SFWR ENG 4HC3.
Below, you'll find screenshots, scans, and insights into our design process, starting with our initial sketches and wireframes, and ending with screenshots from the finished product. You can also find the source code for the prototype here: https://github.com/arka-g/flotr/
It all started with this rather confusing-looking whiteboard diagram. There was a certain level of functionality we had to have in order to meet the project's requirements, and as such, in addition to basic photo uploading and browsing, we added features like "Liking", "Commenting", and even "Purchasing" either digital files or prints of the photos to mimic and improve upon pre-existing photo-sharing services like Flickr and 500px.
From our initial whiteboarding session, we decided upon some key features of Flotr. The first of which was how users would browse and discover photos. One of our main goals with Flotr was to create a platform that put the content first. As such, photos took up the entire screen, and navigation was overlaid above the photos, only becoming visible when the user moved their mouse. So, rather than relying on mouse and pointer interactions for navigation, we decided that Flotr would use simple, yet powerful keyboard shortcuts to make things as simple as possible for the user.
Using the Left and Right arrows on their keyboard, users would be able to shuffle between the different categories of photos, and once they found a category that interested them, they could simply use the Up and Down arrows to drill deeper and discover other photos that fell under the same category. If they saw a photo they liked, they could press "L" on their keyboard to give the photo a like, and if they wanted to comment on or buy a photo, they could press "C" or "B", respectively.
After the whiteboard session, we created some simple wireframes on paper. The above 2 wireframes detail the initial state of the application for first-time visitors. Initially, users will encounter a splash screen overlaid on top of the first photo that details how the keyboard navigation of the site works. Once dismissed, the user is immersed in the full-screen content and can begin exploring!
More paper and pencil UI sketches. These 4 detail most of the screens that occur outside of the main photo-browsing view: "Log-in/Sign-Up, Photo Upload, Browse Categories, and User Profile.
Finally, we moved on to full-fledged UI mockups, and built the prototype to their exact spec. The finished product can be seen below!
The final Information/Splash Screen design.
Once the splash screen is dismissed, the user is immersed in the content and can begin browsing distraction-free.
Hovering over a navigation icon reduces its transparency to 0%, making it fully opaque and signalling to the user that it can be clicked.
The menu for unauthenticated users.
The menu for users who are logged in.
The "Comments" panel, with sample comments.
The "Buy" panel, with sample pricing and packages.
Log-in screen.
Sign-up screen.
The "Alerts" panel, which lists all the notifications for a user.
The "Browse Tags" page, which allows users to scroll through and quickly select a category that interests them.
A sample of a user's profile page, which gives a quick glance of a user's photos and the social activity on each of them.
The "Upload" page, which gave users the option to either drag and drop or select the photo they wished to upload.
Sample search results, which return both matching Tags and matching Photos.
And finally, the "Change Profile Picture" screen.
