top of page

Manage your cloud files better with Klono

Information Architecture | UX/UI 

Over simplified file management application to work with wifi enabled SD devices.

​

Client- KEY ASIC. Singapore

Team
- Melisa Orhan (Branding)
- Sharang Sharma (UX),
- Shivam & Akash Ashok (Development)



This presentation briefly shows the process involved in defining the problem statment, I.A and Interaction design

Klono-2.1-squashed.jpg

Problem Statement

The experience to manage files using multiple cloud services like Google Drive or Dropbox and local storage devices( like SD card or phone storage) cumbersome. Klono offers a unique platform to connect, manage and share all your files across multiple devices and cloud services. 

Personas and I.A

(This is the concise version of original 19 pages document)
 

  1. Exploring detailed features of similar or competing applications

    Example: ES file explorer
    -Displays each storage platform includes but not limited to Phone, Dropbox, OneDrive, K-Drive, Google Drive, Box, etc.
    -Ability to share all files to all platforms via all platforms etc.
     

  2. Sketching Personas and Context Scenarios

    Example:
    Possible Personas:
    i. 20 years old Sam who is engineering undergraduate and stores all kinds of data like movies, tv shows and music
    ii. 24 years old Samantha who loves storing/sharing pictures of his friends and places she visits
    iii. 28 years old John who loves shooting videos
    iv. 32 years old Paul who is excessively use data sheets and presentations for his work
    v. 44 years old Mrs Schultz who loves uploading her cooking recipes in her blog

    Sample context scenario-1 :
    Our first persona is Sam who is an engineering student and loves storing all kinds of multimedia files like movies, tv shows, pictures and music. Although most of his storage is on the local computer hard drive but he likes keeping stuff on his mobile whenever on a go. He owns a good phone with ample storage and rarely uses cloud storage as it cost him being a student. He wants a quick way to access to all his movies or music files  at one place to open in his favourite players.
     

  3. Exploring UX Components
    Example: Login, Signup, Add Storage, Settings, Sharing options etc
     

  4. Sketching component use cases
    Example:Login/Sign up:
    i. Could I use the app without signup or login?
    ii. Is there a single step sign up feature?
    iii. What are the different ways I could sign up?
     

  5. Suggesting and segregating features for Phase-1 
    Example:Login/Sign up:
    i.  Authentication by phone number
    ii. Single button for Sign up/Registration
    iii. Auto-verification-Phone code
    iv. OTP Confirmation(Code sent to phone by SMS)
    v. Automatic verification of OTP(no user input)

    Phase-2
    Walkthroughs before registration
    Email registrations(Web version future scope
     

  6. Create structures for all Components and Use case scenarios
    Example:Login/Signup:
     

  7. UX research
    Example Login/Sign-up

User-flow-squashed.jpg

Fig.1 - I.A for the Login flow

Interactions and Prototyping

Below are the screenshots of the user flows and the micro interactions designed for Klono

IxD-1-squashed.jpg
iXD-2-squashed.jpg

Fig 3: Micro- interactions for the Search functionality or play with the Invision prototype

Interface Design

Few of the important screens from the project and style guide for future versions

All-screen-collage-squashed.jpg

Fig 4: Interface design for Sign up and inside screens
 

Ui-kit-squashed.jpg

Fig 5: UI kit

Activity111131113-squashed.jpg

Fig 6: Styleguides defined for development

portfolio UX product design zeta Ideo startup UX bangalore

© 2023 Sharang Sharma. All rights reserved. This is a personal portfolio and the logo is registered trademark by the owner Sharang Sharma.

bottom of page