ux designer
collab image card-02.png

Collab • UX/UI

collab+header-01.jpg

How might we create an experience that helps users organize projects easier and communicate with team members about progress, edits, files, and deadlines?”

My idea: Collab. You might be wondering, why wouldn’t I just stick with Slack? Or Microsoft Teams? Or Google Drive?Platforms like Slack or Microsoft teams were created primarily as a chat-based collaboration tool that provides remote and dispersed teams with the ability to work together and share information via a common space.

Besides having the ability to plan, manage resources, and meet deadlines, one must possess the ability to foresee the challenges that may hamper the progress of the overall project.

Collab brings you just that. It brings all the steps of a project into one workspace, where you can upload design files, comment, edit, chat, and keep up with progress of your team. All while staying organized and on track.

The purpose of Collab is to present a platform where content editors, developers and designers can work together in one space to collaboratively edit, chat, and keep up with project files. This digital experience will make design collaboration a more seamless and efficient process.

Team members are able to immediately share and receive feedback without having to consistently share updated versions.

Audience Analysis

There are 2.1 million creatives (designers, artists, developers, writers) in the United States workforce, and a large portion of them — designers — contribute to industries whose products Americans use every day. They make up 1.4 percent of the total workforce, and 6.9 percent of the professional workforce (artists are classified as “professional workers”).

More than one-third of creatives in the survey (39 percent, or 829,000 workers) are designers (such as graphic, commercial, and industrial designers, fashion designers, floral designers, interior designers, merchandise displayers, and set and exhibit designers).

Income: The average yearly salary for designers is $43,000.

States: New York and California have the highest number of artists in the United States.

Tech Use: Average proficiency or higher.

Age: 20-60 years old

Gender: Male and Female, 54% of the industry is women.

Demographics: 20% of designers reflect a minority race or ethnic characteristic.

Education: High school degree or higher.

Personas

Dawn’s Customer Journey Flowchart

Wireframes

Sketches of Collab page designs below. Click to enlarge.

Collab wireframe design mockups below. Click the left and right navigation arrows to view all. Full sizes available in the Collab PDF located at the bottom of this page.

User Testing

User testing was conducted on usertesting.com. Overall, the three users shared similar positives and negatives while also offering unique suggestions.

User Testers

User 1 liked the purpose of the app. His most helpful suggestion was, “arrow for team progress is a little hard to find especially because you have to scroll over to see it. The left menu bar and individual progress take up most of the screen, at least for my experience. It would be better to include a link to “team progress” page under “my team” and “individual progress” under “my team” as well. That way, if a site visitor doesn’t see the arrows to the right, they could easily have another way to access the team progress.”

  • I was able to implement his advice in my revised site prototype. This was interesting to hear, because I originally thought the navigation under “roadmap progress” was pretty intuitive. However, I realized it was only that way because I knew which arrows to press to find team progress. The final prototype includes buttons for “team progress” and “individual progress” to navigate from page to page.

User 2 was a creative/design guru herself, so she thought this platform was especially interesting. She enjoyed it, and thought the color scheme, graphics, and text used were eye-catching. The headings and tool bar were intuitive from the start, making it easy to navigate through. User 2 had the same suggestions about having a “team progress” button on the side bar. Additionally, she thought the process of finding the logo drafts from the chat was difficult. She hoped clicking on the “design” chat would pull up a subcategory with the logo file.

  • This was something I implemented in my revised prototype. I made the steps more connected so that the user didn’t have to click around the platform as much to get to what they were looking for. For example, implementing the logo file within the design chat.

User 3 had the same comment about the team progress, saying “I was not able to find my individual progress or the team progress. It could be improved, with a button saying,’team progress’.” This was definitely something worth noting. Additionally, User 3 had trouble initially finding the team chat because she didn’t know how to get to the home page. This was my mistake, as I didn’t write instructions at the beginning of the user test to go through the “create a team” steps in order to get to the workspace landing page. Once she found the workspace, she was able to find team chats quickly. She liked the feedback option. Ultimately, she thought the platform was new for her, however, she liked the look and feel. Although she had to work through the platform, she was able to do so and completed all the tasks. The thing she liked the most was the group chat where team members were able to collaborate.

  • Following this feedback, an updated prototype was created. Based on the three user tests, it is clear that the app is a novel idea and would take thorough explanation to understand. I made the mistake of not explaining that the user had to “create a team” before entering the project workspace, so 2/3 were confused on how to enter.

For the finished app, I would feature a walk-through for first time users that don’t understand the purpose of the app. In addition, for both individual progress and team progress, the user would be able to open up the to-do lists to see their progress. In this prototype, only one to-do list was functional in order to show the user what it would ultimately look like. Lastly, I implemented a button that would bring the user back to the chatroom once opening up a file. One user expressed concern that it was a bit confusing and would prefer being able to toggle between the file and chat at the same time.

User Testing Links:

  1. https://bit.ly/2Vejyq5

  2. https://bit.ly/2vyYpr2

  3. https://bit.ly/2VDmLyG

The Collab Prototype

To get started, click on "find team,” “create team,” or the “get started” button. The working prototype can also be accessed here. This link is broken at the moment, so please open the comprehensive PDF to view all screens.

Through this program, users can type or draw directly on the work to show what edits need to be made, in real-time. This is similar to how Google Docs/Slides works. Users are able to tag other team members on an edit that requires immediate attention, making feedback a faster and more collaborative experience. Lastly, this application will make files visible and easy to access while also allowing team members to view each other’s work and progress within the project.