Your address will show here +12 34 56 78
 
CLIPCHUTE

Make it simple to capture

  • Text Hover

Our client – Hayley McCool Smith, a journalist in UK. After years of work, she found out that there was no app which could provide an easy and convenient way to immediately save her photos/videos taken on the field into a shareable storage which could be accessed by her colleague.

 

Moreover, it should be capable of detecting a location where a photos/videos was shot and attaching additional information to reduce an effort of her work later. Then instead of waiting for technology to catch up with her idea, she decided to create ClipChute and gives us an opportunity to work on such an interesting project

Goals

Our goal was quite simple – develop an application which capable of captures photos/videos in mobile devices then upload it to ClipChute’s HUB (website) with some additional information.

 

The upload process should be simple, convenient, fast. Moreover, it should have a group of mechanism to ensure the uploading will be completed with or without detect any kind of error.

 

 Consequently, ClipChute has to stand out in the following ways:

  1. Make it simple to use and maintenance.
  2. Optimize time to upload videos.
  3. Provide a mechanism to save objects locally when error occurs and automatically upload them to ClipChute HUB when the system back to normal.

The market for online photo solutions is competitive, so we focused on delivering a solution that would be able to stand out due to its high quality code and optimized design

Wireframe

Once the goals were all set, this stage is where we are brainstorming to find the best way to create ClipChute.

 

For most of all cases, creating detailed wireframes usually involves to following steps:

  • Selecting color schemes
  • Choosing readable and visually appealing fonts
  • Creating a set of UI elements and putting them in order according to wireframes. 

 

At Dwarves Foundation, we use Sketch app for both wireframing and UI design.

Workflow

The core process of ClipChute is upload. Therefore, a workflow is kept as simplest as possible and should not be confused to users

  • Text Hover
1

When you are on field, you want to capture some images by your phone

2

You use ClipChute to capture them and it will send it to your HUB, you can add 'field notes' and Tags. These tags will help you to manage your data and make it searchable on ClipChute HUB

  • Text Hover
  • Text Hover
3

Once the upload progress finished, your content will be appeared in the ClipChute hub

4

On your page, when you click on an item, a meta notes will appear

  • Text Hover
  • Text Hover
5

Finally, you can publish your content to social network and archive into Parachute

The Architecture

  • Text Hover
A little more about Upload flow

As you might know, the most challenged mechanism of ClipChute is how the videos can be uploaded from mobile app to ClipChute’s server with assurance that the quality has not been compromised. Also optimize time to upload videos and errors handling are two of our main goals in ClipChute. 


Consequently, after spending time to research in this field we figured it out that if we splited the objects into small pieces then spent it to server one by one. The upload speed was increased remarkable and the effort to handle error is reduced 

 

Here’s an upload-flow summarize how it works

  • Text Hover
  • Text Hover
Dwarves Foundation Team

Quang Le

Project Manager, Devops

Huy Giang

Frontend Developer

Thach Le

Backend Engineer

Khanh Le

QA