Cloud Locker

UX / UI Design
Problem
Life is built with memories and relationships...and the paper trail.
Such documents are vital and perishable. Did you know that 100% of us will lose important documents at some point? So look no further...Use Cloud Locker!
What Cloud Locker does
It backs up your personal paper documents
It creates customized document backup lists
‍It is easy to use by answering just one question. Answer and receive your first document back up list made just for you. 

‍
desktop prototypemobile prototype

My roles

This project took three months, three redesigns, and three branding strategies.

Design Roles
UX Research
UX Design
UI Design
Graphic Design
Branding
Deliverables
Competitive Analysis
Concept and Identity
User Research
User Surveys
User Interviews
Personas
User Flows
Site Map
User Testing
AB Testing
Style Guide
Visuals
Wireframes
Mockups
Prototype 
Visual Design
Graphics
Icons
Tools
Figma
Invision
Adobe Illustrator
Adobe Photoshop
Draw.io
Usabilityhub.com
Pen and lots of paper
Oh… and post-its, my favorite!

Process

Competitive
Analysis

Google Drive

Saving
Organizing
Creating

Evernote

Bookmarking
Organizing
Web content only

Pinterest

Ideas
Inspiration
Mood board creation

Did you know that 90% of the total data in the world was generated in the last two years? I started building my solution by researching the top three platforms that store our data in the cloud.

What I learned

They try to do “it all”
Too complex to use
Violation of privacy
Manual file organization

What I wanted to do

Solve one problem well
Simple file organization
Personal experience
Show that we care

User Research

Survey Results

I put together a 20-question survey to find out what people know about cloud storage,
how they use it, what they like and what they don't like about it.
Usage

100% use cloud storage
89% save photos
77% save documents

Love

Convenience
Cheap / Free
Collaboration

Frustrations

Heavy interface
Organizing files is hard

Loss

100% photos / videos
50%   paper documents
78%   files are not recoverable

Who the users are

Gender: 50% male / 50% female
Age: 67% aged 25-35
Residence: 89% live in cities

Target audience

Large city dweller
Rents or moves a lot
Aged 25-45
Busy professionals
Travel extensively
Can work remotely

Personas

Edgar, 42

History teacher
Writes a blog
Collects historical documents
Travels to ancient sights

Needs

Save photos
A lot of memory
Easy quick search

Goals

Grow blog audience
Finish his Degree
Write a book

Frustrations

Bad file organization
Not enough space
Uses a scanner

‍

Angela, 32

Project manager in IT company
Frequent business traveler
Rents an apartment in NYC
Works remotely while traveling
Needs

Access files 24/7
Paper trail backup
Organization

Goals

Career growth
Staying mobile
More personal time

Frustrations

Can't always access files
Messy folder structure
Too much paperwork

User Stories
User Flows

Cloud Locker strengths

Quick to sign up
Easy to log in
Simple file upload
Guided file organization

Challenges I ran into

No social media linking due to privacy
Mandatory file organization
Personalization
Combining file upload & organization processes
see flows here
I went through 55 user stories before designing. Initially, I designed 18 user flows for MVP, and 6 made it into the final hi-fi prototype.

Site Map

Test results

Too broad scope - the main problem
Product idea was not clear
The branding was misleading
My user was lost
 AND
I was lost on how to fix it

How I solved the problems

Back to sketching board
I focused on one user group
Solve just ONE problem
Re-brand
Re-sketch
Redesign
Test, test, test...
see maps here
I started with a very extended site map. After testing the mock up, I realized that the user can get lost. I redesigned the site map based on the findings.

Wireframes
Mock-up
Usability Tests

Agenda

Test 3 tasks
Get feedback on the information architecture
Get feedback on functionality
Get feedback on product idea

Test results

Landing Page was lacking product information
Confused wording
Crowded submission forms
Busy Home Page
see test here
After sketching the wireframes, I realized that the platform was too complex. The very first usability test showed how confused a user was. I was determined to simplify - redesign - test - simplify again- redesign - test - again, again, again...

Landing Page


‍

Problems discovered

Nobody scrolled the page
"Sign Up" and "Sign In" button trouble

Solutions

Made scrolling section visible
Replaced "Sign In" with "Log In"
Left only one button to log in

Sign Up form


‍

Problems discovered

Very busy
"Continue" button is confusing
"Terms of Use" are not visible
Missing "remember me" checkbox

Solutions

Eliminated "OR" option to sign up
Renamed "Continue" button
Changed button style
Added checkbox for "Terms of Use"
Added checkbox for"Remember Me"

Home Page



Problems discovered

Confusing wording
"Upload" button is not visible
Too many options, where to start?
Duplicated "+" button

Solutions

Updated wording
Made a single "New" button
Changed "New" button style
Redesigned dashboard menu
Narrowed scope of the project again
App became about completing lists

Prototype
Testing

Agenda

Test overall functionality
Get feedback on the final branding

Test results

Misleading image choices
Small buttons
Too many buttons
Confusing text hierarchy
Complicated tabs
‍
This was the most challenging part. By adding images to a prototype we are at the mercy of first impressions. When it comes to the web, first impressions are the only impressions.

Branding and Functionality


‍

Problems discovered

Version 1 images were misleading
There was no product description
Too many buttons
Overall heavy interface

Solutions

Designed landing page graphics
Added product description
Left only one button
Added hamburger bar to free up space
Used color blocks for clarity and navigation
Eliminated all extra images

Home Page layout


‍

Problems discovered

Search bar was not visible
Very "dry" appearance
Complex organization
Busy interface

Solutions

Moved the Search Bar
Simplified tabs
Used lists for easy organization
Limited the scope of the project

Branding

Style Guide

Mindmap

Important paper document list

Birth certificate
Social Security card
Marriage license
Divorce papers
Mortgage
Medical records
Insurance cards
Tax returns
Will

More paperwork

Bank statements
Auto records
Investment documents
Lease agreements
Important receipts
Diplomas
School transcripts
Certificates
Renters insurance
100% of survey participants have lost documents and memorabilia, 78% of lost documents were not recoverable.
Idea:  Lets backup perishable paper documents!

Brand Discovery

Popular insurance sites

Statefarm
Nationwide
Mood:     "good neighbor that has your back"
Look:       Clean simple familiar interface
Color:      Reds, blues, and neutrals

Popular Cloud Storage sites

Icloud Drive
Dropbox
Mood:      Creative, modern
Look:       Organized, sophisticated
Color:      Cold neutrals, color pop
Concentrating on “getting personal” I looked at 4 companies that do it well.

Logo Design

Locker cabinet
Safe Handle
Footer + Cloud
I wanted to make a logo based on an easily recognizable object.
I got inspired by shapes of a locker cabinet, safe handle, folder, and a cloud.

Preference Testing

Simplicity was the key. For a logo, people liked familiar shapes like a cloud or a locker, and prefered a bright color for a pop.

Black & White Versions

1st Color Versions

Refining the Logo

Future Logo Applications

Use on dark grounds

Use on light grounds

Typography

I chose the type based on the key words: legible, formal, modern, white space.

Images

The image choices were inspired by the key words: clean, modern, simple, geometric.

Version 1 - way off...

too young
too happy
misleading background
is it a shopping site?

Version 2 - getting closer

too careless
too millennial
misleading background
is it a travel site?

Version 3

Since none of the stock images were working... I decided to design the graphics myself. I used Adobe Illustrator vector tool. Now it is unique and fits the product idea.

Conclusion

What worked

User liked the product idea
Paper documents need to be backed up

What did not work

Branding. It needed to be straight forward.
Image choices should have been tested before creating a prototype

Doubts

‍

Finding an original idea that will satisfy stakeholders and users is hard
Competing with giants such as Google Drive looks challenging

Surprise!

Research results of how easily documents are lost
First impressions are THE ONLY impressions... no space for getting the branding wrong

With more time

More user testing
More preference testing
Get feedback on branding before prototyping

Well noted

Know your user
Do more research
Test everything
DO NOT guess or assume
Pixel perfection

Want to get in touch?
Drop me a line!

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
BACK TO TOP
ProjectsABOUTCONTACTIN