Den Background
View the InVision Prototype

More than just a cloud platform, Den is the easiest way to organize all of your content across your devices.


Den Preview
Role
UX Designer
Visual Designer
Brand & Identity
Deliverables
User Surveys & Personas
SWOT Competitive Analysis
User Stories & Flows
Concept & Brand Story
Sketches & Wireframes
HiFi Prototype
Tools
Sketch
InVision
Balsamiq
Adobe Illustrator
Book Icon

Overview

Den is a SAAS product that is accessible on any device, and is used for uploading documents, images and notes, saving links and sharing content. An organizational tool, Den allows you to have one central location for all of your content.

Problem Icon

The Problem

Staying organized is a challenge when content is stored with different cloud service providers, and in a world where switching devices moment-to-moment is commonplace, it is vital that content is easily accessible on one single platform.

Macbook Login Screen
Solution Icon

The Solution

Introducing Den, a SAAS web application providing effortless content management to solve the problem of content disorganization. Den combines the ease of bookmarking your favorite sites, the flexibility of creating documents or notes, the security of seamless integration across your devices all in one user interface. Organization and seamless syncing, sharing and accessibility is easy with Den.

Den iPhone

Whether it's taking notes in a class or sharing photos of your family vacation, Den makes it easy to upload your content anywhere, keep your content organized, and access content quickly and efficiently whenever you need it.

Research Icon

User Research

I created a user research survey to diagnose the major pain points and understand better how users interacted with the current cloud platforms on the market.
I focused on the following:

How cloud applications are used for collaboration

Most used cloud applications

Least important features of cloud applications

What I Discovered

The data that I gathered gave me incredible insight, namely that there are a few features that users find most important in their cloud storage app and there are gaps in the cloud market for these features. Users wanted the ability to share content and information easily with others, the ability to upload files (Images, pdf, video) from their mobile device, share a single item or a folder with someone else and vice versa and download items for offline usage. From the data that I gathered in my survey I could already see the beginning of a new organization-based cloud storage platform that would meet users’ needs personally and professionally.

View Full Survey Results
User Persona Icon

User Personas

I created three user personas based on my research. These personas included all of the different data that I had gathered regarding who my audience would be, what their frustrations were and what they wanted to accomplish.

Robert

The Family Man

Age: 40 / Location: Chevy Chase, MD / Gender: Male

Motivation

Family comes first for Robert and he always ensures he is there for his family when they need him the most. It is important that Robert can access his work documents whenever he needs them, and can communicate and send documents easil to colleagues on the go, from any device. An avid photographer on the side, he needs a safe place to keep all of his photo memories of his kids and a place where he can share photos with friends and family.


Frustration

Not enough storage for all of his documents and photos

“Being with my family is just as important as climbing the career ladder.”

Melanie

The Law Student

Age: 22 / Location: Boston, MA / Gender: Female

Motivation

Melanie is a hardworking student who is determined to be a great lawyer. She uses her tablet, smartphone and Macbook interchangably to work on all of her projects for both work and school. She has all of her personal information on these devices as well and wants to ensure her privacy and keep her personal content separate from work. She is always striving to be more organized.


Frustration

Have a secure, central location for all of her assignments.

“Staying organized while following your passion isn't easy”

Alison

The Busy Body

Age: 31 / Location: Seattle, WA / Gender: Female

Motivation

Alison is always on the go, traveling from place to place as the head of Human Resources for her company. She doesn't have time to spend hours organizing her files or sharing permissions with her staff, just to change everything again when she goes to a new office location with new employees. She has no interest in mixing work and play.


Frustration

There are too many choices for cloud services, I can't choose one.

“I can't afford to waste time searching for my files or worrying about losing my work.”

Competitive Icon

Competitive Analysis

Given the number of existing products on the market, I developed a SWOT analysis of Google Drive, Dropbox and Pinterest to determine where to focus my efforts.
Google Drive

I knew I definitely wanted to analyze Google Drive since it was very favorably ranked in my user survey, and it was most favored when it came to ease of use. Google Drive is a very intuitive platform but fails in a few areas. It appeals primarily to Google users, as you need to have a Google account in order to use it. It also fails to appeal and integrate with Apple devices and with Apple users, and it doesn’t run on Linux whereas Dropbox does.

Pinterest

Pinterest was an interesting analysis because it doesn’t quite fit the mold of a cloud platform, but it also doesn’t not fit the mold. There are aspects to Pinterest that are very appealing to users, specifically the design and intuitiveness of use. On the other hand there are limitations in capability and they have a limited audience since it appeals mainly to women. I used Pinterest as a model for the dashboard for Den, since users seem to like the ease of visual organization in the platform.

Dropbox

Dropbox has a lot of appeal in it’s brand and it’s business brand (Dropbox for Business) and is known for being fast and secure. Opportunities lie in it being purely a file storage service and nothing more, it’s very straight forward. It also is expensive and the market is saturated with competitors, and Dropbox does little to set itself apart.

User Stories Icon

User Stories

My next step was creating user stories, where I used the data I had gathered thus far to determine the general direction for my platform. What did users need to accomplish? What were nice-to-haves? What did users want in this platform that frustrated them in other platforms? And lastly, what did a user absolutely need in order for the platform to be functional? I created over 50 user stories that would eventually inspire my user flows. Ranking the stories as low medium and high, I took all of my high priority stories and used those for my MVP.

Sample User Stories

View All User Stories
User Flows and Sitemap Icon

User Flows & Sitemap

I created user flows from my user stories, which then helped me to create my sitemap. My user flows included everything that a user would need to accomplish which were created from my user stories. Lastly I created the sitemap which would fine tune the navigation and direction of the product.

User Flows Sketches arrow User Flows Digital
Identity and Brand Story Icon

Identity, Brand Story & Logo

Moodboard
Logo Sketches
Colors, Typeface and Style Icon

Colors, Typeface & Style

I knew I wanted Den to have a homey, down to earth and rooted vibe, so I wanted to go with colors that would be associated with nature and with home. My goal was to find a color palette that would make the smell of pine trees or the sound of the wind blowing through leaves jump off the page. With Den being a place to keep personal treasures and important documents, it was important that I made it cozy yet bold, playful and fun, sparking a feeling of belonging. This inspired the style and direction of the project.

Color Palette
Small Color Palette
Typeface Example 1 Typeface Example 2
Wireframes Icon

Sketches, Balsamiq Wireframes & User Testing

In order to be able to share my initial design ideas with the client, I created wireframes in Balsamiq. This allowed me to put all of my user flows, sitemap and content to work to create something that would eventually become my full-fledged product. My wireframes allowed me to do my first user testing in InVision so that I could fine tune the layout of my pages before creating high fidelity mockups.

Wireframe Sketch 1 arrow Balsamiq Wireframe 1 arrow Completed Wireframe 1
Wireframe Sketch 2 arrow Balsamiq Wireframe 2 arrow Completed Wireframe 2

Results

My testing results showed that the initial ideas were good, but there needed to be more depth to the content. The sizing, details and placement of CTAs also needed to be more deliberate. I took these results into my next phase, which was to create my high fidelity mockups.

HiFi Mockups Icon

High Fidelity Prototype

I gathered all of my research and ideas and went to work creating the first high-fidelity prototype in Sketch. This was the part when I really got to take all of the personality and capabilities that I wanted Den to have and bring it all to life. I created enough for Den’s MVP, which would include a landing page, a sign up page, a log in page, the dashboard, account settings and storage plan page. As I started creating the first mockup of the landing page, I quickly realized I needed to go in a different direction. You can see below the initial mockups and then what they later turned into.

First slide arrow Second slide
Third slide arrow Fourth slide
Fifth slide arrow Sixth slide
Seveth slide arrow Eighth slide

More Testing and Finishing Touches

In order to give the client an idea what the Den app would look like on mobile, I also then created a landing page, dashboard and navigation screen on mobile. Once this was complete, I went back to the client to get approval to move forward with more user testing. I loaded all of my mockups into InVision so that I could perform another series of tests with potential users including a 5 second preference testing on Usability Hub to ensure that each revision to the design was done to improve usability. I also received feedback from key stakeholders regarding the layout to improve the flow and ensure all content was easily readable as well as accessible to all types of potential users. Final revisions were made once all of the concerns my users brought up were addressed, and the final product on Den was born.

What I Learned Icon

What I Learned

Throughtout this project I learned so much about the design process and most importantly gained so much insight into user needs. Creating Den challenged me to take a very well known platform, cloud storage, and turn it into something different, better and more useful to my audience. I learned the importance of frequent user testing in all stages of the design process. From the very beginning when I started with my user survey, I knew there was a huge opportunity in this space and even though the direction from the client was somewhat vague, my users led me in the direction that I needed to go throughout the entire process.

View the InVision Prototype