Three cellphones showing Cira's sign in screen and file view screens Cira, Cloud Storage for Designers


Cloud Storage for Designers

  • Role
    • UX/UI Designer
  • Tools
    • Figma
    • Adobe CC
    • G Suite
  • Deliverables
    • Hi-Fidelity Prototype
    • Personas
    • User Flows
    • Competitive Analysis
    • Logo
    • Wireframes
    • Design System
    • User Surveys
    • Brand Guidelines
    • User Stories


Cloud storage services can be cluttered and confusing, interfering with work. Lack of options when sharing and collaborating can frustrate the process and create unnecessary slow-downs in productivity, while useful features like version control go unnoticed and unused.


Cira jumps into the crowded cloud storage market with a clear and intuitive interface, easy sequential version control, and real-time collaboration. Cira also brings some unexpectedly playful features while providing all the staple tools of cloud storage.

View Desktop Prototype
Cira mobile and desktop screens


User Research

To learn more about people using cloud storage, I first conducted a user survey to help understand people’s goals, problems, and barriers. A total of fifty-three respondents participated, and although several of their frustrations related to price and storage, many actionable problems presented themselves, including:

  • Difficulty organizing files
  • Being unaware of version control
  • Finding the interface complicated
  • Not being able to easily see the number of files in a folder

Cloud Storage is popular

Cloud storage use was extremely high due in part to internet recruitment functioning as a screener. Respondents were also generally young and living in metropolitan areas, and were very comfortable using computers. The majority used cloud storage daily.

Do you currently use cloud storage?

An Opportunity for version control

One of the more intriguing discoveries of the user survey was that people rarely used version control in their cloud storage but had a strong interest in it.

Which collaboration features would you use if available?

The majority of users are interested in version control when its purpose is described to them.

How interested would you be in version control for your files? Version control is a way of safely modifying a file while keeping a master copy.

I decided to make version control a key feature based on these results. Being aware that it is an unfamiliar feature to many and platforms like GitHub can be intimidating, I made the process as simple as possible while maintaining its collaborative strength.

Survey analysis also revealed that:

  • Less than half of people organized their files
  • Expense, privacy, and security are major concerns for many
  • YouTube is the most popular external learning resource, followed by documentation

Competitive Analysis

To learn more about the features people did and didn't like in their current cloud storage, I analyzed the three most popular services found in the user survey with a competitive analysis. I also mapped out user flows for these products to see how they worked and the logic behind their differences.

Google Drive

Google Drive was overwhelmingly the most popular service. It also was mentioned most when people discussed their frustrations. Its interface is clear and mostly intuitive.

Google Drive's Interface

Drive's interface has contextual menus accessed by right-clicking and a persistent file tree that displays nested, customizable folders.

Contextual Menu
Google Drive's contextual menu
File Tree
Google Drive's file tree showing deep nesting
  • Strengths
    • Handy sidebar with persistent file tree and access to recent, shared and starred files
    • Contextual menus and drag & drop interface
    • Easy to locate files and folders with with colored folders, stars, and search
  • Weaknesses
    • Basic version control
    • Lacks file tagging
    • File tree expands indefinitely
  • Opportunities
    • Advanced version control
    • Automatic file tagging for photographs
    • More intuitive file tree


Dropbox was also very popular. It was the only service that has both Slack and Zoom integration. Its UI was disorganized, however.

Dropbox's Interface is confusing
Dropbox's Interface

During a heuristic analysis of Dropbox, I found areas where up to four menus were found side-by-side and overlapping. Many options found under a single button in other apps were instead placed in these menus.

Numerous lists and contextual menus appear close by
Dropbox's Interface Close Up
  • Strengths
    • Has helpful tooltips
    • More detailed version control than competitors
    • Password-protected links with expiration dates
  • Weaknesses
    • Confusing interface
    • No right-click interactions
    • No sidebar with file tree
  • Opportunities
    • Consolidating interface
    • Improving mouse interactions
    • Implementing sidebar with file tree

Microsoft OneDrive

OneDrive is a pleasant but underwhelming service that sacrifices power for simplicity. It was also the only service with a set of APIs that enabled developers to work on web services and client apps together.

OneDrive's interface is simple and dated
OneDrive's dashboard

Although OneDrive lacks visual finesse, it is well organized and has powerful automatic image tagging. The tags in the following image were all generated automatically.

OneDrive's photo tagging
Photo of a dog in a park stored in OneDrive, with descriptive tags alongside
  • Strengths
    • Automatic photo tagging and organization
    • Straightforward user interface
    • Integration with Office 365
  • Weaknesses
    • Somewhat confusing onboarding with obscure links
    • No sidebar with file tree
    • No organizational tools other than tagging
  • Opportunities
    • Improve onboarding and account management
    • Expand organizational tools
    • Update appearance
View Competitive Analysis


Using information gathered from both the user survey and competitive analysis, I created three distinct, representative user personas. All three personas are young, moderately to very computer savvy, and are at least familiar with cloud storage. Their three crucial problems were permission settings, organization, and versioning.

Wendy D.

Organize & Edit

Wendy, a young woman smiling outdoors
Backing up files is way too complicated. Why can’t it be two-clicks-easy?
  • Age
  • Profession
  • Location
  • 25
  • UX Designer
  • Seattle, WA


Wendy works full time as a UX designer at a non-profit organization. She's also learning to code with personal projects.


Wendy uses a variety of cloud storage services, especially OneDrive, for sorting personal photographs. She wishes they had more organizational tools.

  • Goals

    • Work on files without fear of losing something
    • Organize files and folders
    • See number of files in a folder
  • Frustrations

    • Doesn’t like to search for files created by team
    • Worries about making changes to other’s files
    • Dislikes complicated backup and sync

Vince E.

Organize & Permit

Vince, a younger man standing outdoors
I want to group files from different clouds and set passwords on them
  • Age
  • Profession
  • Location
  • 30
  • Video Editor
  • Salem, VA


Vince works as a video editor for a nearby animation studio. He loves to archive old clips and photographs he finds on the internet.


Vince would like to consolidate different clouds into a single source. He also wants to protect files with granular permissions.

  • Goals

    • Consolidate different clouds into one source
    • Give granular permissions and passwords to file and folders
    • Easily read and leave comments
  • Frustrations

    • Can't access Dropbox files through Google Drive
    • Other cloud storage he uses are very slow
    • Concerned about the security of important videos

Luca B.

Collect & Secure

Luca, a young man standing outdoors
I don’t trust cloud storage, and it’s too expensive for the amount I’d need.
  • Age
  • Profession
  • Location
  • 28
  • Doctor
  • Turin, Italy


Luca is a married doctor with two young children. He is always busy and cherishes his vacation photographs, which he edits digitally.


Luca only stores photographs and doesn't use cloud storage. He worries about privacy and the cost of storing hi-res photos. He'd like to share albums with relatives.

  • Goals

    • Save and organize vacation photographs
    • Share photographs with relatives easily
    • Have a completely reliable service
  • Frustrations

    • Worries about security and privacy of cloud storage
    • Concerned about price with his large number of photos
    • Memory-hogging software


User Research

I created sixty-four user stories with acceptance criteria using the personas and competitive analysis from earlier. I then prioritized each story to limit scope creep, keeping low priority stories for future use. Twenty-four stories were high priority and included in both the MVP and low-fidelity prototype.

Task User Goal Priority
As a new user I want to create an account via email So my account is associated with my files High
As a returning user I want to rename files and folders So I can organize and update them High
As a returning user I want to use nested folders So I can understand their hierarchy High
As a returning user I want my content to be saved automatically So I never lose work High
As a returning user I want to pin my files and folders So I can easily access them Medium
As a returning user I want to color code my folders So I can easily find and organize them Medium
As a returning user I want to create content descriptions So I can describe an item's purpose Low
View User Stories

User Flows

After sketching out user flows while keeping competitor’s flows in mind, I created digital versions using software. I also created a content strategy and diagrammed a site map at this stage. All three were then used directly in the paper sketches and made quickly generating different ideas for screens a much smoother process.

Paper sketches of user flows Digital user flow of file manipulation

Wireframes & Usability Tests

I created a series of hand-drawn wireframes for screens, modals, and components based on both user flows and content strategy. These were then recreated in Figma and made into a low-fidelity prototype.

Pen and paper sketches of Cira wireframes next to digital versions

I conducted three usability tests with twenty-four tasks using the low-fidelity prototype to pinpoint where experiences could be improved. Although users breezed through most tasks, there were a few frustrations found throughout the prototype, and participants felt that the onboarding messaging could be improved. I then ranked problems in an issue prioritization matrix developed by Carlos Rosemberg.

I found that the most critical problems users had difficulty with were:

  • Sharing files
  • Returning to the dashboard
  • Moving files
  • Finding the back-up and sync link

Solutions to the most pressing problems were implemented and tested in high fidelity usability tests with excellent results.

View Test Results

Solutions to Problems Found During Lo-Fi Usability Testing

Diagram showing changes from low fidelity to high fidelity prototype's dashboard

Because sharing files was so problematic, I completely reconfigured the share modal in the hi-fidelity prototype. Happily, users quickly returned to the dashboard once Cira's vibrant logo was in place, and no further adjustments were needed.

I also labeled the back-up and sync and setting links to help users find them quickly.

View Low-Fi Prototype
Multiple pages from Cira's brand guidelines

Visual Design

Because Cira is cloud storage for designers, I wanted it to have a look and feel more like graphic design software and less like cloud storage.

I kept the interface minimal while using energetic colors and sleek shapes. Travel and adventure are used for inspiration throughout the design.

View Brand Guidelines


To develop the Cira brand, I started with a mind-map to discover associations between the user personas and cloud storage. This led me to the name Cira, which is derived from the Latin word cirrus and alludes to both clouds and branching. Using the map's links and the attributes fun, adventurous, and playful, I quickly sketched out several ideas for the Cira logo.

Paper sketches of mindmap and logo exploration

The final Cira logomark is geometric and semi-abstract, but still clearly communicates cloud storage. Its circles radiate smoothly from a central point, conveying Cira's collaborative possibilities.


Cira uses a custom set of icons designed to be as clear and unobtrusive as possible. They are based on a twenty-four-pixel grid and have a uniform stroke weight.


The Quicksand typeface, which is both playful and adventurous, is used for Cira’s wordmark and headings. The user interface uses Oxygen, which is a highly legible complement to Quicksand and optimized for small sizes.

Cira's typefaces


Cira's colors are vibrant and fun. A range of greys subdues less distinguishing information and reduces clutter, while orange and ruby draw attention to both destructive actions and informative tooltips.


Deep Sky Blue


Royal Blue


Midnight Blue


Orange Red



Echo Blue

Link Water


East Bay

Black Pearl

Cira's design system

Design System

Before starting the high fidelity prototype, I utilized Cira's brand guidelines to develop a design system. This made the rest of the process smoother and helped ensure consistency across functional and perceptual components.

View Design System

Hi-Fi Prototype & Preference Testing

The share modal is one element that changed considerably after user testing uncovered problems. The initial version was frustrating for users because of the field arrangement, the appearance of the permissions dropdown menu, the field and button labels, and the contrast of the placeholder text.

Redesigning for clarity

To solve these problems I placed the permissions option directly next to its corresponding field with dynamic permission labels above, increased the contrast of placeholder text, and changed the wording throughout.

I also included subtle variations in cloud motifs in this and other modals to guide users. Because this addition would appear on numerous screens, I preference tested it and found that it was preferred by 56% of participants. Because of its potential to direct user's attention

Low Fidelity Test Modal

Share modal before changes

Revised Modal

Share modal after changes

Users found this modal much more clear and intuitive during testing and were able to share files with permissions easily.

Mobile preferences

I also used UsabilityHub to find people's preference for mobile layouts, including the color of the bottom icon bar. Participants preferred the darker bar by a ratio of 5:1 because it:

  • Was more balanced
  • Showed where the images stopped
  • Emphasized icons and was clearer

Which screen do you prefer?

Two mobile screens with dark and light bottom icon bars

Dashboard Grid View

Desktop dashboard

Dashboard refinement

Users found the dashboard easy to use and navigate through, and especially liked that folders displayed the number of items they contained. There was still some difficulty finding the backup and sync option, so it and settings were labeled. I also preference tested different arrangements of images and icons and found a preferred balance between the number and size of items and their spacing.


Working on Cira was a great experience and an opportunity to discover user needs in cloud storage. I found where I could improve my process in the future, especially during the strategy phase. I was happy to identify opportunities to improve Cira’s user interface after wireframe testing and enjoyed improving sharing features, control, and overall aesthetics.

To continue the project I’d conduct more ethnographic research, learning more about cloud storage use in specific contexts. I’d also observe other people using existing cloud storage to learn more about their likes, frustrations, and methods. In addition to helping develop even more empathetic user stories and representative personas, this would also help provide the vocabulary of users for both the landing page and the interface, as well as make future branding decisions clearer.

View Desktop Prototype

Let's solve problems together