Jan 2014   -   Feb 2015

Jumpshare

Services

  • UX & UI
  • Iconography
  • Detailed Style Guide

Introduction

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
Challenge

The Challenge

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
Mobile app Wireframe
Mobile app Wireframe

Kick off

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.

My uploads
File detail
My uploads interaction

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.

User detail
User detail

Initially, I relied on an icon set, but after not finding all the relevant shapes, I ended up creating my own set of icons, which later was scaled to a separate icon project and made to the public for use.

I wouldn’t be wrong to say that Jumpshare was which encouraged me to dive deep into the world of iconography.

Drops
Features Mobile
Analytics Mobile

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.

The
Challenge

The Challenge

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
Jumpshare web app wireframe
Jumpshare web app wireframe
Jumpshare web app wireframe

Kick off

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.

Web app My Upload page

Jumpshare supports preview of 250+ files, in case a preview fails to load, we show the respective file type icon. For this, a new file-type icon set was crafted to match with the weight of the thumbnail.

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.

Meaningful Icons Image

Analytics is the place which helps the user get stats against their shared files and folders. This was the last phase of the project and again, I was given high-fidelity wireframe for it, my job was to design and align it with the rest of the Web App.

Web Analytics Image

A detailed style guide was created at the end of the project to facilitate the developers with all the reusable components and their interactions.

Web Analytics Image

At the end of the project, I voluntarily redesigned the landing page. The goal was to emphasize the top selling features which can help gain more conversion. Also, presenting the information in different sections, making the design more interesting as user scrolls.



Unfortunately, it wasn’t used, but some of the ideas presented in it were taken from it.

Jumpshare Landing Page

Zulal is an excellent designer who pays close attention to detail to both UI and UX. Based on only a few rough sketches and wireframes, he was able to suggest better UX methods to streamline the user flow.

He is dedicated, hardworking, and above all, gives special time and attention to his clients. He greatly exceeded our expectations. We would love to work with him again.