Perspective
The Collective Profile Page serves as the single source of truth for the admins, financial contributors, team members, and future potential contributors: both financial and team and users at large. This makes information management extremely crucial for the success of the collective. The accuracy and effectiveness of the information shared is paramount. The admin responsible for the Collective Profile Page understands this responsibility and hence we want to design an interface that empowers the Admin and makes his / her job easy to do with confidence.
To achieve that, we can look at improvements of the Collective Admin experiences as goals mentioned below:
GOAL 1: Make Admin Controls easy to navigate, create, edit and delete so that admins can save time during each of their sessions using the dashboard.
GOAL 2: Make each section on the profile page distinct to communicate clearly with Admins as well as contributors.
GOAL 3: Increase engagement for contributors to ensure success for Admins as well as the Collective
Legends (Issue category):
High-level - Indicates that the issue is associated with the overall experience which can be connected to multiple detailed parts. Resolving it can have a significant impact on the product.
Detailed - Reviews the little inconsistencies that can be easy to miss while designing but surely impacts the quality of the user’s experience.
UX Audit - Collective’s page
Sr No |
Issues |
Goals |
Issue category |
Improvements |
Impact |
1 |
Lack of a single Create dropdown/button. Creating, Updating and Deleting is very difficult and requires an auto-scroll to go down. That creates friction and doesn’t provide a smooth experience for Collective Admins. |
GOAL 1 |
High-level |
To make it easy for Admins to manage the Profile Page, a Create dropdown/button can be designed that helps them to take the following actions easily and quickly. |
1. Decreased Time for Admins to manage their profiles |
- Easy to learn about all the functionality for first-time admins
- Easy to differentiate between action-oriented buttons and navigation buttons
- Can scale features without making complex designs |
| 2 | The buttons on the profile page have many variants. There are round filled buttons, highlighted buttons, and rounded square buttons which creates confusion and might look inconsistent | GOAL 1 | High-level | The number of variants can be reduced. We can stick to primary and secondary type.
A proper design system can be documented with a description and use case of each variant | 1. A/B testing will provide an impact on the click-through rate.
- Easy to replicate new buttons |
| 3 | At all times, for collective admins, there is major confusion about whether they’re seeing the public version or is it only visible to them | GOAL 1 | High-level | Clear tabs for Edit mode / Preview mode | 1. Increased user satisfaction and peace of mind about the state of their page
- Time saved in figuring out where to edit and update things |
| 4 | The majority of the actions lead to admins moving out of the collective page, thereby disrupting their page-building experience (if they’re in that phase) | GOAL 1 | High-level | Build the UX system in a way to keep the user on the page as much as possible by using slide-in modals, live editing etc.
| 1. Reduces the learning curve for users and builds greater familiarity
- Enables users to get a clear indication of the progress they’re making - ensuring more motivation to complete the task |
| 5 | Show/hide sections is not easily accessible | GOAL 1 | Detailed | Switch (show/hide) at every section in edit mode | Users can sense greater control and flexibility over their collective page |
| 6 | All the Sections on the Profile Page aren’t distinct enough to understand them.
While the current layout is simple, it doesn’t have to be. | GOAL 2 | High-level | Contribute, Budget, and Connect Section Layouts can be designed in a way that separates them visually.
The Layout can help communicate with the admins and Community Members in a more effective way.
| 1. Help reduce the learning time for each function of the Contribute, Budget, and Connect Sections.
2. Will enhance the usability
3. Will be easy to distinguish the information and value provided by each section |
| 7 | The hierarchy of information on the profile page is not clear due to the Font Sizes. Fonts Sizes and weights can be worked on to improve the readability of the information. | GOAL 2 | High-level | We need a new system for typefaces and fonts to improve readability. To make sure sections can be distinguished and information is communicated effectively, typeface and fonts need to be updated to focus on user experience | 1. Be easy on the eyes of the users
2. Will make it less confusing to make sense of each section |
| 8 | Inconsistent branding - Collective brand colour gets changed to a different colour in the design elements | GOAL 2 | Detailed | - Keep the brand colour as it is
- Use neutral colours on the collective page
- If the collective doesn’t have a custom brand colour, they can choose from | Feeling better about the sense of ownership of their collective with their brand |
| 9 | “Clickable” Tags prioritized at the beginning of the collective page can lead to user drop-off and cause them to abandon the exploration of the collective page even before starting | GOAL 3 | Detailed | Tags at the top must not be clickable that lead to “search” pages. There is already a search button in the navigation bar. | Reduce the bounce rate from the Collective pages |
| 10 | Social Media Buttons at the Top can be moved to a different place on the page to reduce users from leaving the page right at the beginning | GOAL 3 | Detailed | Move the Social Media Buttons to the About Section for that’s the section dedicated for it. | 1. Reduce Drop-off of Users
- reduce distraction for first times users by giving them the required information to understand the Collective |
| 11 | The Font Size of “Short Description” is too small | GOAL 3 | Detailed | A short description is an important piece of information to help Collective introduce themselves. Increase it’s font size can help communicate more effectively | 1. Effectively communicate the Collective’s Message to users |
MVP (Prototype demo)