collab is a cloud-based online storage tool that lets you sync all your app content into one cohesive space.
And it gets better: collab makes it super easy to share any file you want, with anyone you want.
This is the complete, in-depth case study. [You can also see the full mockup on Figma]
🤔 Problem🤯 Users are overloaded! 🤩 Solutioncollab users can glide through this checklist:👩💻 Competitive Analysis🥡 Takeaways👩🔬 User Research🥅 Goals of the survey🥡 Takeaways👤 User Personas📖 User Flows"I want to create a file and share it with several social channels"🔲 LoFi Wireframes👁️ Usability Testing💎 Branding & Identity🖌️ HiFi Prototype🤝 Conclusion
🤔 Problem
Cloud storage and organization tools are popularly used for professional streamlining, and for personal collaboration with friends and family.
BUT, users lack a tool that facilitates a cloud-based network that surrounds all of their apps and storage.
So many apps on a regular basis means:
- "I'm part of too many collaboration communities"
- "I'm switching between too many interfaces"
- "My phone storage and memory are suffering from app overload"
- "I'm not sure if all of my apps can integrate well together"
- "I can't keep track of all my login credentials"
🤯 Users are overloaded!
Where and how did they shared their content? And with who? And by the way, they’re running out of storage space — and fast.
🤩 Solution
‘Collaboration is key’ in collab.
collab leverages the “network effect” to generate growth. Users should be able share items they’ve created and collected with their friends, colleagues, and anyone else.
collab users can glide through this checklist:
- Projects and files remain consistently organized and functional
- All content in collab is synced with their apps
- They access all of their collab content from any storage or productivity app
- They can access (and share) collab content with any social network
👩💻 Competitive Analysis
We performed a SWOT Analysis on pocket, asana, and Evernote. Our goal was to understand the cloud storage/project management landscape and the different options that users choose from when finding a tool that meets their needs.
🥡 Takeaways
💪 Strengths
- Consistent branding (Evernote)
- Clear layout (Pocket)
- All features and action items are visible and easy to identify (Asana)
- Color scheme is very fluid (Asana)
- Use-case is very clear (project management/workplace) (Asana)
😬 Weaknesses & Threats
- User flow should not be confusing, it should be logical and sequential (Evernote)
- Action items should be positioned in logical places (Evernote)
- Interface layout should be consistent with conventional styles/editing menus (Evernote)
- Be focused on a specific audience/use-case (Pocket)
- Sync with relevant social networks so that there are communities and synced account data from other accounts (Pocket)
- Show an example of how the tool works (Asana)
- Conversations features should be visible/easily accessible (Asana)
👩🚀 Opportunities
- Emphasize collaboration opportunities/features (Evernote)
- Focused branding (Pocket)
- Friendly microcopy (Pocket)
- Tagging system for projects (Asana)
👩🔬 User Research
The overall objective presented to users in why we wanted their feedback and what we were trying to identify was:
“We’re interested in your feedback for your preferred online tools for bookmarking content, as well as the tools you use for sharing and collaborating online with colleagues/peers/friends etc.”
This was done in the form of a survey, which was answered by 28 respondents.
(Click to see full survey on SurveyMonkey)
🥅 Goals of the survey
- Understand which tools users use most, so that we can gauge which design systems they’re familiar with and what type of interface would be most appealing/useful to them.
- Understand which social tools are most relevant for integration capabilities
- Understand the use-cases to know what the MVP should be
🥡 Takeaways
- 61% of users choose Google Drive as their favorite tool, which is their go-to tool for sharing and collaboration.
🧰 Preferred capabilities in an ideal tool:
- Create and upload content inside the actual tool
- Share organized content stored in the cloud
- Share their content in both a one-on-one and a group forum
- Share either/both a single item of content or multiple items.
- Share and Collaborate on documents and files with contacts from their social networks, in real-time.
🤝 Social channels that are most important to users:
🧚 Dream features
- Searchable comments
- Live whiteboard feature (for Google Drive)
- Link WhatsApp for photo saving purposes
- Real-time activity feed and "Read" receipts on messages
- Collaborative environment for sprint cycle
- Live collaborative editing
- Bring in all other tools for central repository
- Video conference calling like Zoom
👤 User Personas
📖 User Flows
"I want to create a file and share it with several social channels"
🔲 LoFi Wireframes
👁️ Usability Testing
- Testing was conducted both in-person and remotely (via email with a test script).
- Feedback indicated that the CTA buttons weren't positioned in the most obvious places and that this was confusing.
- Another area to revisit was the confirmation of whether or not a user task was completed or not.
💎 Branding & Identity
🖌️ HiFi Prototype
🤝 Conclusion
Designing collab from A to Z was a challenging, yet rewarding process. This was my first time designing a full-fledged product, and I learned that the more and choices you're faced to make between styles and infrastructures — the more informed your final decisions are. This lets you be more confident about the product you're delivering to the masses.
It was also interesting to aim to create a middle ground between similar interfaces to what your target audience is used to interacting with — yet within that constraint, to find a way to differentiate your user experience on all fronts.
Enjoy collab!