CO LAB

Co lab is a cloud storage application designed to humanize collaboration and communication and to help build organization within projects.

Full project available on desktop view.

ROLE

Research
UX Design
UI Design
Illustrations

mentor

Chris Gillis

prototype

co lab

summary

organization

collaboration

communication

Utilizing a basic analysis of the file storage industry, competitive analysis of key players, as well as user research, I have identified gaps in the market and found several user frustrations with currently available products. Co lab is a cloud storage application designed to humanize collaboration and communication between teams, customers and vendors. My research demonstrated that the user is being overwhelmed by multiple tools and is losing productivity while working on projects. The main principle of Co lab is to facilitate effective collaboration between users and keep their projects organized in an easy to use structure. The application provides three viewpoints: Files, Co lab, and Talk. All of these features are unique and interconnected to create an easy workflow and help users to increase their effectivity.

Understanding virtual communication is a big challenge, and it has a long way to go. Co lab is a pitch of how I would approach this emerging issue. Virtual communication can get very rigid and unclear. In this project I wanted to bring simplicity and fun.

research

DEMOGRAPHICS

52.4% of respondents are below age 24.
42% are between 25 - 44 years old.

USAGE

76.2% of respondents use cloud app for work.
71.4% of respondents use a storage app mostly on desktop / laptop

PERSONA

Ola B.
young man working on his laptop

JUNIOR COPYWRITER IN PHOENIX

“Starting as a freelance writer can sometimes be challenging. It is like running your own business and organization is crucial.”

FRUSTRATIONS

Communication is time consuming.
Unorganized systems in projects cause frustration.

GOALS

Time efficiency.
Organize files.
Build professional relationships with clients.

JOHN K.
young man working on his laptop young man working on his laptop

SENIOR GRAPHIC DESIGNER IN BROOKLYN

“If I could improve one thing it would be to humanize virtual communication with my team and clients, so I can understand what is needed to be done immediately.”

FRUSTRATIONS

Failure in communication causes too many delays.
Too many tools and platforms for communication.

GOALS

Clarity in communication
Unifying communication tools.

INFORMATION ARCHITECTURE

AS A USER WANTS TO COLLABORATE

flow chart

AS A USER WANTS TO ORGANIZE FILES

flow chart

legend

flow chart

SKETCHES

organize

collaborate

talk

PROTOTYPE & TESTING

TESTING #1

WEBSITE

DASHBOARD

TESTING #1

WIREFRAMES

WIREFRAME

ADJUSTEMENTS

Added an invite button to the left, in the collaborator section.

ADJUSTEMENTS

Added 6 step on-boarding guide to clarify the use features.

DEMOGRAPHICS

Users were full- time professionals. 23-45 y.o. Tech savvy. Female and Male. Fluent English. Cloud Storage users. Spend around 20 -30 h/week on the internet

VISUAL DESIGN

Co lab wants to bring a simplicity and fun and also differentiate itself from the competition. What is the emotion we want to share with the user? We want to be fun and welcoming and that is why we have chosen warm tones, playful typography and comic illustrations.

Part of the branding is also transparency in communication expressed by overlaping organic shapes.

TYPOGRAPHY

Type Pairing

Neuzit Grotesk intended to be timeless with no distinguishing characteristics. The text complementary typeface is Warnock Pro Light. Design features sharp, wedge-shaped serifs which creates a nice contrast with the clean and bold Neuzeit Grotesk.

COLOR PALETTE

analogous color

Warm colors represent welcoming and friedly environment. In contrast the rich bule tone brings in a feeling of security and privacy.

ILLUSTRATIONS

MEERKATS

Meerkats are one of the most collaborative animals.

SHAPES

The use of organic shapes differetiates the app from it's competition.

ILLUSTRATIONS

Meerkats are one of the most collaborative and organized animals. They also bring fun to the environment.

TESTING #2

HI-FIDELITY

ADJUSTEMENTS

The chat feature was removed from the collaboration space. The user was confused with multiple tools and did not understant where to actually collaborate. A caption was added to clarify the option to invite collaborators

ADJUSTEMENTS

Added drag and drop to the talk room.

ADJUSTEMENTS

Added an option to 'invite' to collaborate to the talk room.

DEMOGRAPHICS

Users were full- time professionals. 23-45 y.o. Tech savvy. Female and Male. Fluent English. Cloud Storage users. Spend around 20 -30 h/week on the Internet

CONCLUSION

organization

collaboration

communication

In this project I worked with three different critical productivity tools and designed an interface that allow the uninterrupted workflow between each of these tools. This allows uploading files into pre-designed organizational file strictures, real time infile collaborating with other users and facilitating discussions and planning without leaving an individual app.

Frequently users do not consider planning organization at the head of a project an important step. Bad organization will slow productivity, confuse other users and create frustration. To aide the user, I have conceptualized an option to use pre-designed industry and project specific templates for file organization. These templates can be built based on research and industry specific best practices. This would enable the user to “one-click” select proper organization and build logical pathways to his files.

It is a big challenge is to humanize collaboration between people. The productive worlds reliance on email and text based communication tools can become very frustrating as communicating verbally is not always the most clear way. To address the need for visual and 3 dimensional communication, I devised a set of tools to help users clearly demonstrate their thoughts. In the application’s collaboration room the user can open a specific project and invite other people and visually work on adjustments. Users can pin a picture, draw, or make requests. While people are taking notes, they often lose attention and also don’t remember all information accurately. I have added the ability to record a session in case collaborators need to revisit changes that were made while in a session.

Co lab is a tool that provides more options how to bring clarity into virtual communication. The modern professional is mostly communicating via email. That causes distraction when seeing new emails coming and changing between different platforms. This causes distraction and the user loses focus. One of my intentions was to build communication in teams, groups and individuals within the product. While communicating user can navigate in files and easily share them without leaving communication. User also has access to his calendar to plan out his schedule.


The amount of freelancers and business of one is increasing. Virtual collaboration is rapidly growing. Easy online collaboration will be in demand.

Let's make it easy and fun!

clickable prototype