Designing a Community Hub Client Portal
Revitalizing Healthy Campus Alberta's Community Hub: A UX Redesign for Enhanced Collaboration and Mental Health Resource Sharing.
Overview
Healthy Campus Alberta (HCA) fosters an online community of practice designed for mental health professionals working across Alberta's post-secondary institutions.
HCA utilizes BuddyPress to operate their Community Hub, a virtual space for dialogue, collaborative projects, and professional networking.
In this project, I led the redesign of the Community Hub with the primary goal of addressing the challenges faced by HCA administrators and healthcare professionals. The aim was to create an intuitive and efficient platform for virtual collaboration, enabling users to seamlessly create and share mental health resources across Alberta campuses.
The Design Process
Working within a design and development agency, our project's process was heavily influenced by the client's budget. To meet our client's needs while ensuring the importance of UX research, we adopted the following approach:
Interviews to understand the how the tool is used and what limitations it carries
Rather than asking what the client wants, I like to begin by asking how the client uses their existing tools and original what the intent was. We had two admins and one participant on the call. Together we uncovered the following key points:
Intention of the tool
"We wanted a space to create various conversation groups separated by topics so that people have a virtual space to create and collaborate on mental health resources easily."
Painpoints in use
"It's hard to stay engaged or contribute on the hub because of various bugs. I also don't know who is really active and will get back to me if I ask a question."
Takeaways from the interviews
Through the discovery session, we were able to narrow the scope of this project to answer the following three UX questions:
3
How do we build a feeling of achievement within the Community Hub for all users?
1
How can we enhance user engagement and encourage repeated use of our new portal?
2
How can we give the different users a sense of control and ownership while using the portal?
Defining the high level architecture
By meticulously organizing topics, conversations, and inner pages, we established a cohesive structure that facilitates seamless navigation and meaningful interactions among users. This strategic design aimed to foster a more connected and collaborative community, ensuring that users can easily find relevant information and participate in ongoing discussions. The outcome is a user-centric hub that enhances communication and accessibility for all members.
Topics are the overarching themes encompassing a group of conversations. Examples include "Adulting-101 Course Material 2024" or "Student Housing Resources 2024."
Reasoning: Establishing clear topics enhances the information architecture, ensuring participants can easily navigate and locate relevant conversations, reducing cognitive load and improving user satisfaction.
Conversations are collaborative spaces where participants engage in discussions. For instance, a group may create a conversation called "Resources for Substance Use Prevention" to gather existing resources on substance use on campuses and collaborate on new prevention resources.
Each topic can host multiple conversations simultaneously. Each conversation requires a unique topic, name, description, start and end dates, status, type, number of subscribed members, and options to subscribe or unsubscribe, allowing new participants to join.
The dashboard will show four types of Conversations:
Private Conversations that are invite only. These are hidden by default to Participants unless they are invited to participate by the Moderator or Admin.
Semi-Private Conversations that are visible to all Participants but require subscription access that is granted by the Moderator or Admin.
Public Conversations that any participant can read and subscribe to without requesting access.
Archived Conversations which are considered closed and read-only references from past activity.
Reasoning: By structuring conversations this way, we can make the platform scalable and flexible. This approach enhances user engagement by providing clear entry points and participation options, giving participants the freedom to engage with the areas of the hub they genuinely care about.
The introduction page of a conversation provides an overview of the discussion and lists the contributing participants. This page helps new participants understand the conversation's context and decide whether to subscribe.
Reasoning: Using an introduction page supports the onboarding process, helping new users quickly get up to speed. It also enhances transparency and trust by showing who is involved in the conversation and increases visibility and feedback.
The meeting space section enables participants to record virtual meetings that have taken place, such as through Teams or Zoom, and document outcomes within the portal. This space allows for adding meeting titles, notes, dates and times, links, and uploading attachments.
Reasoning: Integrating a meeting space supports the participants to complete their work within a single platform. This feature enhances usability by providing all necessary tools for collaboration in one place.
*If the budget of the project allowed, we would have suggested a direct integration with Teams or Zoom on the new portal so that meetings could be efficiently run from here as well.
The resource collaboration section facilitates the sharing and development of resources. Participants can share notes, attachments, links, and other materials. This area also serves as a repository for external resources gathered before meetings for new document creation.
Reasoning: Providing a dedicated resource collaboration space encourages collaborative work and knowledge sharing. This aligns with the need for flexibility and efficiency, enabling participants to access and contribute to shared resources easily.
The messaging space allows participants to introduce themselves, ask questions, network, and learn from each other. Each conversation has its own dedicated messaging area to keep discussions relevant and focused.
Reasoning: A dedicated messaging space enhances social presence and community building within each conversation. This supports the hub's goal for engagement and context-specific interaction, fostering a sense of community and relevance in discussions.
Defining the user types and their permissions
In collaboration with the client and through research and testing of their existing BuddyPress portal, we identified the four key user types for the new portal. By analyzing user interactions and behaviours on the current platform, we determined the specific permissions required for each user type. This comprehensive approach ensured that the new portal would meet the distinct needs of its diverse user base, enhancing usability and user satisfaction.
-
An unverified user is a user with a gmail/hotmail/etc. type of email account.
-
They may view a dashboard of public or semi-private conversations only. They cannot click into any of these conversations.
-
They may click subscribe from the dashboard but will need to be verified by the moderator or admin to gain access to the content. Upon verification, their account will upgrade to a Verified participant.
-
-
A verified user is a user with an email from a recognized institution or has been invited by other verified users/moderators/admins.
-
Verified users can create a Public or Semi-Private conversation under pre-existing topics or they can choose to not put it under any existing topic. If so, the admins will make a new topic for this conversation to be placed under.
-
The conversation automatically assigns the creator as a moderator. The moderator is shown a set of guidelines they need to follow.
-
They may invite others to participate in and moderate the conversation they created.
-
-
A moderator role gives the verified user additional capabilities within certain conversations.
-
A moderator can manage only conversations they have created or been added to as a moderator.
-
They can set the title, description, dates, workspaces, participants, and add other moderators to a conversation.
-
Moderators can set the status of a conversation to archived when they think the Conversation feels complete.
-
Moderators can delete content if deemed inappropriate for the conversation.
-
They may also remove subscribers from a conversation.
-
-
Admins are HCA staff and have full control over the platform.
-
Admins are the only role that can make fully Private conversations.
-
Admins can delete and ban accounts from the entire hub.
-
An admin can make other accounts have admin access.
-
An admin can make any account a moderator and assign them to any conversation.
-
Designing multiple versions of the user flow
Reconstructing the existing user flow allowed us to identify gaps and areas for improvement. After developing the initial version of the user flow, I presented the design to my teammates and clients. Through collaborative feedback, we refined and enhanced the necessary aspects. This iterative process enabled me to apply my design thinking skills to create a streamlined form creation flow.
Wireframes
With a solid understanding of the portal's flow, I began wireframing key pages, including the onboarding process, dashboard, account settings, conversation, and admin pages.
This was a highly iterative process. I created an initial set of wireframes and presented them to the client for feedback. Together, we brainstormed new ideas, which I documented in a revised set of wireframes.
Mockups
While creating mockups, I wanted to ensure that the responsiveness and scalability of the designs was of high quality. With the health care professionals being quite busy, I want them to be able to treat this web-app as a tool where they can quickly check for updates, chat with other participants, and upload resources from their laptop, tablet or mobile.
1. How can we enhance user engagement and encourage repeated use of our new portal?
To ensure participants remain engaged, I focused on creating an easy and intuitive user interface. Consistency was a key priority to make the portal as user-friendly as possible.
The menu is consistently placed on the left side of the screen across all settings and conversation pages, providing a familiar navigation anchor for users. This consistent placement helps users quickly locate and access different sections of the portal without confusion.
Additionally, the navigation bar at the top includes essential features for seamless navigation. It always provides an option to return to the dashboard, ensuring users can easily find their way back to the main hub. The navigation bar also includes a Conversation Switcher, allowing users to swiftly return to their subscribed conversations. This feature enhances the user experience by making it simple for participants to stay connected and engaged with ongoing discussions.
By maintaining a consistent and intuitive design, we aimed to create a seamless experience that encourages participants to regularly interact with the platform, thus enhancing retention.
2. How can we give the different users a sense of control and ownership while using the portal?
To give users a sense of control and ownership while using the portal, I implemented customizable notification settings, allowing participants to choose how and when they receive updates about new conversations, replies, and important announcements.
Additionally, I provided admins and moderators with robust controls for setting up and managing conversations. They can create and edit conversation topics, moderate discussions, and publish summaries. This empowered users to tailor their experience according to their preferences and roles, fostering a more engaged and self-directed community.