hero image

Stash

Cloud storage is boring.
Stash makes it fun.

Design Roles

  • UX Design
  • Visual Design
  • Branding & Identity

Deliverables

  • User Surveys
  • Competitive Analysis
  • User Personas
  • User Flows
  • User Stories
  • Wireframes
  • Concept & Identity
  • Logo Design
  • Style Guide
  • Moodboard
  • User Testing
  • High Fidelity Mockups
  • Clickable Prototype

Specifications

  • Duration
  • 6 weeks
  • Tools
  • Sketch
  • Figma
  • InVision
  • Adobe Creative Suite
  • Usability Hub
  • Google Forms

Summary

Memes, gifs, and funny videos are their own unique form of communication. And while Silicon Valley heatedly exchanges spreadsheets and documents for the big meeting, millions of other people share a silly picture just because it's #ThrowbackThursday. The goal of this project was to bridge the usability and ease of cloud storage with all the interesting ways people communicate.

Problem

Through my survey research and interviews, I found that some people found their cloud storage options daunting. They associated these apps as more "businessy." They also didn't see a benefit from them since they didn't use file storage daily. They did, however, have a massive collection of images and stockpiled them in their text conversations, photo library, and social media, but these places made it hard to find the right file when they needed it the most.

Solution

Enter Stash.

Stash was created to store and organize the files people share the most often—pictures, gifs, memes, videos and anything else they care about. It's easy to use, approachable and never takes itself too seriously. It organizes content automatically or allows users to do it for themselves. It's a modern solution for the even more modern problem of having too much stuff.

stash iphones

Process

User Surveys

I created a user survey to determine what frustrates cloud storage users and what they enjoy about the service. Not to be left out, I also wanted to get the opinions of cloud storage averters. I hypothesized that the reasons they stay away from these services could be addressed if there was the right appeal for them.

Survey Data
Survey Highlights
  • Users overwhelmingly voted "Ease of Use" as their favorite feature of thier cloud storage
  • 83% of users value “Uploading Files” and “Category Organization” as their top 2 most important feature for cloud storage
  • “Content Creation” ranked last in features users would enjoy about cloud storage
  • 75% of survey partcipants state they use cloud storage for personal files
  • Nearly 1/5 of participants stated they didn't use cloud storage at all
Competitive Analysis

The competitive analysis was instrumental to my process. Dropbox was too enterprise focused, Google Drive is bloated with features and Pinterest although simple to use, does not support all file types. I imagined an app with the cool factor of Pinterest but features more like Dropbox and Google Drive. Taking account of the research so far, I was able to combine the best features of existing cloud storage, address their opportunities and create an ideal solution: an approachable, easy to use application that helped users categorize and upload all their files without much effort.

dropbox
Dropbox

+ Holds biggest market-share
+ Variety of sharing options
- Only 2GB free storage
- Too enterprise focused

google drive
Google Drive

+ 15GB free storage
+ Free document creating tools
- Privacy concerns
- Google product ecosystem

pinterest
Pinterest

+ Visually appealing
+ Simple Organization
- Lacks support for all file types
- Lack of file view options

User Personas

The goal of any persona is to humanize data in a meaningful way. Data helped me create two personas to drive the project further. One persona was frustrated by not knowing where specific files were located. My second persona was overwhelmed by the number of files with no real way to sort them easily.

persona1
Chloe

22 / Single
Retail Specialist San Francisco, CA

Motivations

Chloe is a big fan of her mobile device and relies on it for constant communication with her friends. She loves Instagram and Snapchat but stays away from iCloud. She often communicates with images, gifs, and memes with her friends that she saves from the internet. But when it comes time to reply, sometimes she can’t find the right file and ends up downloading or screenshotting the same content over again. She receives daily messages about her storage being almost full.

Frustrations

Chloe is stressed from the daily chore of making space in her phone because she takes too many screenshots. She is also weary of storage applications which have let her down in the past. Often she is frustrated becuase she has to look in many places to find a particular file.

“I have so much stuff I don't know where to find it”
persona2
Raymond

29 / Single
Marketing Manager Oakland, CA

Motivations

Raymond is a marketing manager who leads a very busy life. He works out every morning around 6am. When he gets to work, he has a team which he manages, and relies on them heavily to keep tasks organized. When he gets home, he often doesn't have time to cook, so he loves the convenience of food delivery apps and orders it several times a week. His personal life usually falls second to his work life, and he falls through on his commitments to friends.

Frustrations

Swamped with too many time commitments files pile up quickly for Raymond. He ends up spending too much time looking for files and organizing things. He wishes that his files could be organized for him in some way.

“It would be amazing to have things work automatically”
User Stories

Once the personas were fleshed out, I created user stories for new and returning users to my app. I made the lists and then prioritized them by which were the most important. Here's a taste:

  • As a new user I want to create an account
  • As a new user I want to upload a file
  • As a new user I want to see why this would benefit me
  • As a returning user I want to save my account information
  • As a returning user I want to be updated on changes to my account
  • As a returning user I want to see my files visually
User Flows

I then mapped out user flows for some of the most pressing features like account on-boarding, uploading content, file sharing, and collaboration. I decided to differentiate some of the flows based on web or mobile. For this project, I ended up creating a working prototype for only the web version.

onboarding
uploading
filesharing
collaboration
Wireframes

Taking inventory of all the features, flows and personas I built a basic minimal version of what the site would look like. I wanted large page-wide images with a focus on simplicity. Once the wireframes were done, I made them clickable and created the first working version. I tested this version with a few people and it was quite eye-opening. One of the biggest takeaways for me was that people were confused when it came to organizing content. In one particular test, I had to give more hints than I wanted to– clearly I was making this too hard for my users! I also noticed that the collaboration and share file process were nearly identical. Humbled by the tests, I condensed that flow into one process that could be either shared or collaborated easily and wouldn’t confuse my users.

wireframe1
wireframe2
wireframe3
wireframe4
wireframe5
wireframe6
wireframe7
wireframe8
Branding & Identity

I started my branding sketches focusing on the sharing aspect. These sketches led me to the name "Ever Share." With feedback from peers and industry professionals, they weren't in love with the idea and it was a little to close to another competitor's name. They suggested I focus on the storage aspect instead– since users seemed to gel with this concept more. I used a mind map, and a word association list and worked hard to create a name that reminded people how easy it can be to store things. I looked around my living room and thought about all the way I stored things. A ladder shelf, floating stands, drawers, boxes- they all inspired me. Below, you can see how I ditched “Breeze Bin” and “Cinch Stash” and went with a much simpler name: Stash. It's a great feeling when you land on a name and it just fits.

mindmap1 wordlist1 branding sketches1 mindmap2 wordlist2 branding sketches2
Logo

From my initial sketches, I really enjoyed the drawer concept and created two slightly different versions. With both designs side by side, I made the decision to go with concept #2 because of its rounded font and drawer details delivered on the friendly easy-going vibe I wanted for the brand.


logo concept1
Logo Concept 1
logo concept2
Logo Concept 2

Small changes then were made to the logo to help tighten up the design. I ended up changing the logo font size and kerning, the spacing of the words relative to the drawer icon and shortening drawer width to match the length of the words. They may seem like tiny changes, but these little details make a lasting impression that will represent the brand of this company for years to come.


logo before and after
Color & Typography

The most popular color for both men and women is blue. I also know that it is a popular color in the cloud space– probably having to do with the idea of sky and clouds. I chose a navy blue as Stash's main color, to embrace the pre-established cloud marketplace, but chose a lighter blue and rose to compliment and contrast. These colors also help the app have a fun and approachable aesthetic.

stash colors

Choosing "Quicksand" as a font for the logo, I also tried using this as the larger font for headlines. It's a friendly-looking font, both inviting and fun and I feel like it's a perfect fit. Complimenting this font I originally had IBM-Plex serif. However, it's versatility left me wanting more. Even though Montserrat- which is is also a geometric sans-serif- it is much more legible at smaller font sizes.

quicksand ibmplexserif montserrat
Style Guide

To get a sense of how color, design, voice and typography would work together to create the Stash brand, I developed a style guide. I took time to focus on the voice of Stash, as this is a pivotal piece of what makes Stash different than other cloud storage companies. While competitors seize an opportunity to focus on a concrete goal for file storage like collaborating for an end goal or completing an expense report, Stash has a much smaller goal: a place to store the stuff users care about so that they can quickly find it and share it.

styleguide
Moodboard

Rounding out the last bit of branding, I pieced together a moodboard to establish what users should feel when they visit the site or use the app. Quirky and fun design inspirations helped convey the important emotions- joy, playfulness, and fun.

moodboard image
moodboard image
moodboard image
moodboard image
moodboard image
moodboard image
User Testing

At this point, it was time to put rubber to the road and create high fidelity mockups. I ran user tests in person and remotely to gather data on its usability. The first version of Stash was too sparse and its scale was a little out of proportion. I was also a bit inconsistent with my use of color. One participant gave feedback about notifications and their positioning, and how it was too obtrusive. I implemented changes to my prototype and incorporated their feedback to create the app Stash is today. I provided some before and after images to give you an idea of how the design process evolved over time.

User Test Highlights
  • Added colored navigation bar on homepage to create some variety to the mostly white design
  • Created more visually interesting graphics based on some users saying design was “too simple”
  • Described some key features on Stash homepage because some users didn’t quite understand what Stash did
  • Shortened the size of the footer because it was quite large in comparison to the header
  • Changed the placement of some of the navigation links to put more focus on sign in and sign up buttons
  • Used color and placement more strategically to better highlight calls to action, error states and notifications
  • Moved notification banner to the top of the page instead of the middle to create let users still view their content while being notified
  • Shrunk the sidebar and changed its color to maintain consitency across landing page and the dashboard
  • Created more ways for users to change how they view their content in the dashboard
Homepage
stash homepage before stash homepage after
Sign up
stash signup before stash signup after
Sign In
stash signin before stash signin after
Dashboard
stash dashboard before stash dashboard after

What I've Learned

I'll be honest. At first, this project was going to be a simple clone of other cloud storage apps. But in the process of trying to do that, I actually began to care about a real solution for the files that my users sent to each other. So many files and images are going back and forth so quickly that while conversations are more visually interesting, they are also taking up much more space on our devices. It feels good to create a solution that takes into account our current communication landscape.

If given more time I’d like to be able to make some of the sharing aspects more ironed out. There is plenty of room to add functionality for more robust sharing and collaboration. I also wanted to create a place for comments once content was shared with someone. I envisioned a quasi-social media space for files shared that could create and spark even more conversation and shares. However, my biggest regret was not making this a mobile app. I have a few mockups for a homepage and sign in, but given the social aspect of sharing and how often people have their mobile devices with them, a fully-featured mobile version makes the most sense.

It was important to me to help people like my girlfriend and many others, who use their devices to interact with those they care about. While the project brief had specific ideas about collaboration, potential users I surveyed had very different ideas about what they wanted out of an app like this. I hope in the future I can help companies create products that put their users first.

GameChanger

Bloc Jams