Assemble Cloud Sharing
SUMMARY
Cloud storage applications is a growing market that people are increasingly reliant on it for both personal and professional use. In 2019 an estimated 3.6 billion people worldwide used cloud storage, up from 1.8 billion people in 2017. With so many cloud storage users, there is an opportunity for a new, updated product to enter the market that resolves frustrations current users experience. Assemble seeks to do this by improving discoverability and giving users the ability to gather all of their file, teams, and inspiration from across the web in one, easy-to-use interface.
This was my first full-scale project as part of Bloc Design Apprenticeship.
ROLE
UX Researcher
Content Strategist
Visual Designer
Branding Designer
UX Designer
THE CHALLENGE
What Problems am I Solving for?
For this project, I was tasked with building a cloud storage brand and app that stood out in the saturated market. The client did not have a specific vision in mind and was reliant on me to discover the problems that existed for current users that the competition had yet to address. The research I conducted allowed me to see a pattern of frustrations users experienced when using their cloud storage app of choice:
-
Difficulty in finding files.
-
Needing to switch between accounts/applications when dealing with personal and professional files.
-
Inability to save inspiration and information from across the web that would be helpful to complete personal and professional projects.
THE SOLUTION
Simplicity & Increased Functionality
I relied on my research and competitive analysis to guide how I would best resolve the frustrations users experienced. User research clued me into users’ current behaviors when using cloud storage applications. Competitive analysis allowed me to understand the strengths and weakness of competitors in the space, enabling me to see what opportunities existed. Combining the outcome of my research and competitive analysis, I focused on the following as solutions to the challenges user faced:
-
Design a simple, intuitive dashboard with a simplified information architecture.
-
Create a separate section for users to use when dealing with their personal files and files associate with projects they are collaborating on with others.
-
Integrate the functionality of being able to save links.
COMPETITIVE ANALYSIS
Learning From Existing Solutions
To discover how to best position Assemble in the saturated market, I needed to first understand the strengths and weaknesses of the competitors that already existed in the space. After doing some research and determining Google, Dropbox, and Pinterest were three of the most popular, I decided to use them to conduct my competitive analysis.
+ Favored for its ability to create original content easily that could be directly shared with other users.
- Organization of files sometimes felt chaotic with files only being able to be found by using the search feature.
+ Edits or comments made to a file were updated live for everyone who they've been shared with to see.
- Users would often switch to another application when accessing personal files which felt cumbersome.
+ Favored for its ability to curate photos and visual inspiration directly from the web.
- Lacked the ability to save text-based files or to create original content.
USER RESEARCH
Clarifying Users' Expectations & Frustrations
Now that I had an idea of what opportunities existed for Assemble, I needed to determine the best design solutions to the challenges I had discovered users faced. To do this, I first had to get to know my users better. What were their preferences, opinions, and behaviors as related to cloud storage applications? I used a user survey to gather this information, sending it out to friends, family, subreddit groups and my fellow Bloc students. The user survey focused on the following:
-
What users used cloud storage for.
-
The specific cloud storage applications favored by users.
-
What users liked most about their cloud storage application of choice and what their top frustrations were.
-
Features they found most important to have.
-
Absent features they wished they had.
-
How they would optimally organize their content.
100%
of participants used cloud storage for both professional and personal use.
95%
of participants were current cloud storage users.
FEATURE PREFERENCES
100%
wanted the ability to upload files and add comments.
78.9%
wanted the ability to upload files and add comments.
85%
wanted to receive automatic notifications when a document is edited by another.
78.9%
wanted to be able to upload images.
100%
wanted to be able to create text-based documents.
52.6%
wanted to be able to create a to-do list.
Survey #1 - 24 participants
After reviewing my key findings, I had a solid vision for the product I wanted to build, but I still had areas I wanted more certainty on. And who better to get that certainty from than users! So I put together another survey which I sent out to the users who had said I could reach back out to them if I had any further questions. The focus of my second survey was to do a deeper dive on features users wanted, but I also wanted to know if users primarily used their desktop or mobile phone to access to their cloud storage so I knew what platform to design towards.
95.8%
primarily accessed their cloud storage on a computer screen.
User preferences on organizing files from most likely to least likely:
-
Folders
-
Date edited
-
Alphabetically
-
Date created
-
Date opened
-
File size
User preferences on features from most important to least important:
-
Upload files
-
Organize files
-
Create new files
-
See who is looking at their file in real-time
-
Be able to directly message a user
78.9%
of participants said it would be helpful to have a separate section for teams.
Frustrations participants experience when using their cloud storage app of choice:
-
File organization was not intuitive or robust enough.
-
Subscription fees (mainly from Dropbox users).
-
Low discoverability when trying to find documents associated with different projects/accounts.
What participants liked most about their cloud storage app of choice:
-
The ability to access files anywhere, on any device.
-
The ability to create new documents.
-
Ability to collaborate on projects.
Survey #2 - 20 participants
USER PERSONAS
Bringing Users to Life
With the information gained from my competitive analysis and my user surveys I was ready to create my user personas, hypothetical archetypes of real users as defined by their goals and frustrations. Building personas would allow me to summarize the patterns I noticed and give them life in the form of fictional users.
DAVID
Entrepreneur, 38 years old
GOALS
-
Oversee the work that team members are doing. Have transparency about when/how team members are collaborating on documents.
-
Maintain files needed for different projects in one place.
-
Employees able to easily give him access to files.
"Being able to automatically see which employee made which edit on documents would save me from asking so many questions."
FRUSTRATIONS
-
Team members don’t always keep files organized in the same way, and it can get frustrating when trying to find a file.
-
Often forgets what documents he has shared with whom.
-
No upfront transparency about who did what when collaborating on a document/project.
SARA
Graphic Designer, 33 years old
GOALS
-
Be able to save images and articles from the internet that interest her.
-
Easily share files with clients.
-
Keep files from different project organized and available to others working on the project.
-
Be able to get instant feedback from clients.
"My browser usually has over 15 tabs open at any one time so that I can reference images that inspire me."
FRUSTRATIONS
-
Often feels like her project files are disorganized.
-
Doesn’t have a place to save content from the web except by bookmarking it which she doesn’t find sufficient because it isn’t at all visual.
-
Doesn’t know when another team member has updated or commented on a document unless they directly email her.
USER STORIES & FLOWS
Seeing it in the Context of the User
Keeping the user personas in mind, I created user stories which laid out the highest, medium and lowest priority tasks for users. I focused on the highest and medium priority tasks to create my medium viable product (MVP) which I then mapped out using user flows.
“I want to be able to download a file.”
“I want to be able to collaborate on a file."
“I want to be able to organize my files.”
“I want to be able to save links.”
Flow for the user story: "I want to be able to upload or create new content"
Wireframe sketches were first created with pen and then converted into a lo-fi fidelity prototype using Sketch
BRAND LOGO
Creating a Brand Identity
I considered two names when building this app, but ultimately chose "Assemble" because it directly conveyed the action that users would take when using the application: to assemble files, teams, and links. It applied to both the personal and professional user and, a verb, Assemble elicited the emotional response in users to be active in using the platform. It was also a name no other company was using in the market.
After deciding on the name, I worked on designing a logo. Although I had an idea of the direction I wanted to go, the first step I took in creating the logo was to complete a mind mapping exercise. This allowed me to fully lay out the emotions central to Assemble that I wanted users to feel when seeing the logo.
To keep the branding clear, all of the logo iterations I created played on the idea of people/ideas coming together around a cloud where all their information would be stored. I used a preference test to help me decide which logo iteration to use. The one that was ultimately chosen was created by using golden ratio circles. It was chosen because it was simple, straightforward and cheerful; it also received the most positive reactions from users in a preference test on UsabilityHub.
Mind-mapping branding exercise; preliminary logo sketches; perfecting the logo design using golden ration circles
COLOR PALETTE
Evoking the Right Emotions
When deciding what color palette I wanted to use, I first considered the emotions I wanted users to feel: trustworthy, calm, creative and successful. With this in mind, I chose a color palette that included blue, green, purple, white and gray. I wanted the tones to be vibrant enough to keep the user engaged and uplifted, but soft enough to create a sense of ease and calm.
I chose blue as the primary color because it evokes the emotions of serenity, trustworthiness, and intelligence. Blue puts the user in a peaceful state making it an ideal color to follow the user throughout their flows with its calming influence lending to them be able to be more productive.
Primary colors used for Assemble
TYPOGRAPHY
Keeping the Design Systematic
When choosing the typography, I focused on finding a typeface for the logo and primary text that matched the logo’s rounded shapes and which was easily legible. I chose Open Sans for the primary typeface for its clean, well-balanced, rounded geometric shapes.
For the logo, I chose Montserrat which matches the rounded shapes of Open Sans and has an elegant simplicity and character that make it stand out.
VISUAL ELEMENTS
Creating Visual Elements
I wanted to use illustrations on my homepage to convey the concept of Assemble in a way that was informative and fun. To make the illustrations in my design, I used parts of several different vector-based images from freepik.com, putting them together to create original illustrations.
An example of a freepik.com illustration I used to create my own illustration
HIGH FIDELITY PROTOTYPE
Layering on the Skin
Keeping in mind my branding, it was time to put the skin on my wireframes and make them fully come to life.
USER TESTING
Testing the Usability
Using my high fideltiy prototype, I conducted scenario-based usability tests in-person and virtually to assess the product’s usability and users' preferences towards specific pages. I used the findings to iterate on my design.
"SORT BY" & "TO-DO"
When I gave users the task of sorting files, the majority didn’t see this at first and tried to click on the “Name,” “Last Edited” or “File Created.” Based on this, I changed it so that users could sort by clicking on the words, with an arrow showing the direction they’re sorted by (A - Z, First to Last).
“To-Do” was a feature I held on to until the end, but ultimately decided to remove based on extensive user feedback. While in my survey, participants stated they would like a to-do functionality, when testing the product users reported that they wouldn’t use a to-do section, citing it “unnecessary.” I tried different iterations but keeping in mind one of my goals of keeping the interface simple, I ultimately decided to remove it.
UPLOADING A FILE
When going through the task of uploading a file, users reported that they did not find it ideal for it to take over the entire screen, disabling them from doing anything while files uploaded. They also wanted to be able to to open their newly uploaded files without having to search for it. With this feedback, I iterated on the uploading process. Users responded to the new iteration very positively.
UPLOADING A FILE
When going through the task of uploading a file, users reported that they did not find it ideal for it to take over the entire screen, disabling them from doing anything while files uploaded. They also wanted to be able to to open their newly uploaded files without having to search for it. With this feedback, I iterated on the uploading process. Users responded to the new iteration very positively.
UPLOADING A FILE
76%
preferred a blue hover when making a selection.
24%
preferred a shadow hover when making a selection.
THE FINAL PRODUCT
Bringing it all Together
After designing over 200 screens and deciding to completely scratch one design for another, I had my MVP.
IN CONCLUSION
What I Learned
This was my first full design project and it was an incredible learning experience. These are the biggest lessons I learned:
-
Stick to the challenges you are trying to resolve and don’t try to tackle everything.
Going into this project, I was uncertain of what direction to take, and the open-ended client brief didn’t help. I wanted to create a “perfect” product, and I wrongly thought that I could only do this by having it tackle ALL the problems that existed. By trying to address all of the problems, I lost sight of the original challenges I was designing for.
-
When you’re feeling stuck, review your research and personas. Don’t fall into the trap of getting yourself unstuck by merely going with what you think is best. All decisions need to be rooted in research, with empathy for your users.
Several times I found myself designing based on what I thought was best, only to review my research and realize I needed to go in a different direction. This cost me a lot of time and frustration.
-
Test every iteration, no matter how tedious. Don’t assume your latest iteration is the best one. But know when to move on as well.
There were several times when I found myself iterating on a feature so many times that I lost track of both my original goal and valuable time.
-
Make sure your user flows represent the MVP of your product.
I made the mistake of creating flows that were a high priority but weren’t the flows that made my product unique. Going forward I will make sure that the flows I create are the ones that directly display what makes my product stand out from the competition.
-
Be inspired and learn from others but don’t let it completely change your direction every time.
There were several times where I would see someone else’s project, and it would cause me to change what I was working on completely. The main problem for this is that I didn’t know what their project was solving for, which often meant I would design something that did not work for the frustrations I was designing for.
