Public libraries offer summer reading programs, where the goal is to stop the literacy backslide of out-of-school kids and boost enthusiasm in the community for reading.
Patrons of all ages (adults included) can win prizes and awards, usually related to reading amount, depending on the library’s goals/program structure.
<note_text>Disclaimer: This work was pursued as a personal project. I’m not affiliated with Libby.<note_text>
Creating an outline and documenting summer reading progress takes a lot of time - not just for library workers, but also for library patrons trying to track their books. This leads to underutilization of the program.
Four were library employees, and two were general visitors (a mom and her teenage daughter). I asked about their:
After reviewing the exploratory interview notes, I affinity mapped out all of the comments in FigJam. This helped establish overlapping themes.
From my interviews, I focused on two types of users: the parent tracking their family's reading habits, and the librarian offering the reading event to the public.
After pages of brainstorming, I developed three ideas to incorporate into the summer reading event feature.
I established four ways that the user would primarily interact with my three features.
1: The user wants to add a member to their family in the app
2: The user wants to redeem a reading goal incentive.
3: The user wants to view their family's progress in meeting their goals.
4: The user wants to create a new reading time goal for their family.
In the first iteration of wireframes, I had the user able to edit other family member's avatars and names in the app. That over-complicated the process, and I decided that users could only change their own avatars.
I mapped out the existing information hierarchy in blue and purple, and then added my feature pages in orange.
Originally, I’d considered putting the reading goals in the Library page, since the program is sponsored by those organizations. However, that section was already packed full.
Instead, I housed the feature in the Menu (which is the center, most prominent button in the navigation bar), and Timeline (because its’ icon is a clock).
I sketched out two “Menu Page” options, and decided to go with option 2, since the Goals and Incentives were more prominent.
I wanted users to be able to see, at a glance, all of their goals, progress, and family members.
To create a custom goal, I added fields for types of materials, time spent, and incentives. I incorporated checkboxes and radio options with pre-selections, so the user has minimal typing responsibilities.
I wasn’t sure if the users should be able to assign their family avatars, so I came up with options with and without that. Ultimately, I decided that only the user should be able to change their own avatar, so it didn’t need to be in the field.
If the user clicks on the completed progress ring in the main page, it would take them directly to their prize.
Inspired by the Shelf layout, I echoed its' structure of a slightly smaller image on left partnered with spaced text on the right to create the reward and goal card components.
New coordinating personal and family icons were added to the existing design system, as well as timers, checkboxes, keypads, and form fields.
I created four situations to explore in usability testing.
I want this to be easy and customizable.
I really want that slice of pizza for hitting my reading goal - how do I get it?
Can I see the time without exiting the page?
I want to see their progress, and I’d like to work together with them toward a larger goal.
4 people tested the prototype in half hour recorded Zoom sessions. Two were parents, one was a librarian, and one was a general library user.
I watched the test recordings, and then filled out detailed spreadsheets for each participant.
Timing the tasks and asking for ratings added quantitative data points.
.png)
.png)
To determine priority iterations for my narrow timeframe, I mapped out the testers' comments. The gray post-its were given more weight, as they were suggested by more than one person.
It would be useful to test out the new changes with real family and patron information, to see if the structure works well when more than one user is involved.
Libby uses aqua balloons throughout their existing app, to indicate tooltips. When you click them, they're animated to pop and display helpful messages. This would be ideal to integrate into the new feature, because it's a fun way to coach a user through a new interface.
Since Libby digital materials can be opened in Kindle, ideally the goals could also be tracked in that interface. This could, perhaps, be in the form of a widget.
Replicating the UI patterns from an existing app is detail-oriented, and I referenced the Google Chrome developer settings for the app frequently, to establish matching spacing and fonts. I learned a lot about ways to establish information hierarchy, discovered what the previous design team prioritized, and simplified my own content. Creating matching UI also meant that I got a lot of practice using the Figma pen tool.
I really enjoyed building off of an established system. It was like putting a puzzle together.
