Stash
Stash is a cloud storage service focusing on providing a seamless experience to users in regards to creating and saving content. Stash prides itself on offering a real offline service while maintaining unbeatable security features.
Research
User Survey
The results of the survey proved that although there are many competitors in the cloud storage industry, participants are still not 100% satisfied. There were a number of issues ranging from confusing UI to no real offline access. My survey highlights will focus on cloud storage users.
88%
of users utilize cloud storage
50%
of those users utilize Google Drive.
100%
of users utilize cloud storage for saving files
90%
of users utilize cloud storage for sharing and collaborating
54%
of users would like to see an improvement in uploading files
59%
of users would like to see an improvement in collaboration features
Survey Takeaways
  • Focus mainly on Google Drive
    as the main competitor
  • Collaboration, saving/uploading
    file features are important
  • UI can be confusing
  • Not enough free storage
  • Offer more variety of pricing plans
Competitive Analysis
Next I moved onto getting to know my competitors. My competitive analysis (SWOT analysis) focused on the top three companies that I based on my own research: Google Drive, Dropbox, and OneDrive.
is the most popular due to its free plan offers the most space with 15GB. Furthermore, they have the most features and customizability. However, this is also their disadvantage as the UI can be confusing specifically in regards to the dashboard.
thrives off simplicity, but only offers 2GB free space. Also, you can upload and save files. There are some collaboration features as well, but you can not create content.
strengths and weakness are how compatible it is with Microsoft office 365. This can be seen as a weakness as non-Microsoft Office 365 users may not want to use OneDrive. It does not have the universal appeal as other cloud storage services have.
Google Drive
Dropbox
Onedrive
Thoughts After Conducting Analysis
All 3 competitors are known for having specific or set of features. After taking into account the survey results and the strengths of the competitors. I've decided that Stash should be known for organizing, creating, collaboration.
Information Architecture
User Personas
I created user personas from interviews I conducted to represent the goals and behaviors of potential users and to help guide decisions in regards to the product. The results helped me further validate that collaboration tools and an easy learning curve are essential to this project.
User Stories
The data from the survey, user personas, and competitive analysis provided great insight on what the main features of the product should be:
  1. Onboarding Process
  2. Saving/Uploading
  3. Creating Content
  4. Sharing
  5. Comment
  6. Being able to cha
  7. 2F-A
User Flows
Next we have the user flows to show how the user would interact with the product. The user flows visualizes the process (step by step) from onboarding to navigating the dashboard. Check them out below!
Wireframes
The information provided from the user stories and flows allowed me to move onto the next step of creating the Homepage (top 3) and Dashboard (bottom 2) wireframes (sketches and lo-fidelity) that represents the MVP framework of the site.
Usability Test
The lo-fidelity wireframes were then turned into a clickable prototype. The clickable prototype was used to conduct usability tests: 2 in-person, and 1 remote. This helped me see how users interact with the sketches without visual clues.
Users were asked to perform the following tasks:
  1. Sign up
  2. Upload
  3. Delete file
  4. Access doc
  5. Comment and share
I found that:
  1. Finding more options by clicking the checkbox is confusing
  2. Too many sign-in options (i.e. Yahoo and Outlook) that are not popular like Google and/or Facebook
  3. A user thought the Download button on the dashboard was to upload
Final thoughts
Based on the feedback of the navigation pane, I need to get rid of the checkbox and change the layout of the homepage/onboarding experience.
Visual Design and Branding
Branding
In order to develop the concept, I did a mind map on "organize" and "cloud". This helped me come up with a name for the site "Stash" and generate various logo ideas.
Logo Iterations
When I think of the word stash I automatically picture hiding something. Most of my rough first concepts revolved around an squirrel and acorn. I couldn't resist myself by giving the mustache a shot. I definitely feel that the squirrel with the acorn is visually appealing and 100% conveys the idea of what cloud storage is.
Style Guide
Including color palette and type choices for both logo and website. Hammersmith One seemed like a perfect fit for non-body text as it is bold. There is no need to make changes to it even a small size stands out with it boldness and unique hand brush feel. Since Hammersmith is in your face, I wanted to counter that with something more elegant and non-intrusive such as Quattrocento Sans.
Hi-Fidelity Mockups and User Testing
I went through various testing including usability and preference testing. The strongest feedback I received was that the spacing on the dashboard was too much, the homepage/sign up section was confusing, and that the black background at the bottom of the homepage felt out of place.
Onboarding Iterations
Based off the feedback from participants, changes had to be made. The biggest change was making the sign up/sign in section more integrated and changing the top nav bar. Oldest to newest (left to right).

1. This when the old logo was used. I wanted the user to be able to create an account on the homepage, one less click.

2. The feedback I got from number indicated that there was too much of a disconnect in the hero section where it shares almost half the screen with the onboarding section. It's difficult to know where the focus should be. Therefore, I made it so the onboarding section blends it with more with the hero image and text. I also made the top nav bar a different color to help distinguish it more.

3. The new logo is now the centerpiece as it visually tells users what Stash is all about.
Results from Onboarding preference testing
I conducted a preference test on the two different versions of the onboarding experience.

85% picked option 2, there were 25 participants. They enjoyed that you could only sign up via email or Facebook as opposed to having more than two options. The top nav bar was also favorable as it distinguishes itself from the rest of the page and the logo sticks out more.
Dashboard Iterations
1. Using Figma, I applied my chosen typeface and color palette to my wireframes.

2. The biggest change I made with the second version was removing the unnecessary space. There is more color variation here which makes it stand out from the first version. Also, the white background along with the gray nav left bar made the first version still feel more like a wireframe. Finally, I removed the buttons on the right as they could cause distraction and made combined into a new button "Add". Ultimately, the focus should be where the content is and the left nav bar. That is what I was hoping to accomplish with this version

3. The second version was definitely an improvement, but more still had to be done. The top buttons are too distracting and the sign out button looked out of place. I was also starting to feel like the gray background still gave off a lo-fi wireframe feeling. In the third and final version I made the following edits:
  • Changed the buttons into icons
  • Made the dashboard background white
  • Removed the sign out button
  • Changed the left nav bar color to a brighter blue
This version looks more clean and although simple, it still is nice to look at.
Final Versions
Older Versions
Made on
Tilda