Start April dispatch
This commit is contained in:
442
static/archive/www-viget-com-ab37cx.txt
Normal file
442
static/archive/www-viget-com-ab37cx.txt
Normal file
@@ -0,0 +1,442 @@
|
||||
[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
|
||||
Reference in New Issue
Block a user