Follett wanted to augment the book selling side of its business with a digital book fair program (similar to Scholastic) that could run in classrooms and schools. Teachers would sign up for a book fair and get rewards according to how many books were sold.
We started with a small-scale version: a single teacher and their classroom. We ran several small experimental versions to see if our idea had revenue potential (it did), and to iron out some of the early bugs in the book ordering and fulfillment process.
Once we got through that phase, I started looking at the UI to address inconsistencies.
And I quickly found them!
We received support calls from teachers having trouble registering. The reason, it turns out, was that the login page was designed for parents using a "class code" to login. Teacher logins were an afterthought.
But teachers were an important user group on this page. And they were getting caught up thinking they needed to use the giant grey box in the middle of the screen, and enter a class code (which they didn't have from the registration process).
To add to the confusion, even if they did notice the small "Staff Login" button in the top right (which is what they were intended to use), they might not have identified themselves as "Staff." What does "staff" mean? Is it school staff, or eFairs staff, which would be Follett employees? The verbiage was unclear.
Finally, there was no guidance for users who got to this screen but hadn't registered and therefore couldn't use either login method.
I made the following changes:
- Since we had two equally important sets of users, we should give equal "weight" to their logins. That meant devoting equal screen space, with similarly "weighted," but visually distinct CTAs.
- I clarified that "Staff" meant "School Staff."
- Below each group's login is an instruction for what to do if you don't have a login.
These changes reduced customer confusion and successfully decreased the number of support requests we got.
As a "nice to have," I also included a friendly welcome message at the top saying "Welcome to Follett eFairs!"
The mobile version of the site started out as a mess. Things were jumbled, only one book was visible at a time, and you couldn't use swiping to navigate within the book carousels (an important affordance on mobile devices).
I had limited ability to change the page much, but managed to:
- Clean things up visually.
- Show 2 books with a hint of a 3rd
- Allow smooth scrolling.
I would have loved to further refine the mobile browse page, but it was not a priority at the time, so I left it at this.
The mobile cart page had a few problems as well:
- There is no checkout button at the top, which means users have to scroll all the way to the bottom to purchase. If they have a large amount of books they're buying, this is a pain point.
- We established in our style guide that the color green related to purchasing. But this page was not using that convention, other than putting the price in green. The main "checkout" button at the bottom of the page was blue (not shown here).
- The "remove" and "quantity" buttons are too prominent given their relatively low importance on this page. Our site is a bit different from a typical ecommerce site, in that the normal user-purchasing-flow does not often involve changing quantities of books or removing them once they're in the cart.
I improved the usability and consistency of this page in the following ways:
- Put a checkout button at the top of the page and having it collapse into a "sticky header," so it follows the user if they're scrolling through a long page of books.
- Made the checkout and quantity buttons green, per our style guide.
- Decreased the "weight" of the "quantity" and "remove" buttons for each book. They are there if users need them, but no longer impede the "flow" of the page.
But not all of my suggested changes made it in. For instance, one problem we had was that users didn't always realize that there were more books offered than they initially saw on the page. I proposed that we have our carousel edges fade out, implying additional books and encouraging users to explore. It also helps the page not look as sterile, and adds a bit of visual interest.
Although the team liked it, it was never implemented. Management was trying to scale the product quickly, which meant making judgment calls when prioritizing features. Ultimately they decided to focus on adding new features rather than improving existing ones. Even the changes I mentioned prior to this, which represent fairly straightforward improvements, took quite a bit to make them happen.
This tendency towards feature creep throughout my work in eFairs was at times challenging for me as a UX designer, I learned to do the best I could in the structure I found myself in. Being able to work on a team where you contribute to a system that is bigger than one's own individual role is both a blessing and a challenge. It provided opportunity to practice those "soft skills" that are important to the UX process within a business.
As we expanded the program, we broadened our target audience from individual classrooms, to include entire schools. This meant we had to accommodate not only different categories of books, but also different grade levels, each with its own categories to choose from.
This required some refactoring of navigation components.
Books have a micro-interaction of being able to "flip" when the user clicks on them (see the grey flipped card in the bottom left of this image). The book card back has information about the book, along with a button to add it to the cart. But there was not a corresponding, pleasant, confirmation when you added a book to your cart.
I added a fun micro-interaction to confirm the user's action after they add to cart, with an animated check mark.
Feedback we received pointed out that parents might be shopping for multiple students, so we had to refactor our checkout page to group books by student. So I redesigned the checkout page to group books on a per-child basis.
Testing suggested that when students have wish lists it increases sales. So we wanted to make this an important part of our program. Initially these lists were simple, plain text. I improved the formatting to look nicer and more appealing to potential customers, while still remaining printer-friendly.
I also solved a user pain-point where parents had to type out a long web address, by also providing them with a QR code.
By the time I left Follett, I had significantly improved the eFairs experience across the board, and helped forge its growth into a profitable program for the company.