dreamers frames hero card

Problem Overview

Summary

Even though there are a lot of big names in the cloud storage and organization industry, a rising competitor with the right combination of features to meet the needs of a target audience could dominate the market. We set out to create that competitor.

My Role

I worked as the core designer for the Dreamers project. I was responsible for the research and creation of the logo and brand, as well as all aspects of user research, testing, and design of the Dreamers site itself.

Tools and Deliverables

Using Figma and InVision as tools I produced a user survey and analysis, three user personas, competitive analysis, user stories, user flows, wireframing, prototype(s), prototype testing, user testing, and created a brand and logo for the project.

The Problem

There are many well-known cloud storage sites in use today but they are all designed for one set of tasks or user group and many are hard to use or plain looking. So, we wanted to learn what features users actually needed and use what we learned to create a product that would satisfy the needs of the client and the user; while still being intuitive to use, aesthetically pleasing, and unique.

The Solution

Through user research and competitive analysis we discovered that a competitor with a large amount of free and secure storage, a broad target audience, and an easy to use interface, could take the market by storm. Then through the creation of user story and user personas; we discovered the features users actually wanted and needed. And so the concept of Dreamers was born; with 20GB of free secure cloud storage, the ability to upload files and images, download, edit, add and sort files using labels or folders, create documents, spreadsheets, notes, presentations, as well as share content and collaborate via video conference. we then put it all into action with user flows, wireframing, mockups, branding, prototypes, and tested it all with usability testing and analysis.

View Final Prototype

User Survey Research

Goals:

Before starting the design, we created and deployed a user survey to gather information and data about potential user groups, the competition, and current users' pain points and happy moments.

Results:
  • 88% of users reported using cloud storage services
  • 95.2% reported wanting to use folders to organize their content
  • 47.6% reported wanting to use labels
  • There was also a general interest in collaboration features
Summary

The results were helpful but somewhat inconclusive. The word choice and question options allowed for a lot of mixed and unhelpful data that went beyond the scope of the project.
In the future more time will be spent crafting questions to be more of an asset for the project.

View full survey analysis

User Personas

We interviewed three respondents from the survey and used their data, as well as the survey data, to craft three user personas that represent the three different types of potential user groups.

User Persona User Persona

Competitive Analysis

During the survey analysis three main potential competitors were discovered; Google Drive, Evernote, Dropbox. Following the discovery a competitive analysis was completed to determine the strengths of the competition and potential opportunities for Dreamers. These are the key discoveries:

Strengths
  • Built in productivity suite
  • In-app collaboration
  • Two factor authentication option
  • Sharing features
Opportunities
  • Native set of productivity and sharing features
  • More free storage for every user
  • Clean, simple interface with only necessary features
  • Support for multiple file types

User Stories & Flows

After the creation of user personas we used the data we had previously gathered in the research to create a list of high, medium, and low priority user stories. For the sake of staying within the scope of the project we focused on mainly the high, with a few medium, priority user stories for the creation of the user flows.

User flow diagram User Persona

Wireframe Sketches

After creating the content strategy for the Dreamers site we quickly hand-drafted rough page outlines with a pen and paper for the major pages we thought we were going to need for the site... little did we know this would not be NEARLY enough.

pen and paper sketches

Wireframes

After creating quickly hand-drafting rough page outlines with a pen and paper for the major pages we thought we were going to need for the site we created digital wireframes for all the screens needed to complete each of the high priority user stories. Here is where we realized that we didn't sketch nearly enough frames so this part became lengthly and time consuming but important for the usability and design of the project.

Dashboard Wireframe thumbnail Dashboard Wireframe File Wireframe thumbnail File Wireframe Login Wireframe thumbnail login Wireframe New Wireframe thumbnail New Wireframe Signup Wireframe thumbnail Signup Wireframe

Testing the Wireframes

We then created a working prototype using InVision and our wireframes and tested it with two different types of users. We tested it both in-person and remotely using screen record and video calling using an identical testing script to help assure testing result accuracy. Each tester was asked to complete three tasks on the site: sign up for an account, add a piece of content, and organize a piece of content. Neither user had any significant issues completing the tasks and did so with little to no input or help from the tester.

User comments
  • Easy to navigate
  • Clean layout
  • Colorful & fun
  • Unique site
  • Intuitive to use
Iterations

After concluding user testing on the wireframes one main issue with the design became clear; the navigation buttons looked like selection buttons and not like navigation buttons which caused users some trouble while navigating the site. Before moving on to high-fidelity mock-ups the navigation button was changed from the top version to the bottom version and implemented throughout the site to enhance overall usability.

Before and after button redesign
Testing Script

Branding

Moodboard thumbnail Dreamers Moodboard

Dreamers moodboard

Brand Ideals
  • Everyone • Everybody has a dream and anyone can be a Dreamer.
  • Secure • Dreamers lets you keep all of your files in one secure place in the cloud.
  • Organize • Through searchable labels and folders you can easily find the file you are looking for when you need it most.
  • Create • Dreamers lets you create documents, spreadsheets, notes, and presentations no matter where your dreams take you.

Logo Development

Logo sketches
initial draft

1. Initial outline - Draft

first background fill

2. First background fill - Too busy for anything but a plain white background

first fill iteration

3. Fill iteration - The background was too light and made the logo hard to read

second fill iteration

4. Second fill iteration - The background was too dark and “gloomy” and didn't convey the “dreamy” feel we were going for

Alternate coloring

5. Final design - Alternative, all-white logo variant

Final fill design

6. Final design - Because it has the same colors the site uses and it has good readability at all sizes as well as having a simple fill image that isn’t too distracting

High Fidelity Mockups

After creating and testing digital wireframes the first high fidelity mockup was created. Immediately after putting it all together, and receiving some feedback on the design, the need for two quick iterations became apparent and were completed before moving on to a second round of usability testing.

  • First; we eliminated the full page background to give more space to the files and allow for more whitespace to enhance the readability.
  • Second, we removed the boxes around the files and moved them closer together to fit more files on the screen and better utilize the space on the page.
Hifi initial progression thumbnail Hifi initial progression thumbnail

Preference Testing

After another round of usability testing we learned that the site was much too dark and didn’t have the visual appeal we wanted it to. The all blue color scheme felt a lot like several other well known brands so we decided to conduct this preference test to determine which color scheme would be best for the overall finished dreamers design. We received overwhelming support for the third option ‘C’, which caused a color redesign using mauve tones for the Dreamers project.

BlueGreen tones thumbnail BlueGreen tones Wireframe Teal tones thumbnail Teal tones Wireframe Mauve tones thumbnail Mauve tones Wireframe Purple tones thumbnail Purple tones Wireframe

Final Design

The preference test further supported our belief in the need to change the color scheme to mauve/purple with yellow-orange as an accent color. Changing the colors gave the site a more luxurious and dreamy cloud feel which better represents the brand and its ideals.

Live Prototype

Design Progression - Dashboard

This is the design progression throughout all of the iterations visualized using the dashboard; for many of these we only designed the dashboard before iterating the design again; not every frame.

Empty wireframe thumbnail Empty wireframe Initial mockup thumbnail Initial mockup Wireframe First iteration thumbnail First iteration Wireframe Second iteration thumbnail Second iteration Wireframe Final design thumbnail Final design Wireframe

Learning

While crafting the survey for this project we included too many short answer questions which lead to a lot of data, but most of it was muddled and had no consensus. When we were crafting the survey we were determined to believe that short-answer questions would give the best range of data to work with. This project was a hard lesson on how wrong that was and how an unhelpful survey can cause significant scope creep, iterations, and an unfriendly user design. Partially due to the survey, but also partially due to our incessant need to attempt to overachieve and do more than was asked, we ended up creating a much larger project for ourselves by going beyond what the client asked for and offering many features that while they are neat; they only took time away from the rest of the design that mattered more to the client and users. Additionally because we had made this project into something so much bigger, we needed to make SIGNIFICANTLY more screens than we had anticipated ,or had time to make, so many screens were rushed which is why the design was plagued with jumping elements until we eliminated some of the extra factors and brought Dreamers back into the scope of the project. After that we were able to give more attention to the layout and colors themselves and bring Dreamers back around to really create a design we were happy with and proud of.


Lessons Learned

  • Stay within the scope of the project
  • Don't overthink the design
  • Create good, through survey questions to be a better asset to the process