Cobalt is a SaaS product that provides a practical solution for design teams to store and retrieve content.

Cobalt

View Prototype

Problem

Duration

Creating, sharing and collaborating on design concepts can be frustrating. Design teams need practical solutions to create, share and save content online. Cobalt is part cloud-storage, part collaboration tool and entirely secure. It enables design teams to create and share work their way.

UX/UI Design | UX Research | Branding

8 weeks

Role

To understand what features users might want, and how they would use the application, I conducted a survey to gain insight into cloud storage usage. Initially my goal was to understand the behaviors and motivations of cloud storage users but in the process of surveying a wide target audience I accidentally found a niche.

Design process

User Research

in the process of surveying a target audience I accidentally found a niche

Coincidentally, a large number of survey participants were in the creative field from freelancers to UX/UI design students, and even a few photographers, etc. They all shared the same frustration with saving, sharing and collaborating on design concepts.

of users want better collaboration features

of users share content with colleagues

37%

94%

of users have used a cloud storage app

40%

Key Findings

Competitive Analysis

View Results

What did surprise me were the lack of cloud storage applications targeting creative teams and their specific requirements. I quickly determined that creative teams would be a good type of consumer for this product. Also, targeting a niche consumer could help us stand out among the competition.

Carrying out a thorough analysis of the competition was necessary in determining if the niche would be successful. There are a number big-name competitors in this space – Dropbox, Google Drive and OneDrive. Each of these offer essentially the same types of services: fast-sync, file, folder and link sharing, and the ability to invite collaborators. There’s really no surprise here – these features are typical of most cloud storage providers.

"Don't reinvent the wheel!"

The participants of my user survey provided the foundation for my personas. I took into consideration their behaviors and motivations for using a cloud storage application.

User Persona

I created user stories to help determine and prioritize the important features for users. These were created based only on the minimum viable product.

User Stories

view results

I converted the users’ stories into user flows to visualize how users would accomplish specific tasks. I created separate flows to demonstrate how new and returning users would be welcomed into the platform. I also created combined flows for dashboard tasks. These took several iterations as I wanted to map out  the smoothest path for adding content and sharing files.

User Flows

View userflows

I created wireframes for the landing page first, as this would be where potential users would learn about Cobalt. I wanted a layout that was clean and easily conveyed information to new users. I created a few versions that started with a large hero image to capture attention, a section for features, dashboard demo and testimonials.

Lo-Fi
Wireframes

View wireframes

Once I settled on a landing page layout, I fleshed out my designs in Sketch adding some of the written content so I could begin user testing. I wanted to make sure there was enough information on the landing page and in the dashboard empty states that new users could figure out what Cobalt was for and how to use it.

Hi-Fi
Wireframes

View wireframes

Naming

With the wireframes in place I began work on the branding . My first step was to come up with a name for the product.  I created a mind map with a simple goal of something that was easy to read and write. I settled on “Cobalt” which I thought was a unique name for a cloud-storage application.

Logo Concept

I sketched with pen & paper to explore different logo solutions. I wanted both a logo and wordmark which could be used interchangeably.

The final Cobalt logo is bold, clear and impactful and symbolizes what the brand stands for which is to bring focus and clarity to design teams.

Master Logo

branding

Color Palette

The color palette consists of a cool ice blue, warm tangerine red and a cobalt color which is the cornerstone of the Cobalt brand helping to distinguish it from other cloud services.

Fonts

I used a combination of the Ultra font for headers and the Open Sans for body copy- these work together for a bold yet simple design. I kept the font choices very limited and used familiar typefaces so as not to stray too far from what customers were accustomed to.

Headings

Ultra

Body and Inline Text

Open Sans

Images/
Icons

Most cloud services come across as serious and stuffy; I wanted Cobalt to stand out as an upbeat, trustworthy and friendly product. I decided to use digital illustrations as a way to show off our creative side.

With the branding work, I created high fidelity mockups and conducted both in-person and remote preference testing  on button designs, icon styling and color choices.

Preference Testing

View results

I exported my work to Invision, where I created a clickable prototype, for user testing. Based on user feedback I was able to make the final tweaks and adjustments to deliver a final product

Final Mockups

View prototype

what i learned

Accepting that “I am not my user” allowed me to focus on creating a product that addressed users’ primary goals.

1

2

User research & constant reiterations are important and necessary steps.

3

If I had to do anything different, I would spend more time on microcopy. I used illustrations to communicate emotions and moods.

4

The most valuable lesson learned is that UX/UI is not about reinventing the wheel, but about considering intuitive solutions that work best for the situation.