chroma cloud storage logo

Cloud Storage for Digital Creatives

Cloud Storage
for Digital Creatives

A responsive design for web and mobile.
Cloud storage designed for digital creatives and teams.

A responsive design for web and mobile. Cloud storage designed for digital creatives and teams.

view of chroma cloud storage app screens view of colorful app screens

The Problem

Unconventional creatives are stuck with conventional tools.

The cloud storage marketplace is dominated by one-size-fits-all solutions that lack features which are critical to digital creatives.

annoyed lightbulb icon over splash of orange paint
chroma app displayed on mobile and desktop screens

The Solution

Give the user more control.

Chroma was developed to give designers, marketers, and social media managers a better way to organize their files: a customizable tagging system. With user-generated tags, files can be discovered more easily through search, and organization is no longer limited to the traditional file folder system.

The Solution

Give the user more control.

Chroma was developed to give designers, marketers, and social media managers a better way to organize their files: a customizable tagging system. With user-generated tags, files can be discovered more easily through search, and organization is no longer limited to the traditional file folder system.

Deliverables:

User Surveys, Competitive Analysis, User Personas, User Stories & Flows, Wireframes, Usability Testing, High Fidelity Mockups, Clickable Prototype, Style Guide

Tools:

Figma, Adobe Illustrator, InVision, Adobe Photoshop

Meta-Challenge:

Invent, design, and brand a novel cloud storage application.

Duration:

5 weeks

The Design Process

The challenge with this project was to imagine how cloud storage could better serve groups with specific needs.

Rather than create a solution that worked well enough for everybody, I set out to build a product that worked amazingly for digital creatives.

Part One

Research & Discovery

I kicked off this project with a user survey, to get a sense of how digital creatives were using cloud storage now, as well as what they did and didn’t like about these services. 20 product designers, marketers, social media managers, and graphic artists participated.

User Survey Results

bar graph with 3 and 4 as highest values

Most respondants used 3 to 4 different cloud storage services.

bar graph showing results

All respondants used Google Drive, and most used Dropbox. A variety of other services were used less frequently.

pie chart with two thirds darkened

67% accessed their cloud storage using a mobile app, while 100% used desktop

Biggest pain points

Confusing organization, lack of custom organization options, syncing doesn't work as expected

Most frequently used features:

Storing content, creating content (documents, notes, etc), organizing files, collaboration

Rarely used features:

Backing up devices

Competitive Analysis

With nearly everyone in the survey group using Google Drive and Dropbox, I decided to investigate how these major players were succeeding – and where they fell short. I also took a close look at Notion, a new player on the cloud storage market that combines elements of storage apps like Google Drive and note-taking apps like Evernote.

google drive logo
Google Drive

+

Creation of many doc types

-

Limited search/organization features

dropbox logo
Dropbox

-

Clunky desktop UI

-

Limited search/organization features

notion logo
Notion

+

File tagging capabilities

-

Doesn't work for most file types

Because a lack of customized organization options was a common weakness shared by all three competitors, I sought to make a tagging system that worked for all file types a key priority for Chroma to better streamline the users’ experience.

User Personas

With all this survey data, it was time to bring the future users to life. Three user personas were crafted to embody the needs of the app’s target audience: a graphic artist, a social media marketer, and a college student studying visual design who’s a little less tech savvy than his peers.

Part Two

Information Architecture

Keeping the target audience in mind, I knew that including an alternative method of organizing files – something that exists outside of the traditional folder-subfolder hierarchy – would be critical for differentiating our product.

To address this need, I created user stories that allowed users to add and remove tags from individual files, which could be later be discovered through search.

Stories for tag creation, the onboarding process, document and folder creation, search functions, file uploading, and account admin tasks were generated. The highest and medium priority tasks were then converted into user flows to show how the user can accomplish the primary tasks.

  • As a returning user, I want to...
  • As a returning user, I want to...
  • As a returning user, I want to...
  • As a returning user, I want to...
  • As a returning user, I want to...
  • As a returning user, I want to...
  • Give my document a tag or category
  • Change my document's tag or category
  • Remove my document's tag or category
  • Give my folder a tag or category
  • Change my folder's tag or category
  • Remove my folder's tag or category
  • High
  • High
  • High
  • High
  • High
  • High
flow chart of tagging process

Tagging Items User Flow

  • As a returning user, I want to...
  • As a returning user, I want to...
  • Search my library by file or folder name
  • Search my storage library by tag or category
  • High
  • High
flow chart of search process
flow chart of search process

Searching for Tagged Items User Flow

Part Three

Wireframing

Armed with my user flows, I began building out the scaffolding of the app with pen and paper wireframes, and later with Figma. As the app started to take shape, some of the elements described in the user flows were dropped or changed to improve the user experience.

Originally I had envisioned a combination dashboard, where frequently accessed files and a full view of the file navigation hierarchy would be visible. But I quickly realized that this would be too cluttered, making it difficult to do either task well. I decided to break these out into two separate screens in the digital wireframes, allowing users to toggle back and forth between these views in the left navigation panel.

pen sketches of app screens

Sketches of combination dashboard

greyscale wireframe of file navigation view

Lo-fi wireframe of file list view

greyscale wireframe of dashboard view

Lo-fi wireframe of dashboard

Part Four

Branding & Style

Before I could embark on prototyping, I needed to establish a brand identity.

Since our target audience would be primarily creatives working with tech, and since our value proposition for this product is expanded organizational features using tags, I wanted to emphasize uniqueness and color.

collage of brightly colored photos and patterns collage of brightly colored photos and patterns

Exploring colors and patterns with a moodboard

eight color swatches with their hex codes eight color swatches with their hex codes

This led to a bright, saturated color palette

Karla and Palanquin were selected as title and body typefaces.

Karla Regular

Karla Bold

Palanquin Regular

Why Chroma?

Chroma was chosen as the brand name, as it brings to mind pure, bright pigments — the stuff of artists and creatives everywhere.

The logo was developed to be reminiscent of a compact disc reflecting a prism in the sunlight. While the CD is a largely obsolete memory storage device, it’s still recent enough to be familiar to our target audience of millenials and gen-X’ers.

preliminary pen sketches of the chroma logo

Early Sketches

the chroma logo shown over light and dark backgrounds

The finished logo mark

Part Five

Visual Design & Testing

My low fidelity prototypes were linked together into a clickable prototype that illustrated the pathways for 4 user stories:

  1. Creating an account
  2. Creating a new document
  3. Uploading a file
  4. Assigning a tag to a file

Three users were tested in person using the desktop version of the app.

Insights from User Testing

In general, the participants found the Chroma app to be clear and intuitive to use, but the test also identified some elements which were confusing to users. Based on this feedback, I had the knowledge to inform some major revisions as I created my first high fidelity prototypes.

In my low fidelity wireframes, the file upload button was nested inside the “+” menu. But two users had difficulty finding this initially. It was moved to the left navigation bar. I also opted to include “drag to center” functionality in the dashboard “empty set” page, to give users another way to upload files quickly.

wireframe showing the upload button nested inside a menu

Users had difficulty finding the upload button in the first lo-fi prototype

wireframe showing the upload button clearly marked on the left side

How the upload functionality evolved in the next version

wireframe showing the upload button nested inside a menu

Users had difficulty finding the upload button in the first lo-fi prototype

wireframe showing the upload button clearly marked on the left side

How the upload functionality evolved in version 2

Changes for the Next Version

Two users also had trouble finding the “add a tag” button here in the left sidebar navigation of my wireframe, but all users intuitively moved to select or hover over the file name when first looking for it. Clearly this was a pattern I needed to include.

In my first high fidelity prototype, I modified the file list view to show the “add a tag” and share button on hover, or when the file is selected in the mobile app.

wireframe showing the tag button clearly marked on the left side

“Add a tag” button hidden on the left. Just because a button exists doesn’t mean users will actually see it.

screen showing the tag button appearing when hovering on a file

In version 2, the “add a tag” button appears when hovering over a file in the navigation panel.

wireframe showing the tag button clearly marked on the left side

“Add a tag” button hidden on the left. Important lesson: Just because a button exists doesn’t mean users will actually see it.

screen showing the tag button appearing when hovering on a file

In version 2, the “add a tag” button appears when hovering over a file in the navigation panel.

Preference Testing

From here, I tested iterations of several site elements using A/B testing with Usability Hub. The design of the tag element, an upload button, and some tiny tweaks to the typeface in the Chroma logo were all tested with users to identify which version was favored.

pink pill button with no x icon

In preference testing, users were evenly split between these two tag styles.

However, I realized both of these tag input options still had some problems. The tag was first designed for easy dismissal within the document detail view, with a handy “x” allowing you to remove an unwanted tag. But this design bled over into all other screens of the app, showing a tag dismissal option even in places where it didn’t make sense, such as the search screen.

While the pink version on the left could have provided an alternative for situations when the dismissal “x” wasn’t needed, it lacked visual continuity with the version on the right, which was still needed in some circumstances.

What became clear is that I needed two layouts of this tag for different situations: one with the “x” and one without.

yellow pill button with x icon

The two tag styles used in the final design: one with a dismissal option, one without.

User Testing, Round Two

With this new data, I moved ahead and developed the second iteration of my high fidelity prototype and did another round of user testing. Here you can see my new version of the tag in use, a brighter pill shape with a bit more contrast. The new tag style displays without the dismissal “x” when it isn’t needed — for example, within the “add new tag” menu.

During this round of user testing, I discovered that some menu buttons did not have enough visual contrast for maximum accessibility. To fix this, I brought in my primary blue color to denote active menu items in the final version.

chroma file list view with final tag style

Version two of the file list view, with light grey inactive items

chroma file navigation tag drawer open

Version three, with black inactive items and blue for active.

part six

The Final Prototype

For my third and final high fidelity prototype, I spent some time researching common UI patterns for tagging, drawer expansion, and accessible text colors. I wound up making some major changes to the design in this round. Here you can see the Reworked dashboard with higher contrast buttons / search bar, more preview tiles, an “explore your tags” section, and new numbered tag design to account for items with more than three tags.

chroma final dashboard view chroma final dashboard view

By version 3, the nagivation bar and tag styling had evolved significantly.

A lot of major changes were made to the mobile app as well. In the final version, adding a tag in mobile is done through a slide-up drawer, as is common in modern mobile UI patterns.

chroma add a tag screen in mobile chroma find a tag screen in mobile
finished screens from the chroma app
Conclusion

Key Learnings

Overall, the development of the Chroma app was a really rewarding challenge. I was lucky enough to get some things working well in the first draft, like the homepage layout and onboarding process. I also found that creating a detailed style guide (and updating it as I went through revisions with my visual design) was an enormous help to me as I created each iteration of my high fidelity prototype.

However, some things that I initially thought would be straightforward – like the tagging concept – required far more planning, testing, and iterating than I had bargained for.

This project has been a great reminder of how important it is to always think about those user profiles during all phases of development, and to continually seek criticism and feedback throughout the design process.

With this final version of Chroma, I’ve created a MVP of a new cloud storage service that solves a major organizational problem faced by creatives.

No longer would designers, marketers, and illustrators be forced to remember that a particular photo was shot and edited on a specific day back in 2017, or recall the particular file name to effectively search for it -- they could just search for any number of tags assigned to the item.