Collaboration platform for Designers, Developers and Biz Devs — Case Study

PSP — Pixel Sharing Pro is an internal tool used by Designers, Developers and Business Development Executives (BDs) to share design mocks and feedback.

PSP Login

Brief
PSP was designed and developed in early 2000’s hence its user experience was deteriorate over time. Thats where we came in, We were asked to carry out user research and redesign PSP with a fresh approach.

User segment
Designers : 30 users
BDs : 40+ Users
Developers : 20 Developers

Workflow
1.
Designer work on around 5–10 design requests a day. Every request needs at least 5–7 variations. Which they upload on PSP for feedback from BDs
2. BDs share the designs with the client, get appropriate feedback and get the designs approved
3.
BDs forward the same PSP link to the developers for implementation

Research —

Participant observation and Interviews
Our first stage of the design process was to understand the daily workflow of the user’s. we started with a sample size of 7 users under each segment. Where we observed the user journeys in their environment followed by a set of questions. Here are some example questions we asked :

Describe your daily workflow
Why do you rarely use commenting feature?
How often do you have to search for perviously uploaded files? Why?
What are the problems you face while using PSP?
How do you share feedback with project collaborators?
How often do you use tagging feature? Why?
How do you refer to your pervious work and How often?
What are some of the common mistakes that happen while working with teams?

Affinity Mapping
Our previous exercises helped us gather a cluster of thought which we further segregated into 3 categories-

1. Pain points
2. Goals and Motivation
3. Feature requests

Affinity Mapping

We wrote each point on a sticky note and started dot voting based on number of times a point is repeated. This exercise help us map out the important areas of improvement in our user journeys.

Which eventually led us in creating a feature list.


Raw feature list -
1. Provide better and quicker ways to upload files 
2. Make it easier to share multiple urls with the colleagues
3. Find faster ways to share feedback
4. Introduce standardisation in feedback process
5. Reduce chances of feedback misinterpretation
6. Quicker ways to find your pervious projects


Some early Paper Prototypes -
Paper prototypes helped us quickly try different layout ideas and share them with our stakeholders.

Paper Prototypes

Solutions —

Share Group URLs -
In order create faster ways of sharing design mocks. We introduced “Group URLS” — Designers upload a set of multiple design mocks in one go, instead of sharing url for every individual mock designers have an option to copy group url that shall contain the complete set of mocks uploaded at once.

Share Group URL

Add Comments directly on the design
Creating a standardised feedback mechanism and reduce chances of misinterpretation of feedback were 2 crucial goals of our redesign. Time wasted due to communication gaps was massive and had to be dealt with.

We introduced a feedback system that lets our users comment directly on the design mocks and have conversation threads over it. This reduced chances of misinterpretation plus it also became one single place to view all the feedback compared to previously when feedback was scattered on Slack, Email and verbal conversations.

Adding Comments

Upload History
Designers would receive feedback on their mocks from Biz Devs and they would make necessary changes and update the same file. Designers would have to maintain a list of mock urls uploaded for a specific project.

Upload history would help users keep track of what they uploaded in the past and refer to it when needed without having to maintain an elaborate list of urls.

Upload History

Infinite Scroll
One of the things we realised during our research was that there wasn’t any way for project owners and other stake holders to get inspired from what other teams are doing in the company.

Inspired from Pinterest masonry style we implemented a homepage that would have a collation of all the designs being uploaded on the platform for users to get inspired or use as reference. This was phase 1 of sharing ideas if we would notice engagement we would introduce tags in next phase.

Infinite Scroll

Loading Animation
To manage wait time we created this looping animation from our logo symbol

Loader inspired from the product logo

Other minor improvements
1. Drag file anywhere into the view port to upload
2. Create highlights over design mocks using basic shapes
3. Share appreciation by liking a post
4. Edit your post after upload on the same url

Impact — (2 weeks post launch)

Total likes on the platform : 122
Total comments added on the designs uploaded on the platform : 228
63 Users logged in which helped track who worked on a specific design request
680 Group uploads in total

We are yet to validate how our new features performed once we have atleast a month of data we shall be in a good position to take a call. Numbers that we would like to study go as follows :
 How many users go on homepage and browse designs for inspiration?
 How many users are copying group url on multiple file uploads?
Whats the ratio of designs being uploaded to the feedback comments being added?
How often do users check their upload history?

Stay tuned as I will be updating our finding with time in this space. However if you are interested in looking at the revamped product please visit my Dribbble profile here.

Feedback and comments are appreciated 😊