443 lines
16 KiB
Plaintext
443 lines
16 KiB
Plaintext
[1] Skip to Main Content
|
||
[2] Viget
|
||
|
||
• [3] Work
|
||
• [4] Services
|
||
• [5] Articles
|
||
• [6] Careers
|
||
• [7] Contact
|
||
• Open Menu
|
||
|
||
Navigation
|
||
|
||
[9] Viget Close
|
||
|
||
• Practice
|
||
• [11] Work
|
||
• [12] Services
|
||
• [13] Articles
|
||
|
||
We’re a full-service digital agency that’s been helping clients make lasting
|
||
change since 1999.
|
||
|
||
[14] Contact Us
|
||
|
||
People
|
||
|
||
• [15]Company
|
||
• [16]Careers
|
||
• [17]Code of Ethics
|
||
• [18]Diversity & Inclusion
|
||
|
||
More
|
||
|
||
• [19]Pointless Corp.
|
||
• [20]Explorations
|
||
• [21]Code at Viget
|
||
|
||
Featured
|
||
|
||
[22]
|
||
Read the Article: Surf’s Up: Designing a New Product for the Open Social Web
|
||
|
||
Newsletter
|
||
|
||
Surf’s Up: Designing a New Product for the Open Social Web
|
||
|
||
[23]
|
||
Read the Article: Viget Rewind: A Reimagining of Spotify Wrapped
|
||
|
||
Article
|
||
|
||
Viget Rewind: A Reimagining of Spotify Wrapped
|
||
|
||
Viget Rewind: A Reimagining of Spotify Wrapped
|
||
|
||
[eyJidWNrZXQiOiJ2Z3QtdmlnZXRjb20tYW]
|
||
|
||
• [24]Home
|
||
• [25]Articles
|
||
• [26]Viget Rewind: A Reimagining of Spotify Wrapped
|
||
|
||
[27] Subscribe (opens in a new window)
|
||
Share
|
||
|
||
• [29] Share this page
|
||
• [30] Share this page
|
||
• [31] Post this page
|
||
|
||
[32] Megan Raden
|
||
|
||
[33]Megan Raden, Quantitative UX Researcher
|
||
|
||
Article Categories: [34] #News & Culture, [35] #Data & Analytics, [36] #Product
|
||
|
||
Posted on March 26, 2025
|
||
|
||
• [37]
|
||
Share
|
||
• [38]
|
||
Share
|
||
• [39]
|
||
Post
|
||
|
||
We wanted to take the unique aspects of Spotify Wrapped—its personalized touch
|
||
and sense of community—and see what we could do with our Harvest time-tracking
|
||
data.
|
||
|
||
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
|
||
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
|
||
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
|
||
t i m e - t r a c k i n g d a t a .
|
||
|
||
A Raccoon Sticky Note
|
||
|
||
As a data nerd and someone who listens to a lot of music, I always look forward
|
||
to Spotify Wrapped. Back in November of 2024, I was eagerly Googling the
|
||
estimated release date for Spotify Wrapped when I had the idea of extending the
|
||
concept of yearly personalized data to other parts of my life.
|
||
|
||
Because Viget is an agency that works with clients, it's really important for
|
||
us to track our time. We need to know how much time we are spending on any
|
||
given day, for any one of our clients. And because we already track our time
|
||
for clients, we also track our time for internal projects and tasks. So every
|
||
year, we have a wealth of data on what anyone was working on throughout the
|
||
year.
|
||
|
||
We track our time in a tool called Harvest, and I thought, "What if we could
|
||
have a Harvest Wrapped?" We invest so much time into all of our client work and
|
||
various internal projects, how cool would it be to be reminded of what you
|
||
contributed to over the course of 12 months? So I wrote my idea down on a
|
||
raccoon sticky note to ensure I wouldn't forget to share it when it came time
|
||
to pitch ideas for our annual Pointless Palooza.
|
||
|
||
[eyJidWNrZXQiOiJ2Z3QtdmlnZXRjb20tYWxsLWFzc2V]
|
||
My raccoon shaped sticky note that I kept as a reminder for my Pointless
|
||
Palooza idea.
|
||
|
||
Pointless Palooza is our annual hackathon-style event where we try to build
|
||
something useful and/or fun in a limited amount of time. In mid-February, I
|
||
pitched my idea for Harvest Wrapped, and last week, in a 12-hour sprint across
|
||
2-ish days, our team got together to bring this to life.
|
||
|
||
Repackage and Rewind
|
||
|
||
Compared to other kinds of data reports, Spotify Wrapped is unique. Most data
|
||
reports we produce or consume are focused on conveying information that is
|
||
immediately applicable or actionable. What makes Spotify Wrapped different is
|
||
that you can look at data simply because it’s fun, and get results specific to
|
||
you. While we do get a glimpse into our behaviors and preferences in a way that
|
||
is personal, Spotify Wrapped also creates a shared experience with other
|
||
Spotify users.
|
||
|
||
We wanted to take these unique aspects of Spotify Wrapped—its personal touch
|
||
and sense of community—and see what we could do with our Harvest data.
|
||
Repackage the more technical and dry time-tracking data to let us rewind on
|
||
what our year looked like.
|
||
|
||
Unlimited Ideas but Limited Time
|
||
|
||
Unlimited Ideas
|
||
|
||
At kickoff, we allowed our imaginations to run wild. We didn’t want to limit
|
||
ourselves too early, even though we knew that scope would be a major factor due
|
||
to the limited time available. We also anticipated that wrangling the Harvest
|
||
data might be challenging, but we decided to ignore that concern for the time
|
||
being and brainstormed a variety of interesting ideas. These included both the
|
||
visual elements—like animations—and the story we wanted the data to tell.
|
||
|
||
[eyJidWNrZXQiOiJ2Z3QtdmlnZXRjb20tYWxsLWFzc2V]
|
||
Our brainstorming Whimsical board that included ideas around visuals and
|
||
function.
|
||
|
||
We considered questions such as:
|
||
|
||
• What kinds of metrics could we pull in?
|
||
• What would the overall narrative of these metrics be?
|
||
• What other metrics could we bring in?
|
||
• How can we create a sense of community or shared experience?
|
||
• How do we account for large differences in the data across individuals and
|
||
roles?
|
||
|
||
Every employee at Viget does an annual review using data from Harvest so it was
|
||
important for us to create something separate from the annual review—something
|
||
more fun, with a stronger narrative structure. It should also provide insights
|
||
that wouldn't typically be included in an annual review.
|
||
|
||
Limited Time
|
||
|
||
After brainstorming, we started to narrow in on ideas that felt both within
|
||
scope and still captured some of the fun and narrative elements we envisioned.
|
||
We decided to create a narrative centered around seasonality. The plan was to:
|
||
|
||
• Look at the different clients and projects an employee worked on each
|
||
quarter and calculate the number of hours spent
|
||
• Add seasonal, company-wide events to give a stronger sense of community and
|
||
shared experience
|
||
• Include individual highlights, such as an employee’s "Vigeversary" - the
|
||
year they started at Viget
|
||
|
||
Once we settled on this approach, we divided into two groups:
|
||
|
||
1. One group focused on implementation - how to structure and analyze the
|
||
data, and build the application.
|
||
2. The other group focused on design, copy, and narrative, working in Figma to
|
||
bring those ideas to life.
|
||
|
||
UX & Branding: Meaningful metrics and seasonal lava lamp vibes
|
||
|
||
Now that we had an overall concept, it was time to think about the details!
|
||
|
||
First was the visuals and branding for the concept. We explored how to create
|
||
seasonality without being too literal. Ambient gradients gave us enough
|
||
flexibility to create the right vibe quickly without taking the extra time for
|
||
custom illustrations, and we knew it would make for some fun potential
|
||
animations. Luckily our team developer already had a lava lamp orb animation in
|
||
his back pocket - kismet! We also quickly realized we wanted to move away from
|
||
words like “Harvest” and “Wrapped” - in the future, we could actually have data
|
||
beyond Harvest feeding into the experience. After a quick Slack brainstorm, we
|
||
settled on “Viget Rewind” instead to name our reflective experience.
|
||
|
||
[eyJidWNrZXQiOiJ2Z3QtdmlnZXRjb20tYWxsLWFzc2V]
|
||
Backgrounds used in our prototype.
|
||
|
||
In parallel, we began to mock up a few rough wireframes with an actual team
|
||
member’s data and copy, before we could access the raw data itself. It didn’t
|
||
take long to gain some quick learnings about meaningful Harvest data:
|
||
|
||
• There’s ample opportunity to provide “color” in copy alone to the
|
||
prototype. We toyed with seasonal writing to suggest timing.
|
||
• The project name data didn’t always provide the right context. “2019-2026
|
||
Support” isn’t a title that evokes lots of memory, so we needed to pair the
|
||
client and project names to make this more meaningful.
|
||
• Not every project type should be reported back. For example, sharing back
|
||
PTO hours still seemed awkward and inappropriate, no matter what copy you
|
||
put in.
|
||
|
||
Putting these together in a high-fidelity prototype in Figma made our initial
|
||
vision complete!
|
||
|
||
[eyJidWNrZXQiOiJ2Z3QtdmlnZXRjb20tYWxsLWFzc2V]
|
||
Some final screens from our figma prototype.
|
||
|
||
Building It
|
||
|
||
The first big question we had was, “How are we going to get the data out of
|
||
harvest, and into a format that shows the metrics we want?” We looked into
|
||
using the Harvest API, but quickly realized that we might spend all our time
|
||
there. So instead, with the help of some of our brilliant Vigets, we used a
|
||
tool called [40]Hasura to set up a GraphQL endpoint over a slice of a data dump
|
||
from Harvest and set up a simple static app on a self-hosted instance of [41]
|
||
Dokku.
|
||
|
||
But… we quickly got blocked by the tooling and with our limited time frame
|
||
realized we needed to adopt a simpler approach. So we boiled everything down to
|
||
the barest minimum to fetch and transform our data. From there, we worked with
|
||
[42]tidy.js to get the data structured in the way we needed, and built out the
|
||
visuals for a functional prototype. At the end of Pointless Palooza, we had a
|
||
prototype that could read in the raw data for any single individual, calculate
|
||
(some of) the necessary metrics, and show them across a couple of screens!
|
||
|
||
[eyJidWNrZXQiOiJ2Z3QtdmlnZXRjb20tYWxsLWFzc2V]
|
||
Nathan giving the Viget team a demo of our functional prototype.
|
||
|
||
With Another 12 Hours
|
||
|
||
We managed to accomplish a lot in 12 hours, but didn’t get the fully functional
|
||
prototype we had hoped we could build (though we knew that would be a long
|
||
shot). So what if the team had another 12 hours? Or another 24? Where would we
|
||
take this project next?
|
||
|
||
We could:
|
||
|
||
• Add in more metrics to show you how you spent your year at Viget.
|
||
• Create dynamic animations and chart visuals that convey scale.
|
||
• Conduct more advanced analyses that explore things like connections with
|
||
peers (e.g., who did you work with the most?) or comparisons across Viget.
|
||
• Include additional data sources into the experience, like Slack data or
|
||
blog data (e.g., number of articles published and GA4 data).
|
||
• Consider other staffing cases, like biz dev, strategy and people team.
|
||
|
||
There’s a lot more that we could do with Viget Rewind and I hope that in the
|
||
coming months, we will have a chance to work on this project again. But even if
|
||
we don’t, what we’ve already created is a testament to our existing skills and
|
||
willingness to learn and try new things. Here’s to looking forward to the next
|
||
Pointless project!
|
||
|
||
[43] Megan Raden
|
||
|
||
[44]Megan is a Quantitative UX Researcher working remotely from Mississippi.
|
||
She specializes in helping others understand the what and the why of
|
||
human-computer interaction.
|
||
|
||
[45]More articles by Megan
|
||
|
||
Related Articles
|
||
|
||
• [46]
|
||
Do I need a jacket?
|
||
|
||
Article
|
||
|
||
Do I need a jacket?
|
||
|
||
Steven Hascher
|
||
|
||
• [47]
|
||
Radical RAG: An Embeddings Experiment
|
||
|
||
Article
|
||
|
||
Radical RAG: An Embeddings Experiment
|
||
|
||
Joshua Pease
|
||
|
||
• [48]
|
||
StackStash: Taking Bookish Musings to the Next Level
|
||
|
||
Article
|
||
|
||
StackStash: Taking Bookish Musings to the Next Level
|
||
|
||
Laura Sweltz
|
||
|
||
The Viget Newsletter
|
||
|
||
Nobody likes popups, so we waited until now to recommend our newsletter,
|
||
featuring thoughts, opinions, and tools for building a better digital world.
|
||
[49]Read the current issue.
|
||
|
||
[50]Subscribe Here (opens in new window)
|
||
|
||
Site Footer
|
||
|
||
Have an unsolvable problem or audacious idea?
|
||
|
||
Let’s get to work
|
||
|
||
[51] Contact Us [52] hello@viget.com [53] 703.891.0670
|
||
|
||
• Practice
|
||
• [54]Work
|
||
• [55]Services
|
||
• [56]Articles
|
||
|
||
• People
|
||
• [57]Company
|
||
• [58]Careers
|
||
• [59]Code of Ethics
|
||
• [60]Diversity & Inclusion
|
||
|
||
• More
|
||
• [61]Pointless Corp.
|
||
• [62]Explorations
|
||
• [63]Code at Viget
|
||
|
||
Sign Up For Our Newsletter
|
||
|
||
A curated periodical featuring thoughts, opinions, and tools for building a
|
||
better digital world.
|
||
|
||
[64] Check it out
|
||
|
||
Social Links
|
||
|
||
[65] Viget
|
||
|
||
• [66]
|
||
• [67]
|
||
• [68]
|
||
• [69]
|
||
• [70]
|
||
• [71]
|
||
|
||
Viget rhymes with 'dig it'. Click here to hear how we say it.
|
||
|
||
Office Locations
|
||
|
||
• [73]Washington, DC Metro
|
||
• [74]Durham, NC
|
||
• [75]Boulder, CO
|
||
• [76]Chattanooga, TN
|
||
|
||
© 1999 – 2025 Viget Labs, LLC. [77]Terms [78]Privacy [79]MRF
|
||
|
||
|
||
References:
|
||
|
||
[1] https://www.viget.com/articles/viget-rewind-a-reimagining-of-spotify-wrapped/#content
|
||
[2] https://www.viget.com/
|
||
[3] https://www.viget.com/work/
|
||
[4] https://www.viget.com/services/
|
||
[5] https://www.viget.com/articles/
|
||
[6] https://www.viget.com/careers/
|
||
[7] https://www.viget.com/contact/
|
||
[9] https://www.viget.com/
|
||
[11] https://www.viget.com/work/
|
||
[12] https://www.viget.com/services/
|
||
[13] https://www.viget.com/articles/
|
||
[14] https://www.viget.com/contact/
|
||
[15] https://www.viget.com/about/
|
||
[16] https://www.viget.com/careers/
|
||
[17] https://www.viget.com/code-of-ethics/
|
||
[18] https://www.viget.com/diversity-equity-and-inclusion/
|
||
[19] https://pointlesscorp.com/
|
||
[20] https://explorations.viget.com/
|
||
[21] https://code.viget.com/
|
||
[22] https://www.viget.com/newsletter/surfs-up-new-product-open-social-web/
|
||
[23] https://www.viget.com/articles/viget-rewind-a-reimagining-of-spotify-wrapped/
|
||
[24] https://www.viget.com/
|
||
[25] https://www.viget.com/articles
|
||
[26] https://www.viget.com/articles/viget-rewind-a-reimagining-of-spotify-wrapped/#hero
|
||
[27] http://eepurl.com/gtHqsj
|
||
[29] https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fwww.viget.com%2Farticles%2Fviget-rewind-a-reimagining-of-spotify-wrapped%2F
|
||
[30] http://www.linkedin.com/shareArticle?mini=true&url=https%3A%2F%2Fwww.viget.com%2Farticles%2Fviget-rewind-a-reimagining-of-spotify-wrapped%2F
|
||
[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
|
||
[32] https://www.viget.com/about/team/mraden/
|
||
[33] https://www.viget.com/about/team/mraden/
|
||
[34] https://www.viget.com/articles/?category=news-culture#results
|
||
[35] https://www.viget.com/articles/?category=data-analytics#results
|
||
[36] https://www.viget.com/articles/?category=product#results
|
||
[37] https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fwww.viget.com%2Farticles%2Fviget-rewind-a-reimagining-of-spotify-wrapped%2F
|
||
[38] http://www.linkedin.com/shareArticle?mini=true&url=https%3A%2F%2Fwww.viget.com%2Farticles%2Fviget-rewind-a-reimagining-of-spotify-wrapped%2F
|
||
[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
|
||
[40] https://hasura.io/
|
||
[41] https://dokku.com/
|
||
[42] http://tidy.js/
|
||
[43] https://www.viget.com/about/team/mraden/
|
||
[44] https://www.viget.com/about/team/mraden/
|
||
[45] https://www.viget.com/about/team/mraden/
|
||
[46] https://www.viget.com/articles/do-you-need-a-jacket/
|
||
[47] https://www.viget.com/articles/radical-rag-an-embeddings-experiment/
|
||
[48] https://www.viget.com/articles/stackstash-taking-bookish-musings-to-the-next-level/
|
||
[49] https://www.viget.com/newsletter
|
||
[50] http://eepurl.com/gtHqsj
|
||
[51] https://www.viget.com/contact/
|
||
[52] mailto:hello@viget.com?subject=Hello%2C%20Viget%21
|
||
[53] tel:7038910670
|
||
[54] https://www.viget.com/work/
|
||
[55] https://www.viget.com/services/
|
||
[56] https://www.viget.com/articles/
|
||
[57] https://www.viget.com/about/
|
||
[58] https://www.viget.com/careers/
|
||
[59] https://www.viget.com/code-of-ethics/
|
||
[60] https://www.viget.com/diversity-equity-and-inclusion/
|
||
[61] https://pointlesscorp.com/
|
||
[62] https://explorations.viget.com/
|
||
[63] https://code.viget.com/
|
||
[64] https://www.viget.com/newsletter/
|
||
[65] https://www.viget.com/
|
||
[66] http://x.com/viget
|
||
[67] https://github.com/vigetlabs
|
||
[68] https://dribbble.com/viget
|
||
[69] https://www.instagram.com/viget/
|
||
[70] https://www.linkedin.com/company/viget-labs
|
||
[71] https://vimeo.com/viget/collections
|
||
[73] https://www.viget.com/dc-metro-hq/
|
||
[74] https://www.viget.com/durham/
|
||
[75] https://www.viget.com/boulder/
|
||
[76] https://www.viget.com/chattanooga/
|
||
[77] https://www.viget.com/terms-conditions/
|
||
[78] https://www.viget.com/privacy-policy/
|
||
[79] https://individual.carefirst.com/individuals-families/mandates-policies/machine-readable-file.page
|