User Badges
Role - Product Designer
Tools - Balsamiq, HTML/CSS
The Problem
At the time the platform did not have built in functionality to handle gamification badges within communities. Community Consultants were implementing custom solutions by placing a single custom HTML module in a layout for each badge a user could have resulting in an exorbitant amount of module clutter in the admin panel and and over use of custom CSS styling to target each custom module. There was no quick and easy way to add an image as a badge to the platform and set it to show for users who had reached certain segments.
User Story
As a community admin I need the ability to create and assign badges without the need of heavy module or custom CSS implementation so that I can provide gamification elements within the community to help drive engagement.
The Solution
Create new functionality to enable admins to upload an image, provide a badge title & description, and set the badge to show only for users in certain segments through a new CRUD interface. Once a badge has been created it is called in a new module on the front end of the community.
New admin panel screen. Users are able to click the "+ Add Badge" button to generate a new badge.
After a community admin clicks the "+ Add Badge" button they are presented with a modal to upload and configure they're new badge. Users are able to upload an image, set it's title, give it a description, and select which segments will receive the badge. By updating the upload to drag & drop you increase the speed and ease at which users can upload their desired image.
Once a user has uploaded and configured badges they are presented with list layout that they are able to reorder to set the order in which badges will be displayed on the front end. Users are able to see the badge image, it's title, a description, and what segments any given badge is set to. Clicking the edit button presents returns the user to the modal shown in the previous wireframe.
Due to the highly configurable nature of the platform we often have to consider how to account for the module being placed in smaller or larger areas. To facilitate more flexibility in how the module can be used within a page layout the User Badge module has two additional options: the ability to set the initial maximum shown and how many columns to use to display badge.
Client facing example of User Badge module configured to 3 columns and a maximum of 9 badges shown. When a user has more badges than the maximum allowed shown, users are presented with the show more functionality that loads the remainder of the badges upon request.
All badges shown in the User Badge module. An additional bit of functionality added to this module is the ability to adapt different pages it's being displayed on. If the User Badge module is placed on a profile page, as seen above, it will show the badges for that specific profile. However if the User Badge module is placed on any other page it will show the current logged in user's badges.
Design Process
• Begin researching common (C)reat(R)ead(U)pdate(D)elete screen patterns.
• Explore current implementation of badges within major community sites and speak with community consultants about the pain points both they and their clients run into when using the hand rolled solution.
• Explore potential functionality requirements and white board ideas with Product owner.
• Clean up white board sketches into lo-fi wireframes to show general user flow and expected functionality.
• Present potential workflow, functionality, and layout to stakeholders from development, client services, and sales. Discuss changes to functionality based off platform or logistic limitations or revised goals and needs from stakeholders.
• Revise and update lo-fi wireframes from design presentation feedback and submit mockups to ticket for backlog grooming.
Front End Process
• Create box model as visual aid to help communicate to backend focused developers how to generate the front end DOM to facilitate the correct layout.
• Determine how much of the new UI pattern can be made from already built reusable components or which ones will need to be made from scratch.
• Create prototype of DOM structure. For all new elements provide accessibility attributes if needed, demonstrate usage of BEM class naming standards, include placeholders to signify what kind of info should be pulled from the database.
• Once the development team has built out the backend logic and tied it in to the generation of the appropriate DOM, provide base css styling for the new module to work and function at all screen sizes.
• Submit ticket for QA.
