Visualizing Fantasy Hockey Schedules

I have a new obsession. Fantasy hockey. The slot-machine-like dopamine hit when you get lucky mixed with the numbers-heavy analysis of trying to squeeze the most out of each week has really got me hooked.

So I thought I’d put all this analysis to use by practicing my visual display of quantitative data.

I’m about to go into fantasy hockey playoffs and I’ve been doing a bunch of number crunching, focusing on the schedules of various NHL teams. The idea is that if I pick up half-decent players who play a lot of games in a given week, they’ll score me more points than great players who have a bad schedule.

Two of my great players, Taylor Hall and Dustin Byfuglien, have been dealing with long-term injuries lately, so my only hope at winning is to maximize my games played.

To do that, I need to pick up players from teams who not only play the most games, but also play on quieter “off nights”. Here’s the logic I used.

  • Any day where 20 or more out of the NHL’s 31 teams play is a busy night.
  • Fewer than 20, I call an off night, because chances are, you won’t have too many benched players on those nights.

My favorite podcast, Fantasy Hockey Podcast, does a great job at highlighting the teams with the best and worst schedules each week, but I wanted to know well in advance and I wanted to see all the teams.

So I made this.

Schedule comparison charts- 2019 fantasy hockey playoffs

Starting with my league’s quarterfinals (March 4-10), I made a chart that breaks down every team’s schedule into off nights and busy nights.

Quarter-Finals

Fantasy hockey schedule analysis- March 4-10. 
ANA has 3 Off nights and 1 busy nights.
CGY has 3 Off nights and 1 busy nights.
FLA has 2 Off nights and 2 busy nights.
BOS has 1 Off nights and 3 busy nights.
DET has 1 Off nights and 3 busy nights.
LAK has 1 Off nights and 3 busy nights.
PIT has 1 Off nights and 3 busy nights.
WSH has 3 Off nights and 0 busy nights.
TOR has 2 Off nights and 1 busy nights.
VGK has 2 Off nights and 1 busy nights.
WPG has 2 Off nights and 1 busy nights.
BUF has 1 Off nights and 2 busy nights.
CAR has 1 Off nights and 2 busy nights.
EDM has 1 Off nights and 2 busy nights.
MIN has 1 Off nights and 2 busy nights.
MTL has 1 Off nights and 2 busy nights.
NJD has 1 Off nights and 2 busy nights.
STL has 1 Off nights and 2 busy nights.
VAN has 1 Off nights and 2 busy nights.
ARZ has 0 Off nights and 3 busy nights.
COL has 0 Off nights and 3 busy nights.
CBJ has 0 Off nights and 3 busy nights.
DAL has 0 Off nights and 3 busy nights.
NYI has 0 Off nights and 3 busy nights.
NYR has 0 Off nights and 3 busy nights.
OTT has 0 Off nights and 3 busy nights.
TBL has 0 Off nights and 3 busy nights.
PHI has 1 Off nights and 1 busy nights.
CHI has 0 Off nights and 2 busy nights.
NSH has 0 Off nights and 2 busy nights.
SJS has 0 Off nights and 2 busy nights.
NHL schedule analysis for March 4 to 10, 2019

As you can see in the chart above, Anaheim (ANA) and Calgary (CGY) have the best schedules, with 3 “off nights” and 1 “busy night” each. I’d better load up on Ducks and Flames!

Actually, sorry Anaheim, but you’re terrible. I’d better load up on Flames.

Teams like Chicago (CHI), Nashville (NAS), and San Jose (SJS) have the worst schedules, with 2 “busy nights” each and no “off nights”. That means that players from Calgary are at least twice as valuable as players from Chicago this week.

One thing that this chart doesn’t take into account is the strength of opponents or back-to-back games. I haven’t checked, but if both of Chicago’s games are against a terrible team like Anaheim who are tired because they’re on the second game in two nights, then maybe I shouldn’t completely write off Chicago players. Or if Calgary is playing only against top-tier teams, then maybe I shouldn’t jump right on them.

Semifinals

I made the same charts for Semifinals as well:

Fantasy hockey schedule analysis- March 11-17. NJD has 4 Off nights and 0 Busy nights.
ANA has 3 Off nights and 1 Busy nights.
CBJ has 3 Off nights and 1 Busy nights.
DAL has 3 Off nights and 1 Busy nights.
EDM has 3 Off nights and 1 Busy nights.
NYR has 3 Off nights and 1 Busy nights.
PHI has 3 Off nights and 1 Busy nights.
TOR has 3 Off nights and 1 Busy nights.
ARZ has 2 Off nights and 2 Busy nights.
BUF has 2 Off nights and 2 Busy nights.
MIN has 2 Off nights and 2 Busy nights.
NYI has 2 Off nights and 2 Busy nights.
PIT has 2 Off nights and 2 Busy nights.
SJS has 2 Off nights and 2 Busy nights.
STL has 2 Off nights and 2 Busy nights.
COL has 3 Off nights and 0 Busy nights.
VAN has 3 Off nights and 0 Busy nights.
CGY has 2 Off nights and 1 Busy nights.
CAR has 2 Off nights and 1 Busy nights.
CHI has 2 Off nights and 1 Busy nights.
BOS has 1 Off nights and 2 Busy nights.
DET has 1 Off nights and 2 Busy nights.
FLA has 1 Off nights and 2 Busy nights.
MTL has 1 Off nights and 2 Busy nights.
NSH has 1 Off nights and 2 Busy nights.
OTT has 1 Off nights and 2 Busy nights.
TBL has 1 Off nights and 2 Busy nights.
WSH has 1 Off nights and 2 Busy nights.
WPG has 1 Off nights and 2 Busy nights.
VGK has 2 Off nights and 0 Busy nights.
LAK has 0 Off nights and 2 Busy nights.
NHL schedule analysis for March 11 to 17, 2019

In the second week of March, my league’s semifinals, the New Jersey Devils (NJD) have the best schedule. Stay away from the LA Kings (LAK)! And the Ducks… even though they have the second-best schedule… because they’re the Ducks.

Finals

And here’s the same chart for the finals.

Fantasy hockey schedule analysis- March 18-24. VAN has 3 Off nights and 1 Busy nights.
WSH has 3 Off nights and 1 Busy nights.
ARZ has 2 Off nights and 2 Busy nights.
CHI has 2 Off nights and 2 Busy nights.
TBL has 2 Off nights and 2 Busy nights.
WPG has 2 Off nights and 2 Busy nights.
CAR has 1 Off nights and 3 Busy nights.
COL has 1 Off nights and 3 Busy nights.
MTL has 1 Off nights and 3 Busy nights.
NYI has 1 Off nights and 3 Busy nights.
PHI has 1 Off nights and 3 Busy nights.
ANA has 2 Off nights and 1 Busy nights.
SJS has 2 Off nights and 1 Busy nights.
CBJ has 1 Off nights and 2 Busy nights.
LAK has 1 Off nights and 2 Busy nights.
MIN has 1 Off nights and 2 Busy nights.
OTT has 1 Off nights and 2 Busy nights.
TOR has 1 Off nights and 2 Busy nights.
VGK has 1 Off nights and 2 Busy nights.
BOS has 0 Off nights and 3 Busy nights.
CGY has 0 Off nights and 3 Busy nights.
DAL has 0 Off nights and 3 Busy nights.
DET has 0 Off nights and 3 Busy nights.
EDM has 0 Off nights and 3 Busy nights.
FLA has 0 Off nights and 3 Busy nights.
NSH has 0 Off nights and 3 Busy nights.
NJD has 0 Off nights and 3 Busy nights.
PIT has 0 Off nights and 3 Busy nights.
STL has 0 Off nights and 3 Busy nights.
BUF has 1 Off nights and 1 Busy nights.
NYR has 0 Off nights and 2 Busy nights.
NHL schedule analysis for March 18 to 24, 2019

This week, try to stay away from the New York Rangers. The Vancouver Canucks and the Washington Capitals will treat you well.

Final three weeks combined

This felt less-useful for me because there isn’t as stark of a difference between the best and worst schedules, but I also created a chart for the final three weeks combined.

Fantasy hockey schedule analysis- March 4-24. ANA has 8 Off nights and 3 Busy nights.
ARZ has 4 Off nights and 7 Busy nights.
NYI has 3 Off nights and 8 Busy nights.
PIT has 3 Off nights and 8 Busy nights.
VAN has 7 Off nights and 3 Busy nights.
WSH has 7 Off nights and 3 Busy nights.
TOR has 6 Off nights and 4 Busy nights.
CGY has 5 Off nights and 5 Busy nights.
NJD has 5 Off nights and 5 Busy nights.
PHI has 5 Off nights and 5 Busy nights.
WPG has 5 Off nights and 5 Busy nights.
CAR has 4 Off nights and 6 Busy nights.
CBJ has 4 Off nights and 6 Busy nights.
COL has 4 Off nights and 6 Busy nights.
EDM has 4 Off nights and 6 Busy nights.
MIN has 4 Off nights and 6 Busy nights.
DAL has 3 Off nights and 7 Busy nights.
FLA has 3 Off nights and 7 Busy nights.
MTL has 3 Off nights and 7 Busy nights.
STL has 3 Off nights and 7 Busy nights.
TBL has 3 Off nights and 7 Busy nights.
BOS has 2 Off nights and 8 Busy nights.
DET has 2 Off nights and 8 Busy nights.
BUF has 4 Off nights and 5 Busy nights.
CHI has 4 Off nights and 5 Busy nights.
SJS has 4 Off nights and 5 Busy nights.
NYR has 3 Off nights and 6 Busy nights.
LAK has 2 Off nights and 7 Busy nights.
OTT has 2 Off nights and 7 Busy nights.
VGK has 5 Off nights and 3 Busy nights.
NSH has 1 Off nights and 7 Busy nights.
NHL schedule analysis for March 4 to 24, 2019

Once again, Anaheim comes up on top in terms of schedule. I’d still urge you to stay away from them because they’re Anaheim. Stay away from Nashville as well!

What do you think?

Fantasy hockey enthusiasts: Is this useful for you? What might make it more useful? Let me know in the comments!

Friends and family: You probably already knew I was a nerd, but not THIS big of a nerd. I’m sorry you had to find out this way. If you want to unfriend me, I understand.


Appendix: My process

I started by grabbing the NHL schedule in Google Sheets format then doing a bunch of formulas and conditional formatting.

Screenshot of a cluttered spreadsheet
Initial number crunching in Google sheets

I then got to sketching on paper, which helped me figure out what was important (total games, off nights, and busy nights) vs. what was just noise (the actual days of the week of games).

Photograph of a sketch on paper
My sketch was where I figured out that these charts needed to be sorted and simplified.

Then I messed around more in Google Sheets, calculating, sorting, slicing and dicing.

Google sheets spreadsheet showing color-coded schedules taking shape.
Here is where I debated between correlating the games to the days of the week and just showing the numbers.

After that, it was just a matter of playing with the chart configuration and styling.

Google sheets screenshot showing two versions of the same chart, as well as the background calculations
Here is where I decided that I didn’t need as many details on my “combined” chart.

As you can see in the above screenshot, I also used Sheets to generate alt text for my graphics. This means that even vision-impaired users will be able to read this blog post!

If I had more time, I’d shine up the charts by exporting them into Sketch and removing some of the non-essential visual elements. But I don’t!

Check out my latest posts

Liked what you saw here? I blog once a month on tech, User Experience, biking, and more! See some of my most-recent work below.

Advertisements

Graduating from Duolingo

I recently reached a huge milestone: a 1000-day streak on Duolingo.

And I QUIT!

Yes, Duolingo has delightful illustrations and animations. It is completely free and doesn’t show TOO many ads. It covers all the bases- Theory, Reading, Writing, Speaking, and Listening. And best of all, it is super motivating.

But for Intermediate language learners, it’s just not worth it.

Duolingo logo

Do you visit Duolingo for a couple minutes a day to mindlessly tap through some exercises with words that you already know? Do you still not have the confidence to strike up a conversation with a French-speaking acquaintance? That was me. But not any more.

I’m now dedicating my daily French practice to these: my favorite resources for intermediate to advanced language learners.

The best free resources for intermediate French learners

Graphic comparing resources:
1) Duolingo. Low difficulty, High convenience. Covers: theory, reading, writing, speaking, listening.
2) Coursera. Medium difficulty, Medium convenience. Covers: theory, reading, writing, speaking, listening.
3) Kwiziq French. All difficulties, Medium convenience. Covers: theory.
4) Meetup. Medium to high difficulty, Low convenience. Covers: speaking, listening.
5) Youtube. All difficulties, High convenience. Covers: theory, speaking, listening.
6) Netflix. All difficulties, High convenience. Covers: reading, listening.
7) Magazines. Medium to high difficulty, High convenience. Covers: reading.
8) Ici Musique Radio. Medium to high difficulty, Medium convenience. Covers: listening.
9) Learn French by Podcast. Medium difficulty, medium convenience. Covers: speaking, listening.
The best free resources for intermediate French learners. Yes, Duolingo is convenient and touches on all skills, but it can be too easy after some time. Here are the icons I’ve stolen:

Brain by Arjun Adamson from the Noun Project; Book by Sergey Demushkin from the Noun Project; Writing by andriwidodo from the Noun Project; speak by Gregor Cresnar from the Noun Project; Listen by Rémy Médard from the Noun Project; magazine by Diego Naive from the Noun Project

Coursera

I’m currently working through the six-week Coursera course, Étudier en France: French Intermediate course B1-B2. This course terrified me initially. They talk SO fast in the videos and all the other students seem way better than me- but I am working my way through it and I even got 95% on my first assignment!

It’s no Duolingo, meaning you can’t get through this Coursera course solely on 3 distracted minutes a day while waiting in line for a coffee, but the app is decent and the work is quite bite-sized, including short videos, reasonable reading assignments, and 150-word writing assignments.

My only complaint about Coursera is that this is the only French language course on the site, so after these six weeks, I’ll be moving on.

Kwiziq French

Kwiziq French is great. Like Duolingo, it has short, bite-sized online exercises that help you learn little by little. Unlike Duolingo, it requires a bit of reading. Kwiziq gives you ten “topics” at a time to review, then a “Kwiz” to test your understanding of those topics.

It is broken down into the following CEFR levels:

A0: Entry Level, A1: Beginner, A2: Lower Intermediate, B1: Intermediate, B2: Upper Intermediate, and C1: Advanced.

Duolingo is focused on the A level, so Kwiziq can take you a lot further.

So far, Kwiziq’s free plan of 10 kwizzes per month has been more than enough for me, but I’d consider paying for unlimited access because the content is very high quality.

Meetup

Just search for “French conversation” in your city on Meetup. Chances are, you’ll find a group of friendly, supportive language learners who meet regularly and welcome newcomers. Yes, it’s intimidating and hard, but it’s the quickest way to learn spoken French!

Youtube

Paul Taylor, Comme une Française , and more. There are a million YouTube channels, ranging from comedy in French to pronunciation for beginners. I won’t say much more than that. Dig around and see what you find!

Netflix

Yes, Netflix. Most shows and movies on Netflix offer French subtitles, so I am proud to say that my French wouldn’t be where it is today if it weren’t for Black Mirror.

I haven’t watched any French language films or shows on Netflix but those are also great- with or without English subtitles!

I know Netflix isn’t free but if you’re paying for Netflix anyway, then turning on French subtitles IS a convenient and free way to learn.

Bilingual travel magazines

I was lucky enough to take the Eurostar from London to Paris to celebrate my 29th birthday. On the train ride down, I devoted my attention not to the beautiful French countryside, but to the Metropolitan Magazine.

I loved struggling through the French articles with the English right there beside it. I would get the gist of the article in French, then check the English to see if I got it right.

WestJet and Air Canada also have bilingual magazines, so I always look forward to flying within Canada!

Canadian public radio

Speaking of Canada, French learners can benefit from our two-official-languages policy by listening to French-language stations of the CBC, the Canadian Broadcasting Corporation.

Sure, Spotify has lots of good French music, but I find that they have a lot of ads unless you pay for Premium.

CBC’s Ici Musique has the same great French music, but without the ads. And, as an added bonus, they have news updates so you can get used to hearing spoken French.

Learn French by Podcast

Learn French by Podcast is great because there’s LOTS of content. 195 episodes over 12 years. The earlier ones are a bit easier than the later ones, so it’s great to just binge on from the start. What I like about this podcast is that they have a short conversation (which I usually find hard to follow), then break down certain phrases, explaining what was said and why. They also encourage practicing pronunciation with lots of “repeat after me” exercises. Another nice thing about podcasts in general is that if they’re too hard you can slow down playback. Too easy? Speed it up!

Kids’ books

It’s not free, but I’m adding French kids’ books as an honorable mention.

When I was in Thailand a year ago, I stumbled upon a used book store. They had a French section. I looked through some classic novels, longing to be able to read them. Then I found myself being drawn to a brightly colored, pint-sized book entitled Deux filles pour un cheval, or Two girls for one horse.

Book cover for Deux filles pour un cheval
I highly recommend this book, even if you’re not a 10-year old French girl

I loved reading that book. I underlined words that I didn’t know, then looked them up later and wrote the definition in the margins of the pages. It was a great way to learn.

FluentU

I haven’t tried FluentU yet, but they are one of the seven resources featured in this article: Stuck in the Middle: 7 Resources for Intermediate French Lessons to Get You Unstuck

Any others?

Did I miss any great resources for Intermediate French learners? Leave me a comment!

It takes a village

I was a programmer from 2012 to 2017. I realized during this time that my impact would multiply if I could focus on the design instead of being the one to code it.

Early in 2018, after years of reading, taking courses, and experimenting with UX, my dream came true: I was hired as a UX Designer. I’m almost at the one-year mark of this new career of mine and I’m using this milestone as an excuse for gratitude.

They say it takes a village to raise a child. It also took a village for me to make this career switch. My switch definitely wouldn’t have been possible without these people.

Rob Ursem, manager 2012-2015

Rob was my first manager as a programmer. When I was working for him I’d have endless ideas and suggestions about usability and design. Rob saw this enthusiasm and recommended some books for me to read. Design of Everyday Things. The Inmates are Running the Asylum. Many more. Without him I wouldn’t have even known that User Experience was an actual job. I’m so grateful for Rob for that.

Andrew Wright, meetup coordinator

Soon after I finished reading the book the Inmates are Running the Asylum, the local meetup group Calgary UX featured it in their book club. What an awesome coincidence! So I worked up the courage and went to the meetup.

The whole premise of that book is how programmers have way too much say in how software is designed. I was a programmer when I read the book, so I was one of the inmates who was running the asylum! I was shocked at how welcoming the meetup was, especially the organizer Andrew, even though I felt like such an outsider.

I’ve been in touch with Andrew ever since then and he’s never stopped being that welcoming, knowledgeable, and helpful presence for me.

Meghan Armstrong, unofficial mentor

I also met Meghan through Calgary UX and she has been so kind and helpful through the years. On many occasions, she has taken the time to meet with me, including helping me with my portfolio when I was first thinking of making the move into UX.

She also taught me a great introductory course on UX through Habanero, which gave me a lot of confidence to start trying things out at work.

Jason Grant, UX role model

Jason is a design leader. He works with an impressive list of clients, is active in the London tech community, and even talked shop with me a few times. I interviewed him in 2017 and have been watching his career for years.

He’s now the founder of Integral, striving to “continuously deliver latest Integral and Design Thinking models to 1 billion community worldwide”.

Mark Plant, unofficial mentor

I wrote about Mark in 2017 as we were working through a design side-project together. This project started with me offering to buy a coworker a coffee. It ended with me learning about managing a corporate design system, appreciating marketing and the sales funnel, and gaining confidence in my design skills.

Meaghan Nolan, official mentor

Meaghan was my mentor in the Chic Geek mentorship program in the first half of 2018. She was the perfect guide for me as I researched UX Maturity, having co-authored a book on design maturity. She is currently doing impressive work with her startup Mikata Health.

Stuart Jones, manager 2018 and beyond

While Stuart was thinking of moving from London to Calgary in 2015, I was moving from Calgary to London. We met up a few times in London after I made the move, and he answered all the UK and UX questions I could throw at him.

Fast-forward a couple years to when I returned to Calgary. Stuart and his family had settled in and his employer, Solium, happened to be hiring! A few interviews and a job offer later, and I was finally a UX Designer.

My advice to you

If you are making a career move, go out and meet some people who are already doing your dream job.

If that dream job is User Experience, reach out to me. It’s my turn to return the generosity of these great mentors!

Killing your darlings

Last month I wrote about my process of designing what I called vesting sparklines. I was super excited about them because they packed so much information into a small area and because they made so much sense to me.

There is nothing like the moment when you suddenly come upon the answer to a design problem. Whether it is a particular interaction or the perfect design element, it is a moment of pure elation.

-Joshua Brewer, 52 weeks of UX

Testing my idea

When I showed a couple coworkers an early version, they were extremely confused. They wanted to understand but even with me there explaining it to them, it took a while. Even then, they didn’t seem to love it.

And these are patient, smart people, open to the idea.

Users are typically in a rush, distracted, and resistant to change.

But that’s okay, I thought, it’s just an early version.

Tweaking my idea

So I added a detailed modal to my prototype, so that if you click the sparkline you see a carefully labeled version of it with a table showing all the data below. Hover any piece of the chart and the appropriate table row lights up. Hover any row and the appropriate bar on the chart lights up.

Retesting my idea

Recently, another group of coworkers was discussing showing a timeline of events. I couldn’t contain my excitement so I called them over to my desk and showed them my sketch file with the table and the hover and everything.

It fell flat. Again.

Five brilliant people, all very knowledgeable in the world of equity compensation, didn’t understand it. So I explained. And explained. And it still wasn’t clear.

Example chart of price vs. quantity for upcoming equity vests

Part of my “improved” design: simple, right? Wrong!

Then a coworker asked “What pain point is this solving?”

Oh. Yeah. That.

The problem with my idea

My problem with this idea was that it wasn’t directly addressing a known user need. It was just an exercise I came up with based on the Tufte book I read.

They say when the only tool you know how to use is a hammer, everything looks like a nail. I was wielding my Tufte hammer and swinging it all around, not realizing that there were no nails sticking out.

Another lesson here is that even designers are guilty of self design. I’ve always been an Excel nerd, in love with spreadsheets and data and graphs. Most normal people aren’t. So while the sparklines I designed may have been perfect for me, they were utterly baffling for most other people.

Killing my idea

It’s hard to do, but as a designer, sometimes you need to kill your darlings.

So goodbye vesting sparklines. It was nice knowing you.

On the bright side

While designing this, I taught myself how to get API responses from the Chrome inspector, turn that json into csv, and play with it in Excel. This has already come in handy in a real work situation when we wanted to dig into the responses of the API when testing some recent work.

Also, I enjoyed the process of creating this design. It was truly eye-opening to test the it and see what people thought about it. Those tests didn’t go as planned, but that’s why we test!

Fall out of love with your ideas and fall in love with your process.

Chirryl-Lee Ryan

Visualizing vesting schedules

I recently wrote about the book The Visual Display of Quantitative Information by Edward Tufte.

That book inspired me to explore ways of visualizing the vesting of savings and awards.

Background

Skip this section if you know equity!

Vesting

Vesting is when stock or cash becomes available. This allows companies to reward their employees for staying with them for a long time. Savings plan matching and stock options are two examples of

Savings plan matching

Savings plan matching encourages employees to save for their future. For every dollar an employee saves, the company will contribute a certain amount. This happens every paycheck. That company contribution is often subject to vesting. In other words:

Dear employee, you saved $1. Good job. You can have this quarter… but only if you are still working here one year from now.

Stock options

Stock options freeze the price of a certain number of shares for employees, who can then buy them a few years later. It’s like:

Dear employee, the stock price today is $30. If you’re still working for us in two years you can buy 200 shares for that price. In three years you can buy 100 more. And in four years 100 more!

Why?

This promise of future money is a win-win. It helps the employee because they get rewarded. It benefits the company because employees are owners too and are less likely to leave. Some people call it “the golden handcuffs”; I like to think of it as a carrot on a stick. There’s always some money just out of reach, which encourages employees to stay.

Résultats de recherche d'images pour « bugs bunny carrot on a string »

Kind of like Bugs Bunny motivating himself with a carrot on a stick

My process

Vesting and employee equity can be hard to explain but once you get it, you get it. I’ve spent a lot of time lately exploring ways of representing equity visually.

I have done a ton of sketching. And thinking. And sketching again. It’s funny how ideas in your head can seem perfect but their flaws are revealed when the pen hits paper.

Initially I explored the idea of plotting time vs quantity of upcoming vest events.

That didn’t always work because there are often large gaps between vest events. So I decided to order the vest events by date instead of scaling by date.

Here are some of my sketches.

IMG_2356-COLLAGE

A collection of sketches. Spot the coffee stain!

I settled on a sparkline showing the quantity of vest, the award price, and the market price. What I like about this is that the area of each shape is proportional to its value. It explains complex concepts like stock options vs. RSUs at a glance.

I’ll illustrate this with an example. For a fictional employee with a few savings plan contributions and a recent stock option grant, the raw data might look something like this:

Type Vest Date Quantity Grant Price Current Market Price Estimated Value
Savings plan 01-Aug-19 10 $0 $103.30 $1,033.00
Savings plan 15-Aug-19 11 $0 $103.30 $1,136.30
Savings plan 01-Sep-19 12 $0 $103.30 $1,239.60
Savings plan 15-Sep-19 11 $0 $103.30 $1,136.30
Savings plan 01-Oct-19 9 $0 $103.30 $929.70
Savings plan 15-Oct-19 8 $0 $103.30 $826.40
Stock option 28-Sep-20 50 $114.23 $103.30 -$546.50
Stock option 28-Sep-21 25 $114.23 $103.30 -$273.25
Stock option 28-Sep-22 25 $114.23 $103.30 -$273.25

There’s a lot to digest here. And this is a simple example. For many employees, we have to limit the number of vests that we show because there are too many. But it becomes much more visual and compact if we represent it using what I like to call a vesting sparkline.

vesting sketch

A vesting sparkline for the data in the above table. Note the savings plan vests on the left and the (underwater) stock option vests on the right.

What I love about this is that it reduces all the complexity with grant prices and vesting timing into simple geometry!

The area of each box is proportional to its value. The savings plan vests are narrower because they’re smaller, but their $0 grant price makes them quite valuable. The option vests are currently underwater, meaning their grant price is higher than the market price. But if the price jumps, they’ll be much more valuable than the savings plan vests.

I think this idea has potential.

Or am I crazy?

I’ve obsessed over these sparklines on and off for a month. I’m way too close to them to be objective. So, readers, please let me know if this idea sucks!

And more importantly, I need to try these charts out with real data. What will it look like for typical Australian employees? What about German executives?

If I’m satisfied that I can cover all cases with the design, I’ll then test prototypes with coworkers and real customers. Do they understand what they’re looking at? How can I tweak the design to help?

I’m hoping that this will make it into production but even if it doesn’t at least I had fun doing it!

The Visual Display of Quantitative Information by Edward Tufte- Book Review

“A little light reading, hey?” the doctor from Pennsylvania asked me on a recent flight. “Do you have to read that for a course or something?”

“No,” I said as I showed him a fascinating chart of Napoleon’s army’s advance to and retreat from Russia, “I’m actually just reading it for fun.”

And despite the fact that the cover looks like required reading for a 1960’s advanced course in Macroeconomics, it WAS fun.

The book

Even the cover is fascinating. The graph on it looks like a meaningless jumble of lines, but it actually contains the entire train schedule of France from 1885. It is so rich in information and so elegant. It’s a thing of beauty.

IMG_2152.JPG

The beautiful cover of the book

The book goes on to highlight many amazing graphs, as well as a few counter-examples, and explains what makes them good or bad.

It all boils down to just a few principles. The ones that stuck with me were:

  • Don’t waste “ink” on unnecessary or distracting “chartjunk”,
  • don’t use a chart when a table will do, and
  • don’t lie.

An example of wasted ink included using internal grid lines, which often reduce the readability of the actual data. This should be avoided.

As for using charts vs. tables, the “magic number” that Tufte gave was 20. If there are fewer than 20 pieces of data, it’s often better to print those values directly in a table than for to abstract them into a chart.

The book contained several examples of charts that lie. The biggest offense was shifting axes for some or all of the data in a chart to make the data seem better or worse than it actually is. Tufte also recommended adjusting monetary values for inflation whenever possible.

Applying these ideas

I work as a UX designer for Solium, an equity compensation software company. What does that mean in English? Many companies reward their employees by giving them ownership through things like stock options and savings plans. Solium makes software that helps those companies keep track of these plans.

We recently released a redesigned interface for these employees (participants). These participants have appreciated the new interface, though there are still a few important questions that it doesn’t fully answer for them. One of which is “When am I going to get my money?” because these equity compensation programs usually have what’s called vesting, where rewards are only released after the recipient has worked for the company for a certain amount of time, usually 1-4 years.

I’m now working on a simple, compact, easy-to-learn chart that shows the vesting schedule for a participant. It may never end up being released in our software, but it’s definitely been a fun exercise exploring different concepts based on what Tufte taught me!

IMG_2154

Some of my sketches for vesting schedule visualizations

For details on these charts, see Visualizing vesting schedules.

Definitely worth a read!

Anyway, The Visual Design of Quantitative Information was a great read. I’d definitely recommend it if you work with data or are curious about how these things work… Or if you want to impress that doctor sitting next to you on a flight.

Using Airtable to store research nuggets

I started at Solium in January. They did a full day of usability testing for World Usability Day in the previous November but hadn’t yet got through analyzing all of the videos. It’s a small team and other priorities got in the way.

Around that time, I listened to a Tomer Sharon interview on Mixed Methods, a UX Research podcast that I highly recommend.

In that interview, Sharon discussed how UX Research usually ends up in reports that are read once then forgotten, and how non-researchers make observations about users every day that aren’t documented.

The answer?

Track every observation, or nugget in the same place. The nugget is the atomic unit of research, not the report.

This prevents research from being forgotten, it gives transparency to how research is interpreted, and it “democratizes UX” by potentially allowing non-researchers to contribute and search research findings.

 

Here’s what I did

So I copied Tomer Sharon’s “Polaris UX Nuggets” base.

Screenshot 2018-06-21 06.08.34.png

Tomer Sharon’s Polaris UX Nuggets database- available for you to copy!

I knew that this wouldn’t be adopted by my team if it was too much work, so I simplified. And simplified some more. Including:

  • Removing provocations, journeys, acts, scenes, props, and sets
  • Combining “Experience Vector” and “Magnitude” because they’re two measures of the same thing and because “High Neutral” doesn’t mean anything. Thanks Cong for suggesting this!

Then tried it out.

Then documented.

Then tested it with a teammate.

Then moved our videos from Dropbox to a private YouTube channel and added a function to timestamp the nugget url. Thanks Jason for suggesting this!

Then tested it with another teammate.

Then simplified by creating a simple form with only 3 mandatory fields. Far more efficient and less overwhelming than dealing with a giant database.

Then tested it with my manager. Thanks Stuart!

Then simplified.

Then assigned all remaining videos to be nuggetized by the team.

Meanwhile we’re doing more usability tests and nuggetizing those as we go.

 

The Results

This has already come in handy twice.

First when my coworker Jason was considering adding a hyperlink in a certain place, I expressed my doubts. Luckily, Jason remembered some recent observations and within a couple minutes he had pulled up Airtable and showed me two clips of real customers trying to click the text that he wanted to hyperlink. Damn you Airtable! I gave you life and you’re already proving me wrong!? Seriously though, these observations would not have been found so easy if they were just buried in a usability report somewhere

Second, when we were having a mini design sprint on one problem area in our dashboard, I was able to quickly pull up several short video clips of real customers running into usability issues in that area. It’s great that this database can essentially provide a highlight reel for anything you need!

 

Next Steps

Going forward, the UX team at Solium is continuing to evaluate Airtable this will continue to evolve, but so far I’m very grateful that Tomer Sharon was sharin’ his database! #punIntended #dadJoke #badJoke

 

Appendix: How to generate timestamped Youtube URLs

For all the formulas I used, make a copy of Youtube url generation on airtable. Using that, you should be able to get from a youtube share link to a timestamped start/end youtube url.

Example youtube share link: https://youtu.be/1SXhEw1ijs4

Nugget timestamp: 24:00-24:13

Timestamped youtube url: https://youtube.com/embed/1SXhEw1ijs4?autoplay=1&rel=0&start=1440&end=1453

Getting away from it all

As I write this, I’m three hours away from home in the middle of the woods with no electricity, no roof over my head, no running water, and of course no cell reception.

And it’s awesome.

IMG_0823.JPG

Our beautiful spot right on the river.

Yes, I know I’m contradicting myself. Like an alcoholic trying to shake the last few drops out of the bottle, I’m writing this blog post in offline mode. But it’s definitely not the same without WiFi.

Without an internet connection, I don’t have alerts buzzing every five minutes on my phone. I don’t go to check my email, only to find myself scrolling through Twitter half an hour later with no memory of even opening Twitter.

UX Designers like me are paid good money to grab your attention and hold it. And they’re damn good at their jobs. They are great at making everything seem urgent and important, even if it’s not.

Out here, it’s just me, family, and nature. We eat, drink, laugh, play games, and just relax.

It’s not all fun and games though. We have a luxurious portable toilet that occasionally, you know, fills up and needs emptying…

Image associée

Our luxurious portable toilet is kind of like this. Way better than squatting in the woods!

…Otherwise it starts overflowing.

At least what seems urgent and important out here actually IS urgent and important.

Speaking of urgent, I need to climb a tree to try to find cell reception so that I can keep my Duolingo streak alive. Wish me luck!

Duolingo is great, but…

I LOVE Duolingo. I can’t recommend it enough for people who want to start learning a new language.

Ever since I first tweeted about it back in 2015, I’ve been using it pretty much daily. First for a little bit of Spanish, and now for French and even a little bit of Vietnamese!

However, I have a few bones to pick, especially with some of the more recent changes, both as a user and as a UX professional.

Lingots vs. Gems

Back in the day, Duolingo used “lingots” to reward users for things like having a long streak of practicing, allowing them to “buy” things like extra lessons or even costumes for Duolingo’s owl mascot. This was consistent between the web application and the mobile app.

But sometime in 2017, the mobile app switched over from lingots to “gems”. I remember seeing a nice notification after that switch that explained to me why the change was made and what it meant to me. No harm done.

The weird thing: The web app didn’t switch over. I thought this might just be a temporary transition, but several months later and it still hasn’t. So one one device I have gems and on the other I have lingots.

The Shop on mobile: I have 3272 gems and I’ve wagered 50 gems on “Double or Nothing”.

The Shop on web: Even though it’s the same account, I have 2334 lingots and I haven’t made a “Double or Nothing” wager but I can for 5 lingots.

I really have trouble keeping track of the difference between the two. I wish I didn’t care about these fake internet points but when my 650+ day streak is riding on them, I can’t ignore them.

The fix

My suggestion to Duolingo: Follow Jakob Nielsen’s heuristic of “Consistency and standards”.

Users should not have to wonder whether different words, situations, or actions mean the same thing.

Choose one: gems or lingots. Then get rid of the other.

The Double-Tap Bug

It may be because my iPhone 6 is no spring chicken, but I’m regularly frustrated by the following behavior on Duolingo’s iPhone app.

On “listen then type” questions, when I tap the field to start typing, nothing seems to happen. So I tap again. The keyboard then appears (due to my first tap) then immediately disappears (due to my second tap). So I tap once more and all is well.

Confusing? Here’s a gif I made to illustrate it.

duolingo double tap bug.gif

The double-tap bug. Due to a delay in registering the first tap, the first two taps cancel each other out. The third one works though!

The bad thing is that this doesn’t seem to consistently happen. Sometimes when I tap the first time the keyboard immediately appears so there’s no problem. Sometimes I tap, then wait patiently for the keyboard to appear, resisting the urge to tap again, only to be staring at my screen for several seconds like an idiot, apparently because the app didn’t actually notice my first tap.

The fix

The problem seems to be that there’s a delay in registering the first tap, possibly due to the phone working hard to play the audio. I wonder if it’s possible to ignore a tap to close the keyboard if it happens immediately after the keyboard was opened.

Also, perhaps make the tappable area larger on these questions? That would prevent the “staring like an idiot” scenario above.

Condescending Messages

On the iOS app, after my first five questions of the day then again after about ten, I get a message. Instead of letting me continue on in my French flow, that damn owl pops up and gives me an infuriating pat on the head.

Yes, maybe when I start learning Japanese and am getting frustrated with the first few lessons, this might be a welcome ray of light. But not when I’ve devoured all the French content that Duolingo has to offer and I’m just reviewing a few old words. In that case, it’s just annoying.

The fix

As I said in my tweet, maybe these messages should just be for beginners. Or better yet, why not add a “Stop showing these messages” button to allow for opt-out?

But it’s not all bad!

With that being said, I still love Duolingo and will probably continue using it for years to come. And not all of their new stuff is bad.

Stories

I love Duolingo’s new stories feature, which seems to only be available on the web app under the “Labs” tab or at stories.duolingo.com.

These are short, enjoyable stories with words on screen and voices narrating, these are a great way for intermediate to advanced learners to get comfortable with how a language is spoken. They’re interactive to make sure you’re paying attention.

Duolingo’s story. It’s asking me which word means “to stay on the surface of the water”. It’s “flotte”!

And best of all, they’re entertaining. The stories usually have a nice little twist at the end.

The twist: The man that Rose was speaking to at the art gallery was Captain Black Beard himself!

Conclusion

Keep doing what you’re doing Duolingo!

For the gems vs. lingots, I’m guessing that either I’ve run into an edge-case bug or that there is some kind of constraint that I’m not aware of.

For the messages, I know that I’m now turning into an edge case. There are millions more beginners on your platform than people like me who have consumed all content for a given language, but still, with a couple of small changes, you can keep me preaching about how awesome you are without alienating your new customers at all!

For the stories, please make them mainstream! They’re such a great, entertaining way to learn!

Want to talk Duolingo with me? Find me on LinkedIn!

Talking to Mars

Lately I’ve been bingeing on WaitButWhy. From Artificial Intelligence to the history of everything, Tim Urban is an expert at carefully researching complex topics then crafting entertaining, easy-to-read, and informative posts on them.

The other day I read the article How (and Why) SpaceX Will Colonize Mars. It was a great article about space, Mars, and Elon Musk, but what stuck with me was this little tidbit buried in Part 3 of the post:

Earth people and Mars people will be in close touch, emailing and texting and watching each other’s movies and TV shows (no phone calls or Skype convos though—because data transfer is limited by the speed of light, a message sent from one planet takes between three and 22 minutes to get to the other, depending on the planets’ locations)

As well as this footnote:

For 2–4 weeks of each 26-month planet location cycle, the sun is directly between the two planets, and they can’t communicate at all.

In other words, if Earthlings want to talk with those brave few people who head to Mars starting as early as 2024, there’s going to be some interesting challenges.

So how are we going to talk to Mars?

We won’t be able to FaceTime, but we will be able to do video messaging. Kind of like SnapChat but slower. Let’s call it SlowChat. It should be good at making it clear just how slow each message will be, because there’s a big difference between a 6-minute round-trip, a 44-minute round-trip, and a 2-4 week delay!

Inspired by Tim Urban, I’ll illustrate this with a bit of a story.

It’s the year 2030. I’m floating around in 38% gravity and I want to chat with my mom.

wcm0008.png

Okay, maybe Mars won’t be terraformed enough to have beaches and retirees by 2030, but we’ll definitely need to figure out ways to improve communication if we’re sending people up there!

What do you think? Tweet me your thoughts or post a comment below!