Top

CIRRUS

Cirrus was my first large-scale project at Bloc, where I apprenticed under Alissa Likavek. The challenge was to create not just “another cloud storage app”, but one that would be unique, and have a chance to compete against the best by leveraging strengths that other products lack.

Research revealed a niche Cirrus could exist: providing a better sharing experience and a more flexible way to organize content.

Through the process of drawing user flows, sketching, iterating and testing, it was eye-opening to see how well the design process worked to create just the right product.

Research + Analysis

User Research

Discovering what the user would actually use.

To start out, I wanted to discover what users liked, wanted, and were most peeved about. This was also a good time to find out what elements were top-of-mind for users vs. just nice-to-haves.

Writing up a healthy set of questions, I sent texts to friends, family, posted on facebook, reddit, a couple slack channels to solicit responses to my google survey. Luckily my efforts were rewarded by thirty-three respondents, 75% of which already use Google Drive.

Main Frustrations

  • 35%
    Confusing navigation or organization.
    Connectivity and apps crashing.
  • 50%
    Running out of storage space.
    Shared content not accessable by collaborators.
  • 15%
    Other

"The following aspects of collaboration are very exciting to me."

  • 72%
    Permission levels such as viewing and editing
  • 63%
    Editing is reflected across devices and accounts automatically.
  • 56%
    Sharing content with others via link or social media.
  •  
    % respondents found these very exciting

Competitor Analysis

What are other apps doing?

Since I personally use and know features of google drive, I compared dropbox, evernote, and box to see what these other platforms had to offer.

Competitor Strengths (March 2018)
Dropbox, Box - Version history length
Box - Focus on security and sophisticated permission levels.

Where Cirrus could shine
Geared towards personal use, more flexible organization, easier sharing, intuitive interface and more free storage.

Personas

Summarizing with goals and frustrations

I lumped my users into demographically similar groups, and came up with 3 personas. Overall, ease of sharing emerged as a clear need for all three. Throughout the process, I referred back to these personas to remind myself what goals I was trying to fulfill, and if I was sorely missing considering any of them.

Raul
Sensitive Data Dude

Stores sensitive financial data

Goals: Ability to easily organize and share with specific people with select permissions.

Frustrations: App crashes, and takes a while to recover. Sharing files do not work all the time, so Raul has to email them on occasion, which isn’t as secure!

William
Tinkerer

Always playing with latest technology

Goals: Change notification levels. Sharing files with others, syncing only specific files to his cloud storage.

Frustrations: Not sure how files are indexed, trouble moving stuff across platforms. Seems to end up with duplicates when co-editing.

Samira
Photo Nut

Almost all of her items are photos.

Goals: automatic syncing of photos, sharing, comment/ upload notifications

Frustrations: Her google photos is running out of space. She’s convinced that there are better ways to auto-manage old photos to give her more space without paying for more GB.

User Stories

Expressing Needs in Plain English

I divided and prioritized my user stories under four different user cases.

Then I spent some agonizing minutes deciding how to prioritize them. It felt like educated gambling.

Many of the basic needs were clear through the user survey, but often the frustrations described how these basic functions were defective + advanced requests that would require the basics to be already present.

Collaborator

  • “I want to make sure ANYONE can view content that I've shared with them, regardless of if they have my cloud storage service, what device they are on, or what browser they are using.”
  • “I want my files to automatically sync across devices, and viewable without refreshing the page”

Backuper

  • “I do not want files to be deleted without my consent.”
  • “I want it to be clear what content is being uploaded automatically to give peace of mind (via a save/delete history?)”

Interaction Design

User Flows

Connecting the dots... and other shapes

Sketching allowed me to be messy, I brainstormed how a user might go about completing tasks such as signing up, adding content, and sharing something.

This was the part where I had interaction ideas handwritten sideways, upside down, with arrows pointing a lot of directions. Distilling the essence, I used draw.io to digitize the flows.

Onboarding

Sharing

Adding an Item

Content Strategy

Mapping out every single page.

To help me with wireframing, I needed to map out my content into specific pages. Using Flow Mapp , I outlined the content of each page, and how they may be connected to one-another.

Green = Items depicted on wireframe, and in high fidelity mockups.
Turquoise = Visible to non-cirrus users.
Purple = Not implemented at this time.

Wireframing

Never enough X-es, O-s, boxes, and Squiggles

I relied heavily on my sitemap, user flows, and user stories as I started to sketch out what my pages might look like using old fashioned paper and pen. These are different ideas for the user dashboard.

Iterating - Upload? Add? Save? Import?

Trying to find the right wording and placement for this action ended up being the longest testing-saga from the first digital wireframe to high-fidelity prototype tests.

1. Started with Import

2. Add is more familial, less techy-sounding

3. This placement tested to be more discoverable

4. Upload made more sense to my users.

Testing the Mockups

The Good

About half of my feedback was positive, including praise of the visual feedback when users interacted with the interface: sharing success, uploading progress, hover behavior.

The Not So Good

Test takers had trouble with how to move items. In this screenshot, the folder icon wasn’t understood. Instinctively, they said they should be able to drag the name of the file over a folder to drop it in. This included not only the line item, but in the breadcrumbs too. When moving items, dragging is more intuitive than clicking buttons.

Branding

Sketching

Best done on the couch with a cup of tea.

Taking a pause from the layout and content iterations, I dove into creating a brand for Cirrus. At this time, I already had the name “Cirrus” in mind. Cirrus is a type of high-flying light-whispy cloud. I wanted my users to feel light, elegance when using the application. I used a mind map to come up with more words and ideas to accompany Cirrus.

Logo Evolution

Moving through a couple different concepts, I preference tested the ideas and picked the top two choices. Spending some time to digitize them in Sketch, I narrowed to one choice and experimented with a variety of typography to match.

Design Guide

Guidelines are allowed to evolve.

Creating design guides are one of my favorite parts of the process. It is where my logical thinking and affinity to visual beauty come together. My quest is for simplicity and harmony, especially with this brand.

Initially, I picked Raleway and Montserrat as Title and Body text respectively, but learned quickly that there was not really a compelling reason to pull both those fonts in (extra download overhead!) because they were so familiar. Montserrat had enough weight variety to do the heavy lifting in all typography.

Visual Design

High Fidelity Prototypes

From blueprint to reality.

The dashboard went through many versions as I iterated through usability tests. I noted where multiple users were confused or struggled. As a result, I changed the placement of elements on the page, improved the visual hierarchy, and modified interactive behaviors.

Dashboard Evolution

  1. Expanded Search Bar

  2. Folders and Files under the same list

  3. Help Link at the top

  1. Search Collapsed into magnified glass icon

  2. Folders and Files now hierarchically separated

  3. Help link is a hovering FAB

  1. Drastically different visual tile organization

  2. Tile with plus-sign to match tiles

  3. All menu still present, but "recent" is removed in the next iteration

  1. Pagination now available

  2. Ability to switch between visual tile-view and list view

  3. Can select all folders and all files

Testing

High Fidelity Testing

Things are never really perfect

The best part about being a UX designer is that if you are not sure how something should work, the best way to find out is to test users. It’s great that we don’t have to invent it all by ourselves!

I thought I had ironed out everything by the time I was ready to test my high-fidelity prototypes, but there’s always something to tweak, especially when bringing in new testers who haven’t tested the product before.

Improvements

Improvements

Keep quick tools on the item row when it is selected!

Keep quick tools on the item row when it is selected!

In the grid layout, the select circle should be on the top left or right.

In the grid layout, the select circle should be on the top left or right.

Order files by last modified date by default, and remove Recent tab.

Order files by last modified date by default, and remove Recent tab.

Hotkeys should be enabled including Ctrl-Z, Ctrl-X, Ctrl-C, Ctrl-V.

Hotkeys should be enabled including Ctrl-Z, Ctrl-X, Ctrl-C, Ctrl-V.

Include toggle to grid/list view and pagination.

Include toggle to grid/list view and pagination.

Quick tool options made available on right-click.

Quick tool options made available on right-click.

Colors and layout worked well. Yay research and wireframing!

Colors and layout worked well. Yay research and wireframing!

Upload area say “Upload file or folder” instead of “Add”

Upload area say “Upload file or folder” instead of “Add”

Final Design

Three iterations later

Taking results from preference tests, in-person and remote user testing, my prototype evolved from sketches to Balsamiq wireframes and finally high-fidelity prototypes with interaction. View the video to see all key functionalities and the drag + drop UI Animation.

Reflection

The Design Process really works.

I am amazed how far users’ feedback combined with my experience and studying have brought this product where I truly believe it could compete with “the big ones” like google and dropbox if implemented correctly, and further iterated on using the same testing principles.

Lessons Learned

  • There’s no such thing as too much sketching

  • Trust your gut instinct; sometimes the right answer is going back to a previous version. Or just keep iterating if you have time.

  • The process will take 2 or 3 times as long as you think. Most clients will not usually understand why.

  • Done is better than perfect.

What's Next?

  • There are many more user stories in the queue that haven’t been implemented. That is where I would go to if there is more time, or a second design sprint.

  • As a Designer, I would go into more details and thinking out test cases and acceptance criteria for the developer to use when iterating on their code to match to the original user stories.