The huge typewriter keys serving as signage for Literati Bookstore are a familiar and well-loved sight to Ann Arborites. The shop is known as a special corner where you can peruse 30,000-plus titles and wander close to 4,000 square feet of distinctive checkerboard floors.
However, both Literati customers and leadership were frustrated as that charming in-person experience associated with their brand was not replicated on the shop’s website.
University of Michigan School of Information (UMSI) lecturer James Rampton and students in his SI 311: Laws of UX class connected with Literati co-owner Mike Gustafson to pitch redesigns for Literati’s website based on the laws of user experience (UX). Bachelor’s students were challenged to bring focus to the website’s homepage, shopping cart, product page and checkout flow, with the overall goal of creating portfolio pieces for their own career development.
Pushed by the pandemic into ecommerce
Literati Bookstore in downtown Ann Arbor has gained leagues of loyal fans since 2013 when founders Mike and Hilary Gustafson opened their doors on the corner of Fourth and Washington streets, just a few blocks from the University of Michigan.
“When we first opened Literati Bookstore, we wanted it to be a place where book lovers could come and interact with books,” says Mike Gustafson. “Instead of shopping online, they could walk into a real bookstore and see real books on the shelves and surprise themselves, and maybe find something that they couldn’t find online.”
Literati’s emphasis on a delightful, exploratory in-person shopping experience differentiated the business and led to double-digit growth most years between its opening and 2019, when it was named Bookstore of the Year by Publishers Weekly.
When the bookstore closed for in-person shopping due to the COVID-19 pandemic, however, Gustafson says they were forced to reassess and recalibrate quickly. The store’s website sales, which previously averaged eight to 10 books per week, jumped to 800 orders.
Book lovers and believers in the Literati experience wanted to support the independent bookstore in the face of the pandemic. They overcame a website and checkout experience that Gustafson acknowledges required improvement.
“There was no budget for website development,” Gustafson says. “We were just trying to survive.”
Enter new UMSI faculty member and Literati devotee James Rampton, offering insight on industry best practices for user experience as well as the creativity and energy of information students ready to tackle real-world challenges.
UMSI alum returns, preaching the power of the portfolio
UMSI lecturer Rampton made a formal return to the school this academic year, although he’s stayed close as a guest lecturer since graduating from UMSI with his Master of Science in Information degree in 2014.
“I want students to walk away with portfolio pieces that are solid, that they can post to their websites and portfolios, that they can talk through in an interview including the process, the use, the client relationship they established, the principles they followed, the key design decisions and why,” Rampton says.
His Laws of UX class attracts students from schools across the U-M campus, including Penny Stamps School of Art and Design and the Ross School of Business — as well as universities across the globe — to hone important skills within their fields.
“Students want to make an impact in the local community,” Rampton says, “they want to make an impact in what they see around them.”
Literati offered a locally focused information challenge for students to address with its website redesign project.
A quick email from Rampton was all it took to get the ball rolling. Soon UMSI students were pitching ideas for Gustafson to take back to the association that manages not only Literati’s website, but the websites of thousands of local bookstores across the country.
Bringing the in-person experience to online
“Literati is one of those places that comes up as a top search result for what to do in Ann Arbor,” says An Doan, a second-year Bachelor of Science in Information student from Grand Rapids concentrating on user experience. Doan answered Gustafson’s appeal for students to translate some of the shop’s beloved tactile experiences online.
“I tried to structure my design almost like a bookshelf with these little image tiles, because I remember Mike said a lot of people walk in and are just drawn to the shelves,” Doan says. “I also tried to design a creative way for people to view recommendations, because staff recommendations are really big for Literati — and I also worked in the checkerboard flooring.”
Ultimately, Doan leaned on the psychological principles of UX to inform her design decisions for the navigation bar and shopping cart.
“One rule of thumb is you shouldn’t have more than five elements in your navigation, otherwise it gets overwhelming for users,” says Doan. “Literati already did a good job of having users hover over sections and bringing up a dropdown menu, so I focused on cleaning those up or collapsing sections into each other.”
Building portfolios, solving real-world problems
The UMSI students didn’t limit their creativity to their designs. Exchange student Dong Liu began his redesign pitch by discussing the physical properties of a book in hand. He was inspired by a guest lecturer who spoke to the class about how to present in front of an audience effectively.
“The key takeaway for me is you need to understand what your audience’s interests are, and be slightly different from everyone else,” says Liu. “Everyone’s talking about a bookstore — I wanted to talk about something relevant to the bookstore. My design is about the reading experience, so it’s about the book. I think that’s a good jumping-off point that can involve design.”
Taking cues from back-cover blurbs, Liu sketched user flows that brought in more textual information to help users navigate a cover-based browsing system.
“In a good design, I think you should keep something and you should create something,” Liu says. “I’m learning how to communicate with my client and what kinds of questions to ask at the beginning of the design process. I’m building my confidence, and I’m building my portfolio for the future because we are solving real problems.”
A new chapter for Literati online
Each student created a website redesign pitch, which they presented to Gustafson during class.
He was impressed by all of them and ultimately hired Samantha Greenhill, a senior at Stamps School of Art and Design, to implement her design solutions for Literati.
A Stamps advisor encouraged Greenhill, who is interested in a career in user experience design, to consider the Laws of UX class — and Greenhill says the UMSI course is by far one of her favorite classes she’s taken at U-M.
Her website redesign placed emphasis on the approximately 200 events Literati runs per year, and she added upcoming event blocks directly under a homepage carousel highlighting seasonal storefront photos.
Some of the aspects of Greenhill’s redesign couldn’t be implemented because they didn’t mesh with the constraints of Literati’s web platform. But Greenhill says the experience of taking a design from unbounded template to workable product with a real-life client has been beneficial.
While Literati leadership look forward to analyzing the effectiveness of their website redesign, SI 311 students like Greenhill can already measure their success.
“The initial designs I created to present to Mike in class will probably be the biggest portfolio piece I’ll add to my website,” Greenhill says. “After the presentation, communicating with the client and tailoring my design toward their needs — that’s going to be very beneficial, to be able to show future employers I was able to take my design decisions and alter and build off of them.”
UMSI students helping businesses
Gustafson encourages business owners with information challenges to work with UMSI students.
“It’s free, it’s a few hours of your time and it could revolutionize how you do business,” he says. “We want younger people to have that insight with our business. Why wouldn’t you want students to address your website? It’s sort of like 30 consultants working with you. For us, it was an incredibly positive experience.”
Learn more about client opportunities at UMSI.
Learn more about UMSI’s Bachelor of Science in Information program and how to apply.
