Public
Occasional Advisor

Metric Driven Animations - Profile Completion Dial

Hello all. Hope you're doing ok. I would like to share some tips and connect with others about creating real-time data visualizations in communities. Basically, graphics or animations that are driven by community metrics.  

One way we've accomplished this is using a single endpoint (Macro) with Rest that populates graphics in real time. 

Here's a video attempt on how a Profile Completion Dial Component can be created and implemented driven by metrics. It takes 5 User metrics to get 100% with the animated doughnut.

vid link

https://youtu.be/aAu5AdAToEM

What other successes have you had with this ? I'd love to discuss and learn more. 

Metrics needed with Badge Rule (the script animates and the rule issues badge) 

  • setting.profile.signature != 'default' AND
  • setting.profile.name_first != 'default' AND
  • setting.profile.name_last != 'default' AND
  • setting.profile.location != 'default' AND
  • setting.user.max_consecutive_logins >= 1 AND
  • setting.profile.biography != 'default' AND
  • setting.profile.title!= 'default'

@ryandewitt

 

Learning Content Strategist
Thanks for being here! and watching my free Digital Design Software Tutorials. Check out my maker hackLAB Channel http://youtube.com/hacklabshow/Support me u...
5 Replies 5
Honored Contributor

Neat idea, @ryandewitt - thanks for sharing!

I'd love to see more visualizations like this OOTB. It would really help spruce up the user profile and amplify gamification within the community. 👍

----------------------------------

Lili McDonald
Community Manager @ Amazon
Connect on LinkedIn
Honored Contributor

Pretty cool! Thanks for sharing.

@fuenteso @Parshant You might like this too.

Cheers

Learning from others and helping where I can!
Community Passionista!
Occasional Advisor

Thanks for the reply. 

Learning Content Strategist
Honored Contributor

Thanks for mentioning over here @Wendy_S ,

 @lilim We have created this type of same functionality and animation first time way back four years ago in 2016 to one of our customer community.

Here are some of the examples on the same that we have created similar to this.

Here are some examples videos on that:

https://share.vidyard.com/watch/mzB8c7fRxjQYaVuTXwStkd?

https://share.vidyard.com/watch/CXfstNGJ7XUFCoGcXrmbBN?

Screenshots

Example 1:

profile-completion-2.PNG

 

Example 2:

profile-completion-1.PNG

Example 3:

profile-completion-3.PNG.png

 

We have also build up these things for gamification, for users to achieve to next level and also at what stage points he is in, and numbers of points which required to reach for next level.

.......
Expecting your Kudos and Accepted Solution to my replies.

Thanks for sharing my video shows how to do it If others are interested in creating similar metric driven animations

I really like your style in your dial and be tight face nice job @Parshant 

Do you have any documentation or Scripts online for others to do this type of animation?

Learning Content Strategist

Welcome to the Technology board!

Curious about our platform? Looking to connect on social technology? You've come to the right place!

Are you a Khoros customer? For direct assistance from our Support team, please visit the Support Forum.