Interview design challenge · Concept feature
Libby Stats
A take-home design challenge from an interview process: a concept Stats tab for Libby where readers set a reading goal, see what their library saved them, and look back on what they read.
Interview design challenge · Concept feature
Libby Stats
A take-home design challenge from an interview process: a concept Stats tab for Libby where readers set a reading goal, see what their library saved them, and look back on what they read.
Interview design challenge · Concept feature
Libby Stats
A take-home design challenge from an interview process: a concept Stats tab for Libby where readers set a reading goal, see what their library saved them, and look back on what they read.
Project
Take-home design challenge for an interview
Role
Solo designer
Scope
One concept feature, not shipped
Deliverables
Research, wireframes, UI and a clickable prototype
Project
Take-home design challenge for an interview
Role
Solo designer
Scope
One concept feature, not shipped
Deliverables
Research, wireframes, UI and a clickable prototype
Project
Take-home design challenge for an interview
Role
Solo designer
Scope
One concept feature, not shipped
Deliverables
Research, wireframes, UI and a clickable prototype
Overview
Libby is OverDrive’s app for borrowing ebooks and audiobooks from public libraries. My concept adds a Stats tab that shows readers what they have read and listened to, how they are doing against a yearly goal, and how much their library has saved them.
Goals
Develop a fun new feature
Encourage, never scold
Show the library’s value
Match the Libby brand
Pass contrast in both themes
Overview
Libby is OverDrive’s app for borrowing ebooks and audiobooks from public libraries. My concept adds a Stats tab that shows readers what they have read and listened to, how they are doing against a yearly goal, and how much their library has saved them.
Goals
Develop a fun new feature
Encourage, never scold
Show the library’s value
Match the Libby brand
Pass contrast in both themes
Overview
Libby is OverDrive’s app for borrowing ebooks and audiobooks from public libraries. My concept adds a Stats tab that shows readers what they have read and listened to, how they are doing against a yearly goal, and how much their library has saved them.
Goals
Develop a fun new feature
Encourage, never scold
Show the library’s value
Match the Libby brand
Pass contrast in both themes
The prompt
As part of a design test, I was tasked with creating a feature that I’d love to see in an app I regularly use. I am a huge bookworm and an avid user of Libby. I’m also a big stats nerd, so the feature I proposed would be a stats page where a user can set reading goals, see how much using their library card has saved them, and look back on what they’ve read and listened to.
Constraints I set from Libby’s app
Libby uses a Material UI component library, so use its components as much as possible
Match the existing branding and styling
Flag everything that would need to be custom
The prompt
As part of a design test, I was tasked with creating a feature that I’d love to see in an app I regularly use. I am a huge bookworm and an avid user of Libby. I’m also a big stats nerd, so the feature I proposed would be a stats page where a user can set reading goals, see how much using their library card has saved them, and look back on what they’ve read and listened to.
Constraints I set from Libby’s app
Libby uses a Material UI component library, so use its components as much as possible
Match the existing branding and styling
Flag everything that would need to be custom
The prompt
As part of a design test, I was tasked with creating a feature that I’d love to see in an app I regularly use. I am a huge bookworm and an avid user of Libby. I’m also a big stats nerd, so the feature I proposed would be a stats page where a user can set reading goals, see how much using their library card has saved them, and look back on what they’ve read and listened to.
Constraints I set from Libby’s app
Libby uses a Material UI component library, so use its components as much as possible
Match the existing branding and styling
Flag everything that would need to be custom
Research
I scrolled Reddit threads where Libby users talk about features they wish the app had, and looked at reading-tracker apps readers already use for stats. The ask that came up was a running tally of what the library saves you.
A Reddit comment from my research
Reading apps I looked at for how they show stats
Pain points to design around
Too much data is overwhelming
Led to the goal and money saved first, three totals after, and a 2025 / All time toggle instead of a longer page.
Low stats can discourage casual readers
Led to goal copy about what’s left and the pace, such as “8 to go this year,” never a shortfall.
Charts can get in the way of screen readers
Led to labeled bars in place of a pie, and a text equivalent for every custom chart.
Readers may worry about data privacy
Led to a no-data state that says nothing is tracked while reading history is off.
Data points I chose to show
Books read
Pages read
Money saved
Reading time
Genre breakdown
Research
I scrolled Reddit threads where Libby users talk about features they wish the app had, and looked at reading-tracker apps readers already use for stats. The ask that came up was a running tally of what the library saves you.
A Reddit comment from my research
Reading apps I looked at for how they show stats
Pain points to design around
Too much data is overwhelming
Led to the goal and money saved first, three totals after, and a 2025 / All time toggle instead of a longer page.
Low stats can discourage casual readers
Led to goal copy about what’s left and the pace, such as “8 to go this year,” never a shortfall.
Charts can get in the way of screen readers
Led to labeled bars in place of a pie, and a text equivalent for every custom chart.
Readers may worry about data privacy
Led to a no-data state that says nothing is tracked while reading history is off.
Data points I chose to show
Books read
Pages read
Money saved
Reading time
Genre breakdown
Research
I scrolled Reddit threads where Libby users talk about features they wish the app had, and looked at reading-tracker apps readers already use for stats. The ask that came up was a running tally of what the library saves you.
A Reddit comment from my research
Reading apps I looked at for how they show stats
Pain points to design around
Too much data is overwhelming
Led to the goal and money saved first, three totals after, and a 2025 / All time toggle instead of a longer page.
Low stats can discourage casual readers
Led to goal copy about what’s left and the pace, such as “8 to go this year,” never a shortfall.
Charts can get in the way of screen readers
Led to labeled bars in place of a pie, and a text equivalent for every custom chart.
Readers may worry about data privacy
Led to a no-data state that says nothing is tracked while reading history is off.
Data points I chose to show
Books read
Pages read
Money saved
Reading time
Genre breakdown
How I worked
1
Listen to readers
Read Reddit threads and other reading apps to see what people want from reading stats.
2
Pick the data
Listed the data points, user value and business impact, and sketched chart options for each.
3
Wireframe and flag questions
Drew two wireframes and left sticky notes with the questions a developer would need answered.
4
Apply the brand
Moved to Libby’s plum, berry and teal, then checked every color for contrast in light and dark.
5
Design the UI
Built the screens from Figma components, flagging what’s Material and what’s custom.
6
Prototype and annotate
Linked the screens into a clickable prototype and wrote Why and Dev notes for each section.
How I worked
1
Listen to readers
Read Reddit threads and other reading apps to see what people want from reading stats.
2
Pick the data
Listed the data points, user value and business impact, and sketched chart options for each.
3
Wireframe and flag questions
Drew two wireframes and left sticky notes with the questions a developer would need answered.
4
Apply the brand
Moved to Libby’s plum, berry and teal, then checked every color for contrast in light and dark.
5
Design the UI
Built the screens from Figma components, flagging what’s Material and what’s custom.
6
Prototype and annotate
Linked the screens into a clickable prototype and wrote Why and Dev notes for each section.
How I worked
1
Listen to readers
Read Reddit threads and other reading apps to see what people want from reading stats.
2
Pick the data
Listed the data points, user value and business impact, and sketched chart options for each.
3
Wireframe and flag questions
Drew two wireframes and left sticky notes with the questions a developer would need answered.
4
Apply the brand
Moved to Libby’s plum, berry and teal, then checked every color for contrast in light and dark.
5
Design the UI
Built the screens from Figma components, flagging what’s Material and what’s custom.
6
Prototype and annotate
Linked the screens into a clickable prototype and wrote Why and Dev notes for each section.
Exploring the data
Before wireframing, I sketched each data point as a chart in greyscale: reading by type, hours over time, genre, and the reading-goal ring.
Chart explorations
Wireframes and dev questions
I drew two versions of the page. The second moved the reading goal to the top and badges higher up. Next to each section I left sticky notes with the questions a developer would need to answer, plus my recommendation on where the feature should live.
Wireframe 1 (left) and wireframe 2 (right), with my sticky notes
How the final design handles each question
These are design answers. Each one would still need a developer to confirm it’s possible.
Should genres max out at the top 6?
Top five plus Other, as ranked bars with percentages instead of a pie.
Can the hours scale go past 80?
The axis grows to the next 20 above the reader’s best year, and every bar is labeled.
What are the format bars out of?
Each bar is out of the year’s total books, so no legend is needed.
Can badges be tapped for details?
Yes. A sheet explains how each was earned, and locked ones show progress.
How often does data update?
When a title is finished, with “Updated when you finish a book or title” instead of a timestamp.
Its own tab or inside Profile?
Its own tab, as I recommended, to keep Profile tidy and leave room to grow.
Wireframes and dev questions
I drew two versions of the page. The second moved the reading goal to the top and badges higher up. Next to each section I left sticky notes with the questions a developer would need to answer, plus my recommendation on where the feature should live.
Wireframe 1 (left) and wireframe 2 (right), with my sticky notes
How the final design handles each question
These are design answers. Each one would still need a developer to confirm it’s possible.
Should genres max out at the top 6?
Top five plus Other, as ranked bars with percentages instead of a pie.
Can the hours scale go past 80?
The axis grows to the next 20 above the reader’s best year, and every bar is labeled.
What are the format bars out of?
Each bar is out of the year’s total books, so no legend is needed.
Can badges be tapped for details?
Yes. A sheet explains how each was earned, and locked ones show progress.
How often does data update?
When a title is finished, with “Updated when you finish a book or title” instead of a timestamp.
Its own tab or inside Profile?
Its own tab, as I recommended, to keep Profile tidy and leave room to grow.
Wireframes and dev questions
I drew two versions of the page. The second moved the reading goal to the top and badges higher up. Next to each section I left sticky notes with the questions a developer would need to answer, plus my recommendation on where the feature should live.
Wireframe 1 (left) and wireframe 2 (right), with my sticky notes
How the final design handles each question
These are design answers. Each one would still need a developer to confirm it’s possible.
Should genres max out at the top 6?
Top five plus Other, as ranked bars with percentages instead of a pie.
Can the hours scale go past 80?
The axis grows to the next 20 above the reader’s best year, and every bar is labeled.
What are the format bars out of?
Each bar is out of the year’s total books, so no legend is needed.
Can badges be tapped for details?
Yes. A sheet explains how each was earned, and locked ones show progress.
How often does data update?
When a title is finished, with “Updated when you finish a book or title” instead of a timestamp.
Its own tab or inside Profile?
Its own tab, as I recommended, to keep Profile tidy and leave room to grow.
Key decisions
Decision 1
Start with the goal
It’s the one number readers choose, so it leads. The copy says what’s left and the pace, never a shortfall.
Decision 2
Make money saved the hero
It was the clearest ask in my research and the best reason to come back and share.
Decision 3
Bars over the pie
Ranked bars are easier to compare, show percentages, and screen readers read them in order.
Decision 4
Reward, don’t rank
Badges explain how they were earned. Locked ones get a dashed outline, so the state doesn’t rely on color alone.
Key decisions
Decision 1
Start with the goal
It’s the one number readers choose, so it leads. The copy says what’s left and the pace, never a shortfall.
Decision 2
Make money saved the hero
It was the clearest ask in my research and the best reason to come back and share.
Decision 3
Bars over the pie
Ranked bars are easier to compare, show percentages, and screen readers read them in order.
Decision 4
Reward, don’t rank
Badges explain how they were earned. Locked ones get a dashed outline, so the state doesn’t rely on color alone.
Key decisions
Decision 1
Start with the goal
It’s the one number readers choose, so it leads. The copy says what’s left and the pace, never a shortfall.
Decision 2
Make money saved the hero
It was the clearest ask in my research and the best reason to come back and share.
Decision 3
Bars over the pie
Ranked bars are easier to compare, show percentages, and screen readers read them in order.
Decision 4
Reward, don’t rank
Badges explain how they were earned. Locked ones get a dashed outline, so the state doesn’t rely on color alone.
Annotated for design and development
For the final design, each section has two notes. Teal Why notes explain the design choice. Purple Dev notes ask the open question, tag the component as Material or custom, and spell out the interactions.
The annotated board from the Figma file
Libby’s colors, in two modes
One Figma color collection with Light and Dark modes drives every screen. The light series uses Libby’s plum, berry and teal. Dark mode swaps to lighter tints so each chart color still stands out against the dark cards.
Light mode series
Plum
#651A39
Berry
#A41F4B
Teal
#1F7A76
Gold
#8A5A00
Navy
#3B4A7A
Muted
#6B5D63
Dark mode series
Pink
#F08AA8
Teal
#4BC0BB
Gold
#F2B84B
Blue
#9DB4FF
Lilac
#C79BF2
Gray
#A99BA1
Type
Open Sans Bold
Titles and big numbers, like $348 and 16/24
Karla Regular and Bold
Labels, body text and buttons
Contrast check
Dark mode went from 1.5:1 to 4.7:1 or better
Plum bars were 1.5:1 on dark cards and three badge colors were 2.1 to 2.5:1. Series colors now measure 4.7 to 9.9:1 on cards. In light mode, teal text and the ring are darkened to 5.6:1.
Libby’s colors, in two modes
One Figma color collection with Light and Dark modes drives every screen. The light series uses Libby’s plum, berry and teal. Dark mode swaps to lighter tints so each chart color still stands out against the dark cards.
Light mode series
Plum
#651A39
Berry
#A41F4B
Teal
#1F7A76
Gold
#8A5A00
Navy
#3B4A7A
Muted
#6B5D63
Dark mode series
Pink
#F08AA8
Teal
#4BC0BB
Gold
#F2B84B
Blue
#9DB4FF
Lilac
#C79BF2
Gray
#A99BA1
Type
Open Sans Bold
Titles and big numbers, like $348 and 16/24
Karla Regular and Bold
Labels, body text and buttons
Contrast check
Dark mode went from 1.5:1 to 4.7:1 or better
Plum bars were 1.5:1 on dark cards and three badge colors were 2.1 to 2.5:1. Series colors now measure 4.7 to 9.9:1 on cards. In light mode, teal text and the ring are darkened to 5.6:1.
Libby’s colors, in two modes
One Figma color collection with Light and Dark modes drives every screen. The light series uses Libby’s plum, berry and teal. Dark mode swaps to lighter tints so each chart color still stands out against the dark cards.
Light mode series
Plum
#651A39
Berry
#A41F4B
Teal
#1F7A76
Gold
#8A5A00
Navy
#3B4A7A
Muted
#6B5D63
Dark mode series
Pink
#F08AA8
Teal
#4BC0BB
Gold
#F2B84B
Blue
#9DB4FF
Lilac
#C79BF2
Gray
#A99BA1
Type
Open Sans Bold
Titles and big numbers, like $348 and 16/24
Karla Regular and Bold
Labels, body text and buttons
Contrast check
Dark mode went from 1.5:1 to 4.7:1 or better
Plum bars were 1.5:1 on dark cards and three badge colors were 2.1 to 2.5:1. Series colors now measure 4.7 to 9.9:1 on cards. In light mode, teal text and the ring are darkened to 5.6:1.
Components
Every card on the Stats tab is a Figma component with text properties, so content changes don’t need detaching. Badges and hour bars are variant sets.
Cards
Material
Reused from Libby’s platform
Segmented button, cards, buttons, bottom sheet and navigation bar. Only the Stats icon in the nav is new.
Custom
Built for this feature
Goal ring, genre bars, hours chart and badge grid. Each needs a text equivalent for screen readers.
Components
Every card on the Stats tab is a Figma component with text properties, so content changes don’t need detaching. Badges and hour bars are variant sets.
Cards
Material
Reused from Libby’s platform
Segmented button, cards, buttons, bottom sheet and navigation bar. Only the Stats icon in the nav is new.
Custom
Built for this feature
Goal ring, genre bars, hours chart and badge grid. Each needs a text equivalent for screen readers.
Components
Every card on the Stats tab is a Figma component with text properties, so content changes don’t need detaching. Badges and hour bars are variant sets.
Cards
Material
Reused from Libby’s platform
Segmented button, cards, buttons, bottom sheet and navigation bar. Only the Stats icon in the nav is new.
Custom
Built for this feature
Goal ring, genre bars, hours chart and badge grid. Each needs a text equivalent for screen readers.
Final designs
The Stats tab from top to bottom, in light and dark mode.
Top of page, mid scroll and bottom, in each theme
Past the happy path
Loading, offline and first-run screens, including readers who keep reading history off, plus the full Achievements page.
No data yet: reading history is off
Loading
Offline, with a retry
Achievements, after View all
Final designs
The Stats tab from top to bottom, in light and dark mode.
Top of page, mid scroll and bottom, in each theme
Past the happy path
Loading, offline and first-run screens, including readers who keep reading history off, plus the full Achievements page.
No data yet: reading history is off
Loading
Offline, with a retry
Achievements, after View all
Final designs
The Stats tab from top to bottom, in light and dark mode.
Top of page, mid scroll and bottom, in each theme
Past the happy path
Loading, offline and first-run screens, including readers who keep reading history off, plus the full Achievements page.
No data yet: reading history is off
Loading
Offline, with a retry
Achievements, after View all
Prototype flows
Stats is one screen with many ways in and out. First-run and offline states lead into it, and every card opens a bottom sheet that closes with Close or a tap on the dimmed area. I linked six flows in Figma, covering the stats flow, first run and offline, each in light and dark mode.
Getting to Stats
No data yet
Turn on reading history
Loading
after 1.5 s
Stats, 2025
Offline banner
Retry
Loading
after 1.5 s
Stats, 2025
Year toggle
Stats, 2025
All time
Stats, All time
2025
Stats, 2025
Reading goal
Goal ring
tap
Pace sheet
Edit goal
tap
Goal stepper
Save goal
Toast, 2.5 s
Money saved
Saved card
tap
Savings by format
Achievements
Badge
tap
Earned or locked sheet
View all
push
Achievements
Back
Stats
Top genres
Genre row
tap
Genre sheet
See these books
Tags, filtered
Hours chart
Year bar
tap
Year sheet
Screen
State
Bottom sheet
Toast
Outside the prototype
The year toggle uses Smart Animate so the cards change in place. View all and Back slide sideways, and every sheet fades in over a dimmed screen.
Try the flows in Figma
Prototype flows
Stats is one screen with many ways in and out. First-run and offline states lead into it, and every card opens a bottom sheet that closes with Close or a tap on the dimmed area. I linked six flows in Figma, covering the stats flow, first run and offline, each in light and dark mode.
Getting to Stats
No data yet
Turn on reading history
Loading
after 1.5 s
Stats, 2025
Offline banner
Retry
Loading
after 1.5 s
Stats, 2025
Year toggle
Stats, 2025
All time
Stats, All time
2025
Stats, 2025
Reading goal
Goal ring
tap
Pace sheet
Edit goal
tap
Goal stepper
Save goal
Toast, 2.5 s
Money saved
Saved card
tap
Savings by format
Achievements
Badge
tap
Earned or locked sheet
View all
push
Achievements
Back
Stats
Top genres
Genre row
tap
Genre sheet
See these books
Tags, filtered
Hours chart
Year bar
tap
Year sheet
Screen
State
Bottom sheet
Toast
Outside the prototype
The year toggle uses Smart Animate so the cards change in place. View all and Back slide sideways, and every sheet fades in over a dimmed screen.
Try the flows in Figma
Prototype flows
Stats is one screen with many ways in and out. First-run and offline states lead into it, and every card opens a bottom sheet that closes with Close or a tap on the dimmed area. I linked six flows in Figma, covering the stats flow, first run and offline, each in light and dark mode.
Getting to Stats
No data yet
Turn on reading history
Loading
after 1.5 s
Stats, 2025
Offline banner
Retry
Loading
after 1.5 s
Stats, 2025
Year toggle
Stats, 2025
All time
Stats, All time
2025
Stats, 2025
Reading goal
Goal ring
tap
Pace sheet
Edit goal
tap
Goal stepper
Save goal
Toast, 2.5 s
Money saved
Saved card
tap
Savings by format
Achievements
Badge
tap
Earned or locked sheet
View all
push
Achievements
Back
Stats
Top genres
Genre row
tap
Genre sheet
See these books
Tags, filtered
Hours chart
Year bar
tap
Year sheet
Screen
State
Bottom sheet
Toast
Outside the prototype
The year toggle uses Smart Animate so the cards change in place. View all and Back slide sideways, and every sheet fades in over a dimmed screen.
Try the flows in Figma
Why I showed what I showed
A design challenge is a short window to show how I think. Beyond the screens, I chose to show the parts of the work a team would need before building it: what a developer has to answer, what’s custom, and whether it’s accessible.
Dev considerations
Every section has a Dev note, so the data questions are on the table before anyone builds:
What counts as “finished,” and where the goal is stored
Where the money saved comes from: list price per format or per library
Badge rules, like Night Owl’s hour and time zone
A genre source, and a rule so shares total 100
Whether physical checkouts can be read at all
Whether “All time” exists in stored history
Material vs custom
I set myself the constraint of using Libby’s Material components wherever possible, so I tagged every part:
Material: segmented button, cards, buttons, bottom sheet, navigation bar
Custom: goal ring, genre bars, hours chart, badge grid
Only the Stats icon in the nav is new
That shows how much new work the feature really needs.
Contrast and accessibility
Libby’s plum and berry are dark, so I designed dark mode too and checked it:
Plum bars were 1.5:1 on dark cards. Dark-mode chart colors are now 4.7 to 9.9:1
Light-mode teal text and ring darkened to 5.6:1
Locked badges use a dashed outline, not color alone
Labeled bars replace the pie, and each custom chart needs a text equivalent
Edge cases
Loading, offline and first-run screens show I’ve thought past the happy path, including readers who keep reading history off.
A clickable prototype
Linking the sheets, toggle and states lets reviewers feel the interactions instead of reading about them.
Try the prototype
Why I showed what I showed
A design challenge is a short window to show how I think. Beyond the screens, I chose to show the parts of the work a team would need before building it: what a developer has to answer, what’s custom, and whether it’s accessible.
Dev considerations
Every section has a Dev note, so the data questions are on the table before anyone builds:
What counts as “finished,” and where the goal is stored
Where the money saved comes from: list price per format or per library
Badge rules, like Night Owl’s hour and time zone
A genre source, and a rule so shares total 100
Whether physical checkouts can be read at all
Whether “All time” exists in stored history
Material vs custom
I set myself the constraint of using Libby’s Material components wherever possible, so I tagged every part:
Material: segmented button, cards, buttons, bottom sheet, navigation bar
Custom: goal ring, genre bars, hours chart, badge grid
Only the Stats icon in the nav is new
That shows how much new work the feature really needs.
Contrast and accessibility
Libby’s plum and berry are dark, so I designed dark mode too and checked it:
Plum bars were 1.5:1 on dark cards. Dark-mode chart colors are now 4.7 to 9.9:1
Light-mode teal text and ring darkened to 5.6:1
Locked badges use a dashed outline, not color alone
Labeled bars replace the pie, and each custom chart needs a text equivalent
Edge cases
Loading, offline and first-run screens show I’ve thought past the happy path, including readers who keep reading history off.
A clickable prototype
Linking the sheets, toggle and states lets reviewers feel the interactions instead of reading about them.
Try the prototype
Why I showed what I showed
A design challenge is a short window to show how I think. Beyond the screens, I chose to show the parts of the work a team would need before building it: what a developer has to answer, what’s custom, and whether it’s accessible.
Dev considerations
Every section has a Dev note, so the data questions are on the table before anyone builds:
What counts as “finished,” and where the goal is stored
Where the money saved comes from: list price per format or per library
Badge rules, like Night Owl’s hour and time zone
A genre source, and a rule so shares total 100
Whether physical checkouts can be read at all
Whether “All time” exists in stored history
Material vs custom
I set myself the constraint of using Libby’s Material components wherever possible, so I tagged every part:
Material: segmented button, cards, buttons, bottom sheet, navigation bar
Custom: goal ring, genre bars, hours chart, badge grid
Only the Stats icon in the nav is new
That shows how much new work the feature really needs.
Contrast and accessibility
Libby’s plum and berry are dark, so I designed dark mode too and checked it:
Plum bars were 1.5:1 on dark cards. Dark-mode chart colors are now 4.7 to 9.9:1
Light-mode teal text and ring darkened to 5.6:1
Locked badges use a dashed outline, not color alone
Labeled bars replace the pie, and each custom chart needs a text equivalent
Edge cases
Loading, offline and first-run screens show I’ve thought past the happy path, including readers who keep reading history off.
A clickable prototype
Linking the sheets, toggle and states lets reviewers feel the interactions instead of reading about them.
Try the prototype
If this went further
This is a concept. Next, I’d test it with Libby readers, especially casual ones, to check the goal copy feels encouraging, and work through the open data questions with OverDrive’s developers.