Clouder
- Tullie Design
- Apr 7
- 9 min read
Updated: Apr 24
In the music industry there’s a need to create, collaborate and share concepts, ideas and data.
When people are in a room together or worlds apart, sharing data is as easy as a click of a button, while the former two (create and collaborate) aren’t as simple.
With the advent of technology and communication platforms creation and collaboration should be easier, when people are worlds apart.
Clouder aims to meet the data capacity of all file types, the ability to create content inside the application with more than one user, all while able to collaborate in a safe and secure place.
The Problem
The challenge we ran into was that there weren’t any limitations on how far I could push the overall project. Our main constraint was the lack of direction that Clouder wanted to go in.
They wanted a storage repository that was collaborative and safe.
Effectively we could have moved in any direction which lends itself to scope-creep. Building out an entire brand from scratch required a long list of tasks and tools to be used in building the whole company from the bottom up, took a lot of time and a plethora of platforms to build the project.
The Solution
Conducting user research and constantly utilizing preference testing proved to be our biggest asset in making decisions about direction and deliverables.
Through this technique we pinpointed our target market and built out from there, creating a site that offers storage, sharing opportunities, creation and collaboration.
From sign in to upload, we have created a site that was easy to use, productive and most of all - secure.
"When an artist can create and collaborate in the moment... the inspiration is captured in the most organic way" - Ross Davidson, Music Producer & Writer
Research & Discovery
User Surveys
Starting with user surveys to gather what our target audience would be, we gathered our users from personal contacts, social media and forum platforms.
It was important we targeted as many cloud storage users that we could find, so that I could learn more about what worked and what didn’t. We needed key information, such as:
What features were most important to a user?
Why a user was having to use more than one cloud storage service?
When were they using cloud storage (personal, business, both)?
Where were their frustrations with their current services? and;
How their current experience with cloud storage could be improved upon.
The Survey results showed that
30% of non-users didn’t use cloud storage because it lacks features they want?
34% of users use multiple platforms to access their data
50% of people paid for cloud storage
65% of users used more than one service for cloud storage
75% of users choose their app/s because of features
84% said it was important to collaborate and create inside storage space
87% said that accessing a cloud storage service from their app was important
91% believed they may be more successful if they could collaborate
After analyzing the data from the survey. We learned that a critical number of cloud storage users were unhappy with their main service, because it didn’t provide them with enough room for creation and collaboration that would warrant paying for a service just to house data.
It was clear that users were using multiple cloud storage services to target specific actions, but weren’t able to find a service that would house all their needs into one service.
Competitive Analysis
We wanted to see what companies not only held data, but curated it - allowing users to share, create and collaborate in the service.
We put 4 companies under the microscope for a SWOT Analysis:
Patreon
Splice
Dropbox
Soundcloud
With Google Drive and Dropbox being the most well-known of the five, their combined limitations on file types and size left a user for wanting more.
Meanwhile Patreon and Soundcloud offered a platform for showcasing their data so others could contact the user for collaboration or creation, but lacked a backend storage facility.
Splice was geared towards production and recording but also didn’t offer much in the way of storage or creation inside the application. Click here for the full Summary of the SWOT Analysis.
Digging into our users
To gain greater perspective of our users needs, we needed to know who my main audience was, and how we were going to serve them to combat their current frustrations and what was going to keep them interested and motivated about Clouder.
Information Architecture
Stories and Flows
We narrowed down a list of tasks that were paramount for a user to be able to action on all data storage sites and actions that were going to be essential for users to store, share create and collaborate in the site I was creating.
From these stories, we developed user flows to create a visual hierarchy and then began to redesign their flows to make getting from point A to point B more accessible in fewer steps.
Sketching and wireframing
Starting with sketches, we researched different sites to see how they offered their platform and what inspiration we wanted to use for the direction we were heading.
After sketching the bones on paper we mocked them into a prototype to begin our first round of usability testing.
To jump start the ideas we played with 4-UP sketching before jumping into more vivid versions.
This opportunity to play so freely with paper and pencil offered up a natural tendency to sketch without thinking too hard about previous designs while allowing some imagination to run free with possibilities.
Transitioning to Low fidelity mocks for Prototyping
From the sketches I built out low fidelity mockups to then put into a clickable prototype. I wanted to ensure the wireframes were functioning as I had intended them to, ensuring that I was being as user-friendly as possible so that I would lower the change of abandonment.
I conducted my first round of user testing after deploying the prototype.
It was my aim to see if my current design was simple and clear enough for users to navigate the site in it’s barest state - and then grow from there.
Usability Testing the Prototype on Low fidelity
Through usability testing on the lofi prototypes, the key takeaways were that the burger menu posed a problem, although users who navigated the site who were used to the burger menu were quick to spot the icon, we still needed to create a clear message that the menu was there without frustrating the user.
From this insight, it was made clear that a demo button on the landing page would make the user more aware of the sites capabilities.
Synthesizing the feedback from these tests helped to ensure that each revision to the design was borne out of improving usability and not just aesthetics.
Some of the greatest feedback came was to highlight the menu and drop down iconography for users who weren’t aware of the burger menu or dropdown feature.To combat confusion and frustration I implemented a hover button when the mouse hovers over the icons that weren’t as apparent to the user - this proved successful in our second round of testing.
Visual Aesthetics
Building out the UI
We knew because of the complexities of a storage tool with search capabilities that we needed it to focus on functionality more than beauty, and that these first iterations would be the first stepping stone that would carve the path of Clouder.
We aimed to keep it simple and clear to focus on it’s function.
Tasked with generating the entire branding and identity, the goal was to create something that was clear, concise, dynamic and trustworthy. This required building out the essential elements of the brand and its identity
Naming the Product But first we needed a name.
After creating word association mind maps and composing mood-boards, we ran through a plentitude of names that would reflect the brand values and finally landed on Clouder.
is a combination of ‘Cloud’ and ‘Louder’, which I felt spoke its purpose and its volume.The application allows users to create, collaborate, store and securely share their data, while promoting a sensation of clear organization and and peace of mind.
Typography & testing
It was from the type font in the wordmark/glyph that made us focus on wider, more symmetrical typefaces.I wanted something that would create balance, which lead me to preference test an array of fonts. I used usability hub and social media for preference testing.
It was here that we learned the true power of getting users to tell you about what they want and need, and what truly appeals to them.
This priceless tool of testing, offers up a wealth of knowledge far beyond what simple education and intuition will provide.
Upon preference testing I chose Sans Source Pro and Barlow as the main type faces. These two are recognizable and therefore trustworthy.
Colors to elicit a trust response
Alike the rest of the site, we wanted to keep the colors basic so that the user could input their own magic when their creativity sparked.Again we wanted to focus on functionality and form rather than building out the whole kit and caboodle of the sites entire UI at this stage.
We kept the colours basic but informative where needed.Leaning on the sites basic colors as whites grays and blues, with snack bars and alerts in the UX standards of colored messaging and notifications (reds “warnings”, Yellow “alerts”, Green “positive feedback”)
Why Blue? Think: Facebook, Twitter and even the “trustworthy” notifications of Blue messages received on an iPhone to iPhone connection. Blue often signifies trust, steadiness and reliability - all the things we knew Clouder spoke.
Marking the territory: Logo Design
Designing a Logo to capture the essence of the product was limited to a short period of time, so we iterated in quick succession, starting from sketches for some concept designs, before narrowing them down to high fidelity mocks and testing the designs with potential users.
From here we started sketching ideas that would translate the values to our desired audience. The more we sketched, the more we felt a draw towards simpler ideas that had deeper meaning.
After posting the final options via a facebook poll, the following image was the clear front winner.
The final Logo design and the thought behind the design.
The final logo is representative of the keywords I wanted to create as the brands values and simple enough to be timeless.This simplicity gives the logo the ability to be translated into various colors and used as an inset or watermark, without the complications of being confused by any other branding.
Bringing it all together: The Style Guide
Building out the style guide, brought insights as an overall look of Clouder. It offered up a wealth of knowledge about the aesthetics, and served as a constant reminder for the brands parameters.
Consider it a look book for how the final product of Clouder should look and feel across the entire platform.
High Fidelity & Testing
Design V1.
After building the aesthetic stylistic of Clouders brand and it's guidelines, I iterated the concepts into the high fidelity mockups.
We wanted the landing page to be able to switch between the user being able to Log-in and sign up, which meant that the users who were members would be able to log-in but for those who weren’t yet members of music, they would be able to get vital information about the product and sign-up from the same page.
We built out an initial landing page to see if initial design was giving the user that they needed to entice them to sign up with Clouder and if they would consider it based on the initial landing.
Final Design V2.
Feedback from my first round of users, there was a heavy focus on the visuals of the landing page, and that although they could see that it was a cloud storage site, they didn’t think the images were broad enough to include the average user and therefore would not be engaged by the site unless they were a live musician.
Alike my search for a preferred typography choice, we deployed preference tests into forums and usability hub to gather feedback on what people preferred.
Wanting to introduce the site to musicians as a home for their creation, collaboration and sharing, without ostracizing other user who would like to use those features in their other endeavors.
Users wanted clearer imagery about what the company was meant to achieve (Hero image), and wanted to see images that were more concise and less metaphorical.
I gave the words and images more space to breathe.
"Being in charge of a project shouldn't mean I have to give up my passion of design, I have much more to offer than delegation." - Monica Habe, Project Manager
Conclusion
What went right and what we could have improved upon
Clouder is a project that was close to my heart. Throughout the process, the greatest takeaway was the value of user research and testing. As a tool these two actions of study and listening cannot be underestimated in creating structures and experiences that cater to the greater person than just to rely on previous studies or personal experiences.
Through this process we were able to design a product that was user based and user driven, while our key takeaways were to keep it simple and use the testing and research to speak for itself before being carried away with complexities.
Thinking forward, with more time I would have liked to build out additional screens to test the concept of forums for users.
I would have liked to build more options for a collaborative space and run user preference and testing.
My biggest challenge was in choosing and curating the imagery (albeit minimal).
I overthought, and as aforementioned learned that keeping it simple is the key.
As a whole, I am excited about this project and the insights I learned in the process. The solutions that were rendered came from an organic place to create a solution to the world of cloud storage for creatives. This project proved to be challenging and fun, offering up a wealth of knowledge that I am looking forward to blueprinting and drafting further in my future projects.