- UX & UI
- Detailed Style Guide
Jumpshare is a real-time file sharing app. It lets you share files, capture screenshots and annotate those. It all happens in real-time.
Jumpshare reached out to me to help them design the Mobile App from scratch. After the successful collaboration, I also helped them redesign the Web App. For both projects, I worked closely with the founded—Ghaus Iftikhar. It was a delight working on this project, and I learned a great deal about designing a product for users.
Mobile App - 2013
With the Mobile App, Jumpshare was aiming to give its user the ability to view or share files in real-time from any place.
The client was well prepared with all the user-flows and wireframes ready. My job was to tinker the wireframes and suggest better UX methods where needed. The primary goal was to design it in a way that one Visual Style could work for both Platforms—iOS and Android—with a little bit of tinkering.
Wireframes Provided By Clients
I kicked off the project with the screen—My Uploads—where users would spend most of its time. I rethought the brand colors by improving the dull tones to the vibrant ones. Keeping the simple structure for the entire interface, I also designed the icon set which matched well with the overall visual style.
Cards that showed the uploaded files and their interactions were the most important aspects of the product, and it was essential to design them in a way that for the users it’s easy to grasp whether there is a single file in the folder or multiple, and what type of the files are they, in a glimpse.
We spent a great deal of time perfecting it and improved it after each iteration.
Users can Copy, Share, Delete and even Self-Destruct the folder. Info Screens are the places to use such functions. A conceptual shape was designed for each function.
Web App - 2014
Using the Web App, users can drag & drop files and share the link as the files are being uploaded, it happens in real time.
After working on the Mobile App, my contract was extended, and I was asked to redesign the Web App, dropping the Skeuomorphic feel of it, and implementing the newly explored Visual Language.
The User Experience had to be rethought, and for that, again the client was well prepared with very detailed wireframes.
Wireframes Provided By Clients
After brainstorming with the founder and gathering all the information, I started with My Uploads which was the heart of the product, i.e. the place where users would spend most of their time.
Colors, Styles, and Icons were derived from the Mobile App and tinkered to match with the Web Standards. The goal was to give the entire Web App a lightweight feel; it was previously designed with Skeuomorphic Feel.
The thumbnail was an integral part of the product; it’s the component with which user would interact most of the time on different screens and scenarios.
It had to be made self-evident, helping the user understand how many files, and what type of files a folder is comprised of, in a glance.
The user can upload new files, delete files, schedule to share files for later, or make a folder private; all this happens through interacting with the thumbnails, we went through different iterations to make the experience as seamless as possible.
In some scenarios, you run short of space, and all the information can’t be displayed in text form. Meaningful icons can come handy in such situations. I crafted a fresh icon set in 1px stroke style to match with the interface.