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
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.
35%Confusing navigation or organization.
Connectivity and apps crashing.
50%Running out of storage space.
Shared content not accessable by collaborators.
"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
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.
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.
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.
- “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”
- “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?)”
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.
Adding an Item
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.
= Visible to non-cirrus users.
= Not implemented at this time.
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
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.
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.
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.
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.
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.
Expanded Search Bar
Folders and Files under the same list
Help Link at the top
Search Collapsed into magnified glass icon
Folders and Files now hierarchically separated
Help link is a hovering FAB
Drastically different visual tile organization
Tile with plus-sign to match tiles
All menu still present, but "recent" is removed in the next iteration
Pagination now available
Ability to switch between visual tile-view and list view
Can select all folders and all files
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.
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.
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.
Include toggle to grid/list view and pagination.
Quick tool options made available on right-click.
Colors and layout worked well. Yay research and wireframing!
Upload area say “Upload file or folder” instead of “Add”
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.
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.
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.
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.