Empowering brands to take control over their user engagement data.
Genuin aims to help brands build vibrant communities by empowering users to create and share bite-sized video content.
By enabling brands to take ownership of raw user engagement data, Genuin is disrupting social media platforms like Instagram and TikTok. This approach allows followers to grow organically, ultimately forming a dedicated tribe. Genuin’s vision is to blend the social media experience with a robust e-commerce framework, offering maximum customization and scalability. Here’s how we worked with them to build an efficient system to support this vision
Scope of work
In late 2023, they enlisted our services to develop user journeys that extended beyond their native app, requiring a cross-platform experience. Once that was delivered, we also worked on creating a Brand Control Center to help users manage all aspects of their communities, both incoming and outgoing.
Our approach disrupted their existing product development by introducing structure, transparency, design systems, and ease of use. This is where our expertise truly shone, as we built a sustainable and user-friendly framework.
The Highlights
- Established UX patterns across the Brand Control Center for consistency and expedited development.
- Designed the moderation module to give brands maximum control over approving and monitoring community activities.
- Created the manage module from scratch, enabling users to view, edit, manage, and even create content through the control center.
Before we delve into the details of this case study, let us first explain the hierarchy of information within the Genuin ecosystem.
A user or brand creates a community. Within each community, they can create loops, which functions like playlists. Each loop consists of a collection of posts, essentially the bite-sized videos users create. This information hierarchy is crucial for keeping the platform organised and easy to navigate.
When in doubt, create UX patterns
The product design and execution for Genuin needed to be quick and iterative due to the understandable pressures of being first movers in a highly competitive market. However, a rushed approach can result in significant issues that are often only noticed after implementation, when it’s too late to address them effectively. For instance, consider the UI design below, which was provided to us as the ‘almost final version’ of the Brand Control Center.
We immediately noticed multiple ways in which this design diverged from fundamental design principles, which would inevitably lead to significant user issues. We let the client know that this approach would have to be discarded and redesigned from scratch.
Challenge:
We had to completely rethink the information distribution within the Brand Control Center, striking a delicate balance between progressing with execution and consistently providing cues for the development team to begin their work.
Solution:
We began by developing the information architecture for the platform. This helped us identify the most critical modules from a business perspective and provided a lot of insight into what sort of interactions we would need to design.
The Moderation module was identified to be one of these critical components. We chose this module as the foundation to develop our UX patterns, which could then be adapted and applied to other modules across the platform.
Here’s how we got to the structure which was approved to be taken ahead:
Here’s why option 3 is the most effective choice:
- Presenting a top-to-bottom list of tasks allows users to quickly scan all tasks and decide whether to delve deeper into them.
- The visual hierarchy in this approach enhances readability, aligning with left-to-right eye tracking.
- Introducing progressive disclosure for each individual update helps users maintain focus while taking action.
Apart from these, we also provided UX patterns for listing, modals for quick actions etc.
Establishing these design patterns early on was not only useful in providing direction to our team, but also allowed the backend developers to get started on their work without having to wait for the final designs.
Manage Module : Create, manage, track anywhere- anytime
One of the business objectives for the Brand Control Center within the Genuin ecosystem was to offer users a dedicated space to oversee their brand communities and all related activities. Additionally, there was a vision to enable users to create videos directly from this module in the future. Equipped with AI, we anticipated that this module would become one of the most frequently used features on the platform.
Challenge:
Early on, we recognized that this module would hold a substantial amount of information that would continue to accumulate over time. Additionally, users would be able to manage people associated with their community from this interface. Therefore, balancing the management of both content and people was essential for a seamless experience. Along with managing the volume of information on the screen, we also needed to ensure that all interactive elements were intuitive for users.
Solution:
This module greatly benefited from the community, loop, and post hierarchy we had established earlier. Using this structure, as well as the UX patterns we had established earlier, we were able to categorize the information into primary, secondary, and tertiary levels.
The landing screen displayed a list of all the communities created within the brand over time. Vital parameters were included in the listing to enable users to compare data sets between the communities.
The selected community page prominently split the management of content and members at the top, allowing users to focus on the details and functions of each separately. This design gave users a more concentrated view of the task at hand, enhancing their ability to manage effectively.
We meticulously designed the interactive elements, ensuring their placement was intuitive and aligned with user expectations.
We paid close attention to every detail, making sure that each arrow, button, and icon not only signified interactivity but also suggested the expected outcome. For example, the up arrow placed on the bottom right of the thumbnails indicates that a collection of images will roll up when clicked.
Similarly, we used icons to indicate that users could switch between detail mode and list view for posts by clicking on them.
Designing the manage module was a refreshing challenge that required us to delve deeply into the fundamentals of user experience design. This allowed us to effectively organize and present all possible flows at the user’s disposal.
Moderation Module : Content review made easy!
This module was designed for users to easily review and approve or reject any content within their communities. It greatly helps the brand monitor and control inappropriate activities. We created a solid experience for the moderators to access, manage, and monitor their community’s engagement data, which disrupted their dependency on traditional social media platforms for the same.
Challenge:
Once we established the purpose of this module, we proceeded to work on its contents. We realized that moderation was needed at various levels with differing priorities. Therefore, we had to ensure everything was designed to be discoverable and intuitive. Given that the module would be data-heavy, it was crucial to provide users with enough flexibility to navigate through updates in their preferred order for effective moderation.
Solution:
This was one of the most important modules from a business standpoint, as it allowed creators to control all the content posted within their community and maintain brand guidelines. Given the data-heavy nature of this module, we focused on classifying the information to ensure the most valuable details were at the forefront. We organized this information using established UX patterns for a more intuitive approach.
This classification was made on both a macro and micro level. At the higher level, we split the information into “Queued” and “History” based on the update status. The Queue contained a list of updates that the user had yet to review, while History, as the name suggests, included all past updates on which the moderator had already taken action.
Additionally, we researched and identified that the data typically falls into the following sub-categories:
Queued:
- System Generated: Content detected by the system based on user-defined settings.
- AI Moderation: Updates suggested by AI that require further manual moderation.
- User Reported: Notifications reported by users.
History:
- Approved: Updates approved by the moderator.
- Rejected: Updates rejected by the moderator.
- Removed: Content or users removed due to brand guideline violations.
We supported each type of update with a visual indicators for easy recognition.
Nielsen Norman Usability Heuristic #8: Aesthetic and Minimalist Design.
Search, filter, and sort functionalities were carefully placed to help users navigate through all updates efficiently. The predictive search and in-depth filtering options were designed to provide a seamless experience.
For example, if a user requests to join a community, we display their details such as name, overall activity, and segments they belong to on one side, and the details of the community they wish to join on the other. This provides the moderator with a structured overview of the update.
In another instance, where AI has blocked content from being posted, we show the AI’s reasoning alongside post details such as the creator, caption, date, and time.
Defining the moderation module was a valuable exercise, as it allowed us to establish the desktop design structure while ensuring consistency with the mobile design for a better user experience. This process also helped us gain a deeper understanding of the platform and fostered collaboration with the various teams at Genuin.
Outcome
When Genuin initially approached us, their defined project scope was limited to assembling and refining the experience of the Brand Control Center, using their existing assets and UI elements.
However, our involvement quickly uncovered deeper issues. It became evident that significant enhancements were needed to truly elevate the platform to a high standard of user experience.
We disrupted the existing design by going back to the basics, thoroughly revising the information architecture, and establishing new UX patterns for key modules like Manage and Moderation. Through these deliberate design efforts, we crafted a platform that offers a consistent and intuitive user experience.
