www-viget-com-ab37cx.txt (16568B)
1 [1] Skip to Main Content 2 [2] Viget 3 4 • [3] Work 5 • [4] Services 6 • [5] Articles 7 • [6] Careers 8 • [7] Contact 9 • Open Menu 10 11 Navigation 12 13 [9] Viget Close 14 15 • Practice 16 • [11] Work 17 • [12] Services 18 • [13] Articles 19 20 We’re a full-service digital agency that’s been helping clients make lasting 21 change since 1999. 22 23 [14] Contact Us 24 25 People 26 27 • [15]Company 28 • [16]Careers 29 • [17]Code of Ethics 30 • [18]Diversity & Inclusion 31 32 More 33 34 • [19]Pointless Corp. 35 • [20]Explorations 36 • [21]Code at Viget 37 38 Featured 39 40 [22] 41 Read the Article: Surf’s Up: Designing a New Product for the Open Social Web 42 43 Newsletter 44 45 Surf’s Up: Designing a New Product for the Open Social Web 46 47 [23] 48 Read the Article: Viget Rewind: A Reimagining of Spotify Wrapped 49 50 Article 51 52 Viget Rewind: A Reimagining of Spotify Wrapped 53 54 Viget Rewind: A Reimagining of Spotify Wrapped 55 56 [eyJidWNrZXQiOiJ2Z3QtdmlnZXRjb20tYW] 57 58 • [24]Home 59 • [25]Articles 60 • [26]Viget Rewind: A Reimagining of Spotify Wrapped 61 62 [27] Subscribe (opens in a new window) 63 Share 64 65 • [29] Share this page 66 • [30] Share this page 67 • [31] Post this page 68 69 [32] Megan Raden 70 71 [33]Megan Raden, Quantitative UX Researcher 72 73 Article Categories: [34] #News & Culture, [35] #Data & Analytics, [36] #Product 74 75 Posted on March 26, 2025 76 77 • [37] 78 Share 79 • [38] 80 Share 81 • [39] 82 Post 83 84 We wanted to take the unique aspects of Spotify Wrapped—its personalized touch 85 and sense of community—and see what we could do with our Harvest time-tracking 86 data. 87 88 W e w a n t e d t o t a k e t h e u n i q u e a s p e c t s o f S p o t i f y W 89 r a p p e d — i t s p e r s o n a l i z e d t o u c h a n d s e n s e o f c o m 90 m u n i t y — a n d s e e w h a t w e c o u l d d o w i t h o u r H a r v e s t 91 t i m e - t r a c k i n g d a t a . 92 93 A Raccoon Sticky Note 94 95 As a data nerd and someone who listens to a lot of music, I always look forward 96 to Spotify Wrapped. Back in November of 2024, I was eagerly Googling the 97 estimated release date for Spotify Wrapped when I had the idea of extending the 98 concept of yearly personalized data to other parts of my life. 99 100 Because Viget is an agency that works with clients, it's really important for 101 us to track our time. We need to know how much time we are spending on any 102 given day, for any one of our clients. And because we already track our time 103 for clients, we also track our time for internal projects and tasks. So every 104 year, we have a wealth of data on what anyone was working on throughout the 105 year. 106 107 We track our time in a tool called Harvest, and I thought, "What if we could 108 have a Harvest Wrapped?" We invest so much time into all of our client work and 109 various internal projects, how cool would it be to be reminded of what you 110 contributed to over the course of 12 months? So I wrote my idea down on a 111 raccoon sticky note to ensure I wouldn't forget to share it when it came time 112 to pitch ideas for our annual Pointless Palooza. 113 114 [eyJidWNrZXQiOiJ2Z3QtdmlnZXRjb20tYWxsLWFzc2V] 115 My raccoon shaped sticky note that I kept as a reminder for my Pointless 116 Palooza idea. 117 118 Pointless Palooza is our annual hackathon-style event where we try to build 119 something useful and/or fun in a limited amount of time. In mid-February, I 120 pitched my idea for Harvest Wrapped, and last week, in a 12-hour sprint across 121 2-ish days, our team got together to bring this to life. 122 123 Repackage and Rewind 124 125 Compared to other kinds of data reports, Spotify Wrapped is unique. Most data 126 reports we produce or consume are focused on conveying information that is 127 immediately applicable or actionable. What makes Spotify Wrapped different is 128 that you can look at data simply because it’s fun, and get results specific to 129 you. While we do get a glimpse into our behaviors and preferences in a way that 130 is personal, Spotify Wrapped also creates a shared experience with other 131 Spotify users. 132 133 We wanted to take these unique aspects of Spotify Wrapped—its personal touch 134 and sense of community—and see what we could do with our Harvest data. 135 Repackage the more technical and dry time-tracking data to let us rewind on 136 what our year looked like. 137 138 Unlimited Ideas but Limited Time 139 140 Unlimited Ideas 141 142 At kickoff, we allowed our imaginations to run wild. We didn’t want to limit 143 ourselves too early, even though we knew that scope would be a major factor due 144 to the limited time available. We also anticipated that wrangling the Harvest 145 data might be challenging, but we decided to ignore that concern for the time 146 being and brainstormed a variety of interesting ideas. These included both the 147 visual elements—like animations—and the story we wanted the data to tell. 148 149 [eyJidWNrZXQiOiJ2Z3QtdmlnZXRjb20tYWxsLWFzc2V] 150 Our brainstorming Whimsical board that included ideas around visuals and 151 function. 152 153 We considered questions such as: 154 155 • What kinds of metrics could we pull in? 156 • What would the overall narrative of these metrics be? 157 • What other metrics could we bring in? 158 • How can we create a sense of community or shared experience? 159 • How do we account for large differences in the data across individuals and 160 roles? 161 162 Every employee at Viget does an annual review using data from Harvest so it was 163 important for us to create something separate from the annual review—something 164 more fun, with a stronger narrative structure. It should also provide insights 165 that wouldn't typically be included in an annual review. 166 167 Limited Time 168 169 After brainstorming, we started to narrow in on ideas that felt both within 170 scope and still captured some of the fun and narrative elements we envisioned. 171 We decided to create a narrative centered around seasonality. The plan was to: 172 173 • Look at the different clients and projects an employee worked on each 174 quarter and calculate the number of hours spent 175 • Add seasonal, company-wide events to give a stronger sense of community and 176 shared experience 177 • Include individual highlights, such as an employee’s "Vigeversary" - the 178 year they started at Viget 179 180 Once we settled on this approach, we divided into two groups: 181 182 1. One group focused on implementation - how to structure and analyze the 183 data, and build the application. 184 2. The other group focused on design, copy, and narrative, working in Figma to 185 bring those ideas to life. 186 187 UX & Branding: Meaningful metrics and seasonal lava lamp vibes 188 189 Now that we had an overall concept, it was time to think about the details! 190 191 First was the visuals and branding for the concept. We explored how to create 192 seasonality without being too literal. Ambient gradients gave us enough 193 flexibility to create the right vibe quickly without taking the extra time for 194 custom illustrations, and we knew it would make for some fun potential 195 animations. Luckily our team developer already had a lava lamp orb animation in 196 his back pocket - kismet! We also quickly realized we wanted to move away from 197 words like “Harvest” and “Wrapped” - in the future, we could actually have data 198 beyond Harvest feeding into the experience. After a quick Slack brainstorm, we 199 settled on “Viget Rewind” instead to name our reflective experience. 200 201 [eyJidWNrZXQiOiJ2Z3QtdmlnZXRjb20tYWxsLWFzc2V] 202 Backgrounds used in our prototype. 203 204 In parallel, we began to mock up a few rough wireframes with an actual team 205 member’s data and copy, before we could access the raw data itself. It didn’t 206 take long to gain some quick learnings about meaningful Harvest data: 207 208 • There’s ample opportunity to provide “color” in copy alone to the 209 prototype. We toyed with seasonal writing to suggest timing. 210 • The project name data didn’t always provide the right context. “2019-2026 211 Support” isn’t a title that evokes lots of memory, so we needed to pair the 212 client and project names to make this more meaningful. 213 • Not every project type should be reported back. For example, sharing back 214 PTO hours still seemed awkward and inappropriate, no matter what copy you 215 put in. 216 217 Putting these together in a high-fidelity prototype in Figma made our initial 218 vision complete! 219 220 [eyJidWNrZXQiOiJ2Z3QtdmlnZXRjb20tYWxsLWFzc2V] 221 Some final screens from our figma prototype. 222 223 Building It 224 225 The first big question we had was, “How are we going to get the data out of 226 harvest, and into a format that shows the metrics we want?” We looked into 227 using the Harvest API, but quickly realized that we might spend all our time 228 there. So instead, with the help of some of our brilliant Vigets, we used a 229 tool called [40]Hasura to set up a GraphQL endpoint over a slice of a data dump 230 from Harvest and set up a simple static app on a self-hosted instance of [41] 231 Dokku. 232 233 But… we quickly got blocked by the tooling and with our limited time frame 234 realized we needed to adopt a simpler approach. So we boiled everything down to 235 the barest minimum to fetch and transform our data. From there, we worked with 236 [42]tidy.js to get the data structured in the way we needed, and built out the 237 visuals for a functional prototype. At the end of Pointless Palooza, we had a 238 prototype that could read in the raw data for any single individual, calculate 239 (some of) the necessary metrics, and show them across a couple of screens! 240 241 [eyJidWNrZXQiOiJ2Z3QtdmlnZXRjb20tYWxsLWFzc2V] 242 Nathan giving the Viget team a demo of our functional prototype. 243 244 With Another 12 Hours 245 246 We managed to accomplish a lot in 12 hours, but didn’t get the fully functional 247 prototype we had hoped we could build (though we knew that would be a long 248 shot). So what if the team had another 12 hours? Or another 24? Where would we 249 take this project next? 250 251 We could: 252 253 • Add in more metrics to show you how you spent your year at Viget. 254 • Create dynamic animations and chart visuals that convey scale. 255 • Conduct more advanced analyses that explore things like connections with 256 peers (e.g., who did you work with the most?) or comparisons across Viget. 257 • Include additional data sources into the experience, like Slack data or 258 blog data (e.g., number of articles published and GA4 data). 259 • Consider other staffing cases, like biz dev, strategy and people team. 260 261 There’s a lot more that we could do with Viget Rewind and I hope that in the 262 coming months, we will have a chance to work on this project again. But even if 263 we don’t, what we’ve already created is a testament to our existing skills and 264 willingness to learn and try new things. Here’s to looking forward to the next 265 Pointless project! 266 267 [43] Megan Raden 268 269 [44]Megan is a Quantitative UX Researcher working remotely from Mississippi. 270 She specializes in helping others understand the what and the why of 271 human-computer interaction. 272 273 [45]More articles by Megan 274 275 Related Articles 276 277 • [46] 278 Do I need a jacket? 279 280 Article 281 282 Do I need a jacket? 283 284 Steven Hascher 285 286 • [47] 287 Radical RAG: An Embeddings Experiment 288 289 Article 290 291 Radical RAG: An Embeddings Experiment 292 293 Joshua Pease 294 295 • [48] 296 StackStash: Taking Bookish Musings to the Next Level 297 298 Article 299 300 StackStash: Taking Bookish Musings to the Next Level 301 302 Laura Sweltz 303 304 The Viget Newsletter 305 306 Nobody likes popups, so we waited until now to recommend our newsletter, 307 featuring thoughts, opinions, and tools for building a better digital world. 308 [49]Read the current issue. 309 310 [50]Subscribe Here (opens in new window) 311 312 Site Footer 313 314 Have an unsolvable problem or audacious idea? 315 316 Let’s get to work 317 318 [51] Contact Us [52] [email protected] [53] 703.891.0670 319 320 • Practice 321 • [54]Work 322 • [55]Services 323 • [56]Articles 324 325 • People 326 • [57]Company 327 • [58]Careers 328 • [59]Code of Ethics 329 • [60]Diversity & Inclusion 330 331 • More 332 • [61]Pointless Corp. 333 • [62]Explorations 334 • [63]Code at Viget 335 336 Sign Up For Our Newsletter 337 338 A curated periodical featuring thoughts, opinions, and tools for building a 339 better digital world. 340 341 [64] Check it out 342 343 Social Links 344 345 [65] Viget 346 347 • [66] 348 • [67] 349 • [68] 350 • [69] 351 • [70] 352 • [71] 353 354 Viget rhymes with 'dig it'. Click here to hear how we say it. 355 356 Office Locations 357 358 • [73]Washington, DC Metro 359 • [74]Durham, NC 360 • [75]Boulder, CO 361 • [76]Chattanooga, TN 362 363 © 1999 – 2025 Viget Labs, LLC. [77]Terms [78]Privacy [79]MRF 364 365 366 References: 367 368 [1] https://www.viget.com/articles/viget-rewind-a-reimagining-of-spotify-wrapped/#content 369 [2] https://www.viget.com/ 370 [3] https://www.viget.com/work/ 371 [4] https://www.viget.com/services/ 372 [5] https://www.viget.com/articles/ 373 [6] https://www.viget.com/careers/ 374 [7] https://www.viget.com/contact/ 375 [9] https://www.viget.com/ 376 [11] https://www.viget.com/work/ 377 [12] https://www.viget.com/services/ 378 [13] https://www.viget.com/articles/ 379 [14] https://www.viget.com/contact/ 380 [15] https://www.viget.com/about/ 381 [16] https://www.viget.com/careers/ 382 [17] https://www.viget.com/code-of-ethics/ 383 [18] https://www.viget.com/diversity-equity-and-inclusion/ 384 [19] https://pointlesscorp.com/ 385 [20] https://explorations.viget.com/ 386 [21] https://code.viget.com/ 387 [22] https://www.viget.com/newsletter/surfs-up-new-product-open-social-web/ 388 [23] https://www.viget.com/articles/viget-rewind-a-reimagining-of-spotify-wrapped/ 389 [24] https://www.viget.com/ 390 [25] https://www.viget.com/articles 391 [26] https://www.viget.com/articles/viget-rewind-a-reimagining-of-spotify-wrapped/#hero 392 [27] http://eepurl.com/gtHqsj 393 [29] https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fwww.viget.com%2Farticles%2Fviget-rewind-a-reimagining-of-spotify-wrapped%2F 394 [30] http://www.linkedin.com/shareArticle?mini=true&url=https%3A%2F%2Fwww.viget.com%2Farticles%2Fviget-rewind-a-reimagining-of-spotify-wrapped%2F 395 [31] https://x.com/intent/tweet?text=We%20wanted%20to%20take%20the%20unique%20aspects%20of%20Spotify%20Wrapped%E2%80%94its%20personalized%20touch%20and%20sense%20of%20community%E2%80%94and%20see%20what%20we%20could%20do%20with%20our%20Harvest%20time-tracking%20data.%20https%3A%2F%2Fwww.viget.com%2Farticles%2Fviget-rewind-a-reimagining-of-spotify-wrapped%2F 396 [32] https://www.viget.com/about/team/mraden/ 397 [33] https://www.viget.com/about/team/mraden/ 398 [34] https://www.viget.com/articles/?category=news-culture#results 399 [35] https://www.viget.com/articles/?category=data-analytics#results 400 [36] https://www.viget.com/articles/?category=product#results 401 [37] https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fwww.viget.com%2Farticles%2Fviget-rewind-a-reimagining-of-spotify-wrapped%2F 402 [38] http://www.linkedin.com/shareArticle?mini=true&url=https%3A%2F%2Fwww.viget.com%2Farticles%2Fviget-rewind-a-reimagining-of-spotify-wrapped%2F 403 [39] https://x.com/intent/tweet?text=We%20wanted%20to%20take%20the%20unique%20aspects%20of%20Spotify%20Wrapped%E2%80%94its%20personalized%20touch%20and%20sense%20of%20community%E2%80%94and%20see%20what%20we%20could%20do%20with%20our%20Harvest%20time-tracking%20data.%20https%3A%2F%2Fwww.viget.com%2Farticles%2Fviget-rewind-a-reimagining-of-spotify-wrapped%2F 404 [40] https://hasura.io/ 405 [41] https://dokku.com/ 406 [42] http://tidy.js/ 407 [43] https://www.viget.com/about/team/mraden/ 408 [44] https://www.viget.com/about/team/mraden/ 409 [45] https://www.viget.com/about/team/mraden/ 410 [46] https://www.viget.com/articles/do-you-need-a-jacket/ 411 [47] https://www.viget.com/articles/radical-rag-an-embeddings-experiment/ 412 [48] https://www.viget.com/articles/stackstash-taking-bookish-musings-to-the-next-level/ 413 [49] https://www.viget.com/newsletter 414 [50] http://eepurl.com/gtHqsj 415 [51] https://www.viget.com/contact/ 416 [52] mailto:[email protected]?subject=Hello%2C%20Viget%21 417 [53] tel:7038910670 418 [54] https://www.viget.com/work/ 419 [55] https://www.viget.com/services/ 420 [56] https://www.viget.com/articles/ 421 [57] https://www.viget.com/about/ 422 [58] https://www.viget.com/careers/ 423 [59] https://www.viget.com/code-of-ethics/ 424 [60] https://www.viget.com/diversity-equity-and-inclusion/ 425 [61] https://pointlesscorp.com/ 426 [62] https://explorations.viget.com/ 427 [63] https://code.viget.com/ 428 [64] https://www.viget.com/newsletter/ 429 [65] https://www.viget.com/ 430 [66] http://x.com/viget 431 [67] https://github.com/vigetlabs 432 [68] https://dribbble.com/viget 433 [69] https://www.instagram.com/viget/ 434 [70] https://www.linkedin.com/company/viget-labs 435 [71] https://vimeo.com/viget/collections 436 [73] https://www.viget.com/dc-metro-hq/ 437 [74] https://www.viget.com/durham/ 438 [75] https://www.viget.com/boulder/ 439 [76] https://www.viget.com/chattanooga/ 440 [77] https://www.viget.com/terms-conditions/ 441 [78] https://www.viget.com/privacy-policy/ 442 [79] https://individual.carefirst.com/individuals-families/mandates-policies/machine-readable-file.page