zeehive

SaaS cloud storage system for organizing, uploading, and creating content.

    Tools

  • Figma

  • Google Forms

  • Balsamiq

  • Invision

  • Maze

    Roles

  • Research

  • UX Design

  • UI Components

  • Brand Identity

Problem

Cloud storage users have difficulty finding a file again after it is uploaded. The majority of my users reported that they regularly lose or forget about files.

Solution

Simplify the organization process. Focus on the most effective organizational tools and make the most basic organization processes require fewer steps.

Research & Discovery

User Surveys

Insights from surveys:

  • Users wanted to be able to store photos and documents.

  • Users were sharing documents mainly between coworkers or classmates.

  • Users were dealing with documents in a desktop interface.

  • Most felt that simple was more important than powerful.

Storing vs. Relocating

Most of the users I surveyed had used other cloud storage services before. I asked them questions about their experiences with other services. The responses to these two questions stood out:

  • After you have added a file to your cloud storage, how do you find it again?

  • How easy is it for you to find the file you are looking for in your cloud storage?

The combined data showed that "Filers" (those who put their files into folders) generally had a much easier time than "Searchers" (those who used email or the search function) in relocating content.

Organizing content is a problem for 90% of my users.

  • However, 0% reported using organizational tools such as tags or bookmarks, and fewer than half were putting most of their files into folders.

  • Users who filed their documents in folders were twice as likely to find their files again.

Competitive Analysis

Analysis of user flows for onboarding, uploading an item, and organizing an item. I found that the organization process often required 3 or 4 clicks per item.

box logo dropbox logo evernote logo

Personas

I developed two personas for this product. For the MVP, I focused more on the needs of the “Storage Focused” user to keep the project in scope.

Storage Focused

Peter VanNess

cool dude with sunglasses
  • Make notes
  • Save links
  • Upload photos
  • Backup files
  • Deal with a large files
Communication Focused

Paige Sandoval

hip lady with attitude
  • Make notes
  • Save links
  • Share files with coworkers
  • Create Shared Libraries
  • Push to social media

User stories and user flows

    Major Tasks

  • Onboarding

  • Content Creation

  • Adding Content

  • Organizing Content

  • Sharing Content*

*My researched showed my users wanted to be able to collaborate. Sharing with teams and individuals was included in the user stories, but I ended up drastically simplifying this feature to keep the project in scope for the MVP.

User Flow Thumbnail
Wireframes & Prototype

Now for the fun part! I sketched out a ton of different layouts for the dashboard and landing page and focused on my highest priority user stories: the signup process, uploading files, creating new documents, and organizing files.

sketches

Organization vs. Content Creation

Early designs had a user flow that didn’t allow users to upload an item without organizing it or assigning it to a team. This made the system more organized, but it also makes it more difficult for users to accomplish their primary goal: adding content!

Wireframe

Tweaking UI Patterns

I was pretty convinced in the wireframe stage that a horizontally expanding menu would work before it was immediately rejected in my first round of user testing. Thanks for keeping me honest, testers.

Hi-Fi Mockups

Bringing it All Together

Now that I had an idea of the structure, I began to work out the hi fidelity interface including making notes and uploading content.

Notes Mockup

Using Real Content

Since most users have a lot of random, chaotic content in their storage, I used real content instead of stock photos to envision what an actual user’s desktop might look like. This helped me decide things like how much space I should make for user-generated titles and what a desktop would look like with a variety of file types.

Final dashboard grid
Branding
Moodboard thumbnail

Moodboard

In creating a moodboard for Zeehive I needed a neutral structure with a smart, snappy feel. Visual inspiration for this project came from these library photos.

Name and Logo

The name and logo developed from a honeycomb concept representing an efficient storage system. The hexagonal logo scaled well and had the potential for fun visual motifs.

Logo sketches and iterations

Style Guide

The style guide included typography, color palette, iconography, patterns, and components. With the honeycomb theme, there was a danger of the branding feeling “natural” like a food item. I chose the Michroma typeface in the word mark and the cool neutral color palette to give it a “digital” feel.

Marketing Site

home page home page
User Testing

In the second round of user testing, I tested the prototype with four users and did A/B testing for specific features. The hi-fi mockups helped me work out some of the color choices, simplify the sidebar, and improve user confidence.

Users were nervous about...

  • Losing or accidentally deleting their files

  • Accidentally sharing an item with the wrong person.

In response, I added...

  • Clearer confirmation messages for uploading an item and the option to undo an action.

  • Clearer labels for where an item is filed/shared

A/B Testing

A/B testing for the location of the icons was almost an exact 50/50 split. I opted for the bottom position even though it was a less common pattern because it left more room for expansion.

bottom icons top icons
What I learned

Understanding my process

In the broadest sense, this project helped me see my process as a series of arcs. This page from my journal describes the expansion and contraction of possibilities as I asked questions, identified problems, and responded with potential solutions. Some arcs were hugely expansive in terms of generating ideas and possible directions while others were smaller and more focused on specific problems.

sketch of design process

The prototyping stage of this project in particular opened up my understanding of the flow between mockup iterations and user tests. At the points when progress on my mockups stalled out into the land of guesswork, the feedback I got from user tests would always steer me back into a focused direction, and I could take the next leap forward.

Organization as a Human Problem

This project got me thinking about how we organize things. The people in my house were leaving coats and bags all over the living room even though there was a closet with hangers right by the door. I put up a row of hooks and a few baskets just outside the closet and suddenly people were putting their things away.

I hypothesized that when we organize things, they don’t have to be very accurately organized in order to find them again and that might apply to our storage, too. This project would be different if the goal was storing something like financial records that relied on precision, but because my users were mostly private or small businesses, a little bit organized would be better than not organized at all. I found myself asking, where do I need hangars and where do I need hooks?

Currently available for design projects