Cira

Challenge

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.

Solution

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.

Discovery

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.

Interface

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

Contextual Menu

File Tree

• 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

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

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

• 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

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

• 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

Personas

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.

User Flows

After sketching out user flows while keeping competitor’s flows in mind, I created digital versions using draw.io 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.

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.

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.

Solutions to Problems Found During Lo-Fi Usability Testing

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.

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.

Iconography

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.

Typography

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.

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.

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

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

Conclusion

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.

Let's solve problems together