Destiny Discover has the largest market share of any school library program in the US. If you walk into a K-12 school, go into their library, and do a computer search to find a book, chances are you will use this program. Follett has an excellent relationship with librarians, largely because we seek out their feedback and try to improve our software based on what they tell us.
Toward this end, our UX team redesigned Destiny Discover to better meet the needs of our users. This included students in elementary, middle school, and high school, in addition to librarians at these levels.
The previous version was beginning to look dated, and didn't excite nor engage our target audience. Shown here is the Discover page, the main landing page / browsing experience of the program.
If a user clicks on a book to learn more about it, they will be presented with a Title Details modal. It serves its purpose, but lacks much interest for younger audiences.
Because the needs and tastes of elementary students are much different than high school students, the first thing we did was to split the program into two versions: an upper grade "standard" version and a lower grade "simplified" one. This allowed us to better target the style preferences and information processing abilities of each age group.
Here is the updated Discover page for the older students. In addition to the obvious styling differences, the biggest change we made here is turning each book into a flippable card. (You can see an example of a "flipped" card back on the bottom row.) It features some additional information about the book, but not as much as the full title details modal.
Common actions for each media type are present on a "button bar" at the bottom of each book card. Ebooks, for instance, have their media type icon, "Open," and "Checkout."
We also introduced a subheader bar with page specific actions such as filtering.
The lower grade version is made with elementary students in mind. It strips some of the complexity from the standard version and makes things bigger, brighter, simpler, and more fun.
An important rule for this version is that clickable objects have a specific color. You'll be seeing the space theme in these screenshots, where the clickable color is bright green. Librarians really liked this feature because they don't have to guide the kids as much to navigate around the software.
We pulled the search bar out of the header and made it huge and obvious on the page, in accordance with feedback from librarians.
We also put the topics out on the page instead of "hiding" it in a header. This was also the result of librarian feedback.
In addition to librarians, we tested the design with younger students, who liked it quite a bit more than the old version.
This page was fun to work on. Each book has its own unique background, made by taking the book cover and blowing it up and blurring it. This gives each book's detail page a unique mood that fits it. I also "exploded" all the components of the page and put them into their own floating sections. This adds visual interest to the page, and also lets the background show through more, helping to add more individual "flavor" to each book's title page.
You'll notice that we stripped a lot of the detail here for the younger readers. We went through each item and asked if it was truly necessary to include in a simplified version. We also changed the star rating system into a "smiley" system for additional kid friendliness.
After performing a search from anywhere in the program, you are brought to the search page to see a list of your library's results. You can filter using the lefthand panel. There was some question as to whether we should load the page with filters hidden initially in order to have more space for book results. User feedback indicated that easy access to filters was more important, so we opted to have them visible.
We cut out a lot of the filters for the simplified version to reduce choice fatigue and complexity.
This page and its sibling pages (which you can navigate to using the lefthand panel) show everything that is specific to the logged in user such as their checkouts, holds, fines, etc.
Lower grades has largely the same options, differing mainly in style here.
Over the course of development, I was tasked with creating many different themes for the lower grades version. The biggest challenge in creating these was to use a variety of colors while still maintaining ADA standards for legibility across all the different screens. It was like a jigsaw puzzle getting everything to work together. Here are a few examples:
Science and Math
In addition to creating mockups for the design of each screen, I also was in charge of creating a fully interactive prototype using Axure. This included programming flippable book cards, working links, a number of unique title detail pages, and a working search function. All in high fidelity. In both looks and behavior, the prototype I made was almost indestinguishable from the actual program.
We used this interactive prototype to do user testing. It allowed us to convincingly mock up what the final product would look like.
At the time of this writing, the lower grade version along with many of its themes have been implemented in production, to great approval among many schools, librarians, and students. The upper grade theme is still in the works.