CloudMind

“Your world, anywhere in the world.”

CloudMind is a cloud-based storage service that empowers users to take their world on the go with peace of mind. Includes more available storage space, a catch-all file organization system, and more robust content creation and manipulation controls on an easygoing and intuitive design.

CloudMind on devices
duration

Oct 2019 - Jan 2020


roles

Research & Discovery,
Info Architecture & Ideation,
Interactive Design & Testing,
Visual Design


tools

Google Forms, Figma, inVision, UsabilityHub

problem

A client of mine was excited about potential in the cloud storage market and had a list of features they would like to include in the end product. It was up to me to cement a foundation for this project through user research and discovery, followed by ideation and testing, then applying visual design principles and retesting to develop a fresh competing product.


solution

CloudMind was developed on large and small screens to compete in the market while also maintaining its individuality. CloudMind’s branding plays into that idea. Blue is often used to represent calmness, trust and security. Orange inspires energy and creativity. This solution bridges the gap between idea and end product and in the process provide a viable user-focused alternative.

User Insights

Into the Cloud

All cloud storage (CS) users access these services on their phones and 75% of them also use the services on their PCs. Users highlighted the following features as important to have:

  • Uploading from device(s) (93.8%)

  • Saving content found on the web (68.8%)

  • Sharing content (62.5%)

  • Organizing content (50%)

  • Real-time collaboration (43.8%)

On the flipside, folks have experienced the most frustration in terms of lack of storage space, expensive subscriptions, and difficulty organizing content, among others.

paint points graph

To attract new customers, this new CS service would need a good amount of free storage space, built-in security features (encryption, passwords and expiring links), cross-platform accessibility, and more intuitive file creation and synchronization processes. Greater emphasis would be placed on a CS design for personal and work use based on users’ preferences.

Competitive Analysis

Same Sky, Different Clouds

Google Drive
Google Drive

Google Drive is the most well-known cloud storage brand given its affiliation with Google. It offers 15GB of storage to start, a full content creation suite, third-party app integration, and a great variety of plans with benefits. However, the higher-end storage plans are too expensive.

Dropbox
Dropbox

Dropbox offers file-sharing with expiring links and/or password protection, general file encryption, Microsoft Office access, and paid plans automatically generate offline versions of your uploaded files for convenience. However, there are limited plan options, clunky sharing and organization mechanics, poor app integration, and only 2GB of free starting storage.

OneDrive
OneDrive

OneDrive integrates seamlessly with the Windows OS and offers students modest discounts on their plans. However, it does not integrate well with non-Microsoft apps, only gives 5GB of free storage, and doesn’t guarantee security and encryption unless under a business plan. Lower-end plans only offer storage space, meaning you would have to buy Microsoft Office separately.

Personas

Meet the Cloudwatchers

All of the research data gathered up to this point is just that: data. It’s important to remember that this service is being developed for people to use, and thus I created two distinct user personas in order to humanize that data as a reminder to approach the rest of the design process with empathy.

Naomi Chan

Naomi Chan

Social Media Manager
Age 25 | Phoenix, AZ

motivations

Naomi hopes to become a full-time travel blogger and influencer, and is already on track with her own website featuring stories and photos of her many adventures. She wants to be able to store all of these files in the cloud to access them from her phone or laptop. She also hopes to use a service that has a detailed categorization system since her current service isn’t so efficient.

frustrations
  • Not enough storage space
  • Limited organization options
  • Poor upload and sync processes

I love sharing my experiences around the world with my audience.

  • #traveler
  • #travelblogger
  • #outgoing
  • #extroverted
  • #friendly
  • #adventurer
Tamara Bell

Tamara Bell

Teacher
Age 29 | New York, NY

motivations

Tamara is passionate about educating young minds and preparing them for the future. She works closely with other teachers to craft quality lesson plans and (when appropriate) supplementary material. She uses Google Drive as it gives the most free storage space, but is looking for something that offers a larger storage space at a more modest price than the current competition.

frustrations
  • Concern for lack of security
  • Not enough categorization options
  • Clunky sharing mechanics

As I like to tell my students: collaboration is the key to success!

  • #teacher
  • #educator
  • #organized
  • #teamplayer
  • #friendly
  • #collaborative
User Stories and Flows

Navigating Through the Cloud

Before drafting designs, it’s important to know what functionalities to design for. User stories tell us what needs to be done. Keeping my users' main frustrations in mind, I compiled a list of twenty user stories that were important in developing a minimum viable product. We now know what to do, but how should those tasks be done? To address this, I designed user flows that demonstrate the steps needed to upload a file to the cloud, create a new file, organize files, and link to other social accounts. These tasks both establish MVP, and also address CS users' pain points.


user flow sketches
Wireframes and Testing

Observing the Changes

Now the big picture starts coming together. Knowing what I want this app to do, how to do it, and for whom, I sketched out ideas for what the final product could look like. Starting with pen and paper is essential to a smoother design process; it’s better to make mistakes now to save time and money later.

What looks good and practical may not always be so. To gain an understanding of what worked well, what didn’t, and what changes can be made, I conducted two tests with users in the same age range as my user personas to maintain consistency. They felt comfortable with navigating the prototype. However, the following points were noted from these tests and feedback from the lead designer:



Branding

A special Shape

I created a wordmap and from that began developing potential logo ideas. Other competitors’ logos incorporate a cloud, which inspired some of my ideas. I also wanted to include a visual that conveys collaboration, hence some of my ideas showing open dots being connected. These sketches then informed the brand name. Blue was a recurring color among other competitors’ brands, symbolizing trust, calmness, and security, and so I experimented with shades of blue. To represent creativity and collaboration, both high-energy activities, I used orange.

I settled on CloudMind as the brand name. I chose Josefin Sans for the brand as it looks bold and modern. Alegreya Sans functions as the complement due to its great versatility. During this phase of the branding process, I also designed a new logo that I eventually decided on. I then updated it to be simpler and easier to scale down to smaller resolutions.

colors

B3E8F8

094AB2

01397A

E67600

F8D9B8

FBEAD9

FFF1D0

FEFBF3

Blues are used for most buttons and suggestive/hyperlinked text. Oranges are applied to some buttons or stand-out items.

typography
Branding -
Josefin Sans
Complement -
Alegreya Sans
logo iterations

Just before starting mockups, I played around with the ‘mind’ in CloudMind while wanting to include connected dots to signify sharing.

Visual Design and Testing

Standing Out in a Sea of Clouds

The high fidelity mockups underwent the greatest number of iterations as I sought feedback from lead designers. I iteratively tested the desktop prototype as I felt that the feedback would also inform any tweaks that could be made to the mobile version. They can be viewed here on separate pages.

I tested three participants via Figma and inVision and asked them to describe what they liked and what they found confusing or frustrating as they completed three tasks: sign up for an account, create a new document, and recovering an account password. The users liked the homepage layout, and their feedback pointed to two minor discrepancies: make the “Forgot Password” link stand out more (like a button), and give the user control over the confirmation window that shows after requesting a password reset link (different users read at different paces).

I also conducted preference tests on three specific elements in my design: the layout of CloudMind’s features on the desktop homepage, the background of the login and signup overlays on mobile, and the placement of the upload button on the mobile dashboard. All results were split even, and all came down to personal preferences as opposed to any easily identifiable trends. I kept everything as is.

desktop mockups
mobile mockups

Desktop Prototype

Mobile Prototype

Conclusion

Silver Linings

Through this project I found that I struggled with sizing, specifically of fonts and buttons. While working on a frame, one spends so much time zooming in and out that it can distort their sense of sizing. My experience with developing the high fidelity mockup cemented how vital the iterative design and feedback process is. My biggest challenge came during the branding phase; we tend to take the brands we see for granted without knowing what goes on behind the scenes. From this I learned that sometimes good ideas may not come when you need them, but while you apply a metacognitive approach to design, you may begin to uncover new and innovative concepts. It's also important to keep the logo simple for easier scaling and recognition.

The design choices throughout CloudMind’s development felt validated in participants’ feelings during the user tests. It was reflected in their overall positive response to the appearance. The most valuable takeaway was that it takes a village (or at least another set of eyes) to iterate and arrive at a cleaner and well thought-out design; without constant guidance and feedback CloudMind would not look or feel as clean as it does.