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.
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.
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.
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
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.
- 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
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.
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.
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:
- Built in productivity suite
- In-app collaboration
- Two factor authentication option
- Sharing features
- 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.
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.
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.
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.
- Easy to navigate
- Clean layout
- Colorful & fun
- Unique site
- Intuitive to use
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.
- 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.
1. Initial outline - Draft
2. First background fill - Too busy for anything but a plain white background
3. Fill iteration - The background was too light and made the logo hard to read
4. Second fill iteration - The background was too dark and “gloomy” and didn't convey the “dreamy” feel we were going for
5. Final design - Alternative, all-white logo variant
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.
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.
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.
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.
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.
- 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