Back

MYBOX

MYBOX is a cloud storage service that offers users the ability to pay for only the storage space they’re using and nothing more.

mybox

Roles

UX Design UI Design

Specifications

Duration: 6 Weeks

Tools: Sketch, InVision, Usability Hub and Typeform

Deliverables

User Surveys User Personas User Stories

Competitive Analysis Brand & Identity

User Flows Wireframes Low-Fi Prototype

User Testing UI Design Final Mockups

Final Prototype

Summary

There are so many competitors in the cloud storage industry and with big names like Google, Box, Amazon, and Dropbox, just to name a few, offering their own cloud storage solution you’d think there wouldn’t be room for another competitor to squeeze in. The goal with MYBOX is to disrupt this industry by offering a new pricing model.

Problem

My client wants to enter the cloud storage industry and has tasked me to be the UX/UI designer to help bring this service to market. I was given a list of features the client would like in the app, as well as some features that are not mandatory. Besides the features the client has given me, I am responsible for discovering who the target audience is, completing branding and identity, and determining if the service should be for mobile devices as well as a web app for desktop browsers.

Requested Features:

  • - Saving content you find on the web (links, images, videos, etc.)
  • - Organizing that content using things like categories, tags, groups, and/or folders
  • - Creating content (notes, documents, maybe spreadsheets?)
  • - Uploading files (videos, images, PDFs, etc.) from a computer or mobile device

Optional Features:

  • - Sharing a single item with someone else (and vice-versa)
  • - Sharing a folder or group of items with someone else (and vice-versa)
  • - Connecting with other users for real-time collaboration in notes or documents

Solution

To show users that MYBOX is different from competing services, highlight the pricing model of MYBOX first. Let users know clearly that they will pay only for the storage space they use. Also show users how simple MYBOX is by offering fast ways to complete basic tasks such as uploading and organizing content.

The Design Process Begins

Competitive Analysis

The very first thing I did was a competitive analysis because I wanted to understand what it will take for our new service to compete on par with other cloud storage services and also find weaknesses in our competitors that we can exploit.

The chosen companies for the competitive analyses were Dropbox, Box and Google Drive. Overall, the competition had all the same basic features. But something I started to notice was the pricing for each of the competitors. They all were subscription based and this is where I started to realize there’s a better way to charge for storage space. Instead of charging a set amount per month for a finite amount of storage that you’re probably not going to max out on, why not charge for the storage space you’re using? That is the weakness that our service will exploit.

Strengths Weaknesses
  • - Able to drag and files & folders into other folders
  • - Offers a little more storage than some competitors
  • - Easy to upgrade
  • - Paper feature
  • - Collaboration features
  • - Large file upload limit
  • - Able to star folders for easy access
  • - Free storage is less compared to a lot of the other competitors
  • - Can’t upload folders
  • - Paper is very opinionated. Does not have the flexibility of a regular document.
  • - Showcase is for paid subscribers only
Opportunities Threats
  • - Better way to organize content. You can create folders but you can’t add details about what the folder is about.
  • - Offer an unlimited storage plan
  • - Offer to pay for only what you use
  • - Other companies lowering their pricing
  • - Other companies offering more features at a better price point
  • - Other companies offering unlimited storage
  • - A more innovative products hits the market and disrupts it

Dropbox

Strengths Weaknesses
  • - Able to drag and files & folders into other folders
  • - Offers a little more storage than some competitors
  • - Easy to upgrade
  • - Offers unlimited storage
  • - Able to comment on files
  • - Message center
  • - Able to create a folder and set permissions
  • - Free storage is less compared to a lot of the other competitors
  • - Focused on businesses
  • - Name confusion between its competitor Dropbox since
  • - File upload limit is smaller compared to competitors
Opportunities Threats
  • - Offer better pricing
  • - Increase file upload limit
  • - Offer ways to get additional free storage
  • - Offer more free storage
  • - Offer to pay for only what you use
  • - Other companies lowering their pricing
  • - Other companies offering more features at a better price point
  • - Other companies offering unlimited storage
  • - Other companies lowering their pricing

Box

Strengths Weaknesses
  • - Able to drag and files & folders into other folders
  • - Offers a lot more storage than some competitors
  • - Easy to upgrade
  • - Paper feature
  • - Able to create documents
  • - Large file upload limits
  • - Access files on any device
  • - API is used by a lot of other services
  • - You need a Google account in order to use Google drive or a Google Suite subscription
  • - Not everyone likes material design
Opportunities Threats
  • - Offer ways to get additional free storage
  • - Offer an unlimited storage plan
  • - Change the view of the dashboard. Not everyone wants a card type layout. Being able to view it in lists is great also.
  • - Other companies lowering their pricing
  • - Other companies offering more features at a better price point
  • - Other companies offering unlimited storage

Google Drive

User Research

Right after I conducted my competitive analysis I moved on to conducting a user survey on cloud storage. The reason I chose to conduct my user research after my competitive analysis was to learn more about cloud storage and to help me determine what questions I should be asking my survey respondents. Being able to ask the right questions will help me learn more about my end users and ultimately help me figure out target audience.

Key Survey Takeaways:

  • - 65% of those surveyed wanted the ability to share files
  • - 70% of those surveyed wanted to create backups of their files
  • - 90% of those surveyed use cloud storage on their desktop

User Personas

To gain more insight into my users, I contacted my survey participants to see if anyone would be willing to sit down for an interview with me. I succeeded in getting a user to sit down with me and talk about their motivations and frustrations with cloud storage.

Kate Persona

Kate Nguyen

20 | Female | Accountant | Seattle, WA

Motivations

Kate hates accidentally deleting one of her personal files on her desktop or smartphone. She’s turned to cloud storage to help secure her files to help prevent anymore accidental deletions. Recently, she had her whole laptop crashed and was glad to have been able to backup her files beforehand.

Goals

  • Able to upload files and folders to the cloud
  • Able to share uploaded files and folders
  • Able to backup desktop or smartphone
  • Organizing uploaded files andfolders
  • Organizing uploaded files and folders

Frustrations

  • Able to upload files and folders to the cloud
  • Able to share uploaded files and folders
  • Able to backup desktop or smartphone
  • Organizing uploaded files andfolders
  • Organizing uploaded files and folders

Biography

Kate is currently attending the University of Washington while also working part-time at a healthcare company doing accounting work. While she’s not working she enjoys shopping.

Kate Nguyen

Kate Nguyen

20 - Female - Accountant - Seattle, WA

Motivations
    Kate hates accidentally deleting one of her personal files on her desktop or smartphone. She’s turned to cloud storage to help secure her files to help prevent anymore accidental deletions. Recently, she had her whole laptop crashed and was glad to have been able to backup her files beforehand.
Goals
  • - Able to upload files and folders to the cloud
  • - Able to share uploaded files and folders with others
  • - Able to backup a whole desktop or smartphone
  • - Organizing uploaded files and folders
  • - Saving content found on the web
Frustrations
  • - Pricing is high when you only need to store a few files
  • - Sometimes files and folders don’t sync properly
  • - Too many services to choose from
Biography

Kate is currently attending the University of Washington while also working part-time at a healthcare company doing accounting work. While she’s not working she enjoys shopping.

User Stories

It’s very important to determine what features you should include for the initial launch of your app and user stories help you with that. By prioritizing what features are most important you can narrow down what the minimum viable product will be like. By using the results of the survey I conducted as well as the user persona I created I was able to narrow down what features were important (on a scale from low, medium and high). I then used these results to help create my user flows in the next step.

User Flows

You want to be able to design an app that is almost frictionless to the user. As in the user should be able to flow through your site without having to think too much on how to complete a task. This is why I created user flows for the most important features such as the onboarding process, how to organize files and how to upload content. Without this it would’ve been hard to design my wireframes as I’d be guessing at what should come next.

User Flows Onboarding
Onboarding Process
User Flows Uploading
Uploading Files
User Flows Organizing
Organizing Files

Low Fidelity Wireframes

After completing the previous steps, I now have a general idea of how my web app should look. I now know who my target audience is, what my initial feature set should be and users should interact with my web app. So I built some low fidelity wireframes to get an idea of what the web app should look like.

Low Fidelity Mockup Landing Page Low Fidelity Mockup Dashboard Low Fidelity Mockup Preview Image Low Fidelity Mockup Select Folder Modal Low Fidelity Add New Folder Low Fidelity Mockup Signup

Low Fidelity Prototype

I now have my low fidelity wireframes but it would be nice to be able to interact with it somehow without having to develop it. So I used Invision to create a clickable prototype to show how all the most important features should work. You’re able to sign up, log in, add content and create folders.

I also conducted a usability test and received some good feedback. My test users really liked how easy it was to navigate around the site.

Branding and Identity

Up until now I haven’t had a solid idea of how the web app should be branded. The only thing I chose and stuck with name wise is MYBOX. I chose MYBOX because I wanted users to automatically know that this your box, you’re in control of how much you want to store in it and what you store in it.

I began to brainstorm logo ideas for MYBOX, a lot of the biggest brands in the world keep their logos simple and I wanted to do the same which is why I decided to use the text MYBOX inside of a rectangle. The rectangle representing a box and the words MYBOX inside it showing that something is being stored in it. I kept the text minimal, using a thin weight for MY and a heavier weight for BOX to emphasize it.

Branding and Identity Image Branding and Identity Image

For typography, I chose Raleway for everything because of its minimalist and easy to read style, I wanted to also match my logo’s typeface. As for colors, I chose vibrant colors that help draw the users attention to certain parts of the webpage, for example later on in the homepage I used the light purple to draw the user’s attention to the sign up call-to-actions.

Style guide image one Style guide image two

High Fidelity Mockups

Now that I have my branding and identity figured out for MYBOX, my next move was to create some high fidelity mockups! Using my initial low fidelity wireframes as my starting point, I began to design what the web app would look like. I tried my best to stick to my style guide and not use any additional colors or typefaces.

High Fidelity Mockup Landing Page High Fidelity Mockup Dashboard High Fidelity Mockup Preview Image High Fidelity Mockup Select Folder Modal High Fidelity Add New Folder High Fidelity Mockup Signup

High Fidelity Prototype

After finishing my high fidelity mockups I created a clickable prototype for it with Invision. I then did a bunch of usability tests with it and found a few flaws that I corrected. The main thing users didn’t like was the hierarchy of the dashboard, initially I bolded a lot of text and it threw some people off. But in the end I was able to take all the feedback I’ve gathered to create a better design.

User Testing

I completed user testing on both my low fidelity prototype and high fidelity prototype. For each one I conducted at least 3 usablity tests with close friends and family. During my usability test for my low fidelity prototype I received pretty good feedback, users liked how simple it was to get started using the service and they loved the minimal layout. But during my usability test for my high fidelity prototype I received a lot of the same feedback and I thought this was great but then I presented my high fidelity prototype to an assessor.

I aimed to go for a minimal feel for my design and I failed on that. I learned that I wasn’t getting quality feedback because the people I was conducting the usablity tests with most likely did not want to hurt my feelings even though I told them it would be okay. I took the feedback I received from my assessor and created a entirely brand new design but kept the same components. The redesign paid off and I conducted another usablity test and ultimately I started receiving better feedback as I was able to convince my participants to be straightforward with me about anything.

User Testing Image
Remote User Testing with Hi-Fi Prototype
User Testing Image
Onsite User Testing with Low-Fi Prototype

Conclusion

Overall, working on this project has proven a difficult task. At first I couldn’t believe that I had to create a cloud storage service because in my head I was thinking there’s already so many big players in the industry, how can I hope to design a service that can compete with them? But as I continued to work through the project and follow my design process, I found that it’s possible. Every market has room for disruption, you just need to find your competitors weaknesses and exploit them and most importantly you need to always be thinking about your end users.

What I Learned

MYBOX is my first attempt at designing a web app from scratch. The most important thing I’ve learned while creating MYBOX is having a design process is very important. If you try to design a product or service from scratch without doing any sort of user research then you’re relying on luck and your own opinions. Essentially you’d be designing a product or service for yourself and not your end users. So it’s very important to collect as much actionable data as possible about your users and to use that data to help you build an awesome user experience.