CLLCTVE is a new portfolio and networking platform where young creatives showcase their work, skillsets, and experience, as well as discover work by other creatives around the world, connect with them, and pursue gigs and opportunities within the creative industries.
With findings from previously conducted research, the CLLCTVE team tasked us with building a community segment for users to build relationships, connect with each other, and better maintain their creative networks within the platform. Diving into existing insights and performing original research, we designed and tested a new in-platform feature for desktop on the CLLCTVE site. Our designs for the community hub are scheduled to go live in early 2022.
Team
Gabby Coll, Djavan Guy, Oulijah Bruno, Terra Swan
Sprint
Three weeks; November – December 2021
Research
Research plan included user interviews, comparative and competitive analysis, feature inventory, task analysis, affinity mapping, usability testing, and card sorting.
Design
Research-informed user hats, problem statements, user flows, sketching, wireframes, and prototyping.
Tools
Figma, Photoshop, Miro, Maze
Project Background
Research: Discover & Empathize
To start off our research phase, I developed a research plan, referring to research previously carried out by the CLLCTVE team as well as their established style guide:
Research, continued...
Through user interviews, contextual inquiry, a survey, comparative and competitive analysis, and heuristic review, we began to put together a picture of CLLCTVE’s key user, user pain points, and the best way to develop a community page to solve for those pain points:
Current site design:
profile page
discover feed
Comparitive & Competitive Analysis
We compared CLLCTVE to competing platforms such as Behance, Creatively, and Dribble to analyze which features and formats work best.
Notable features on comparative platforms include: following other users, grid-like content feeds, post reactions, filtering content by topic, feedback through post comments, sharing posts, tagging by topic or skill, and simple post layout with large images.
Some examples of competitor site feeds & layouts:
Interviews, surveys, and affinity mapping
We conducted user interviews with 10 users via Zoom. We asked about their experience using CLLCTVE to showcase their work and connect with other creative, as well as conducted a contextual inquiry of their use of the website:​
-
College-aged creatives in various fields and mediums
-
Based all over the world
-
All part of the CLLCTVE beta cohort
Our team interviewed participants on Zoom.
I also created a survey and shared it with creatives of all ages, asking about their networking habits, portfolio strategies, and community-building activities:
-
24 participants
-
Based all over the world
-
Working in any medium
-
At any stage in their career
Surveys
Survey takeaways
Takeaways from user interviews, contextual inquiry, and survey responses informed the decisions made in the design phase of this project:
For example, the majority of participants surveyed expressed difficulty in finding creatives outside of their field to collaborate with, and many users we interviewed noted that they wanted a way to meaningfully engage with other creatives and their work. We included a functionality to filter posts and discussions by topic and create groups based on interests or field.
A sense of community is important to almost all users surveyed. Having a place to easily engage with like-minded creatives or the ability to directly communicate with other users is key. Groups filtered by topic solves this problem as well.
Participants surveyed expressed that discussion forums and events (virtual and in-person) for networking and connection prove useful. We included both in our designs, and noted that these also solved for users' need for ways to "share and interact with" other users' work.
Insights gained from interviews and surveys.
Problem Statement + Solution:
Problem:
How Might We?
Creatives need a platform to grow their craft through connections with other creatives in a personal yet professional way.
How might we provide a robust environment for gen-z creatives to grow their professional work and networks in authentic ways?
Solution:
A creative portfolio platform with spaces for creatives to discuss topics, give and receive feedback, discover events, gain inspiration, network, and interact with each other.
Define
With the information gathered from user interviews and research, we created user hats that represent users navigating the community forum to accomplish different tasks:
Post Interactions
Our first user hat is Izzie the Post Interactee. Izzie wants to connect with other creatives by liking, commenting on, and sharing their posts.
With this user hat, we created a user flow for key actions, and drafted a mid-fidelity mockup of what the community feed would look like:
Discussion Boards
The next hat is Carter the Conversationalist, interested in engaging with other users, sharing work, and giving and receiving feedback.
Events
Lastly, we have Elliott the Event Seeker. Elliott is interested in finding events in their local area or online in order to network, join skillshare workshops, and connect directly with others with similar interests.
Journey Maps
Taking a look at the existing site layout and functionality, we created a journey map to illustrate users' trajectory on the CLLCTVE website. Then, with our research and preliminary design iterations, we made a journey map of a user's ideal flow through the site.
Journey Map: Before
Journey Map: After
Ideate & Design
For the design, I drew from our research and adhered to CLLCTVE’s existing website design and style guide, while adjusting features to improve user experience. I sketched wireframes to outline the three user flows developed in the previous step.
First design iteration
Prototype & Test
With our newly crafted prototype, we sourced 16 users to test four proposed user flows in 2 rounds of testing. Recorded remotely on Zoom and conducted on Maze.co, we asked each tester to complete a set of 4 tasks, and asked them follow-up questions about their experience. After completing the tests, Maze provided detailed results such as click heatmaps, number of errors, and time results, which we analyzed and used to update the prototype. After implementing iterations, we ran a second round of tests, made more updates, and created our final prototype.
Test specs
2 rounds with 8 users
Remote & recorded on Zoom
Moderated via Maze
Tasks: 4
Task 1: Start at the community home page. Filter your feed by the topic "Photography;" find a post and "like" and "comment" on it.
Task 2: First, follow an event (any existing event). Then, create a new event and publish it.
Task 3: You want to view a discussion and leave a comment.
Task 4: You want to be a part of a fashion group. Join them. You also want to start a new group. Create one.
Round 1 test findings
Issues:
-
Following the topic "+" wasn't clear.
-
Filter by topic dropdown difficult to find
​
​
"I couldn't find the filter by topic dropdown so I couldn't complete that task"
Solutions:​
-
Change the "follow" UI from a plus symbol to a button that is labeled "Follow"
-
Bold and increase size of filter label text
Issues:
-
Left menu navigation leading to landing pages was confusing​
​
"When I'm navigating, I'm going as quickly as possible, I just saw the word 'groups' - you mean to tell me there's a "Groups" and 'My Groups'??"
Round 2 test findings
Issue:
-
When users clicked into a discussion topic, it wasn't very clear that the way to add a comment to the thread was by clicking on the comment icon under the original post.
Solution:
-
Adjust the flow so when you select a discussion to expand, the thread includes a comment field at the bottom without having to make extra clicks.
Considerations for the future
The comment popup was unexpected for some users. Reworking the commenting system on a user post should be considered.
Some users stills struggled to find and use the filters bars. It's possible the button for the filters is too similar to other UI on the page.
Include interactions (like, share, follow, comment) once clicked inside a post, instead of only a shortcut.
Suggestions beyond the community page
-
An independent landing page exclusively for jobs and opportunity postings.
-
During our usability tests, many users gravitated toward the search bar to complete their tasks, suggesting the importance of making the search bar functional for sorting content via tags.
-
An onboarding process may be useful for users once the community page is implemented.
-
An in-platform direct messaging system would allow users to interact personally with people in the CLLCTVE network.
Our design suggestions are set to go live on the CLLCTVE website as early as Spring 2022. With the added features and our additional recommendations, CLLCTVE will continue to grow as a robust platform for young creatives to connect and grow together.
CLLCVTVE
Use the final prototype
*Desktop only.