Reading into Barnes & Noble
After an incredibly difficult experience trying to use the current app provided by Barnes & Noble, I decided to take a stab at redesigning some of the core functionality of the product.
In this short case study I will shed light onto some of the problems I identified with the user experience, as well as provide a few examples of my attempts to solve them. This project was a nice break from the seemingly constant stream of redesigns for social media platforms like Twitter, LinkedIn, and Facebook. Hope you enjoy…
Experience
This all started with a simple quest to buy a book for a friend. I know, how kind of me! They’d be especially appreciative if they knew how difficult that ended up being…
Now going into this endeavor, I had no clue what I was looking for. I knew vaguely what kind of books they typically read, but didn’t have a specific title or author in mind. So my plan was to browse around a bit and find something I thought stood out.
Immediately upon opening the app I identified what ended up being the primary issue and ultimately the reason I decided to dive into this redesign.
Navigation.
As has become very clear over the past few years — especially with the rise in both native mobile apps and the move to a mobile-first web design approach — intuitive navigation and logical information architecture is key to any enjoyable user experience. The current Barnes & Noble iOS app utilizes a navigation bar that is crammed with icons and devoid of affordances (like labels or indicators for what feature you’re viewing).
On top of all that, the primary means of browsing and all account information was tucked away in a hamburger menu in the top left.
I’m sure we’ve all read an article or five in the past year about the woes of housing primary navigational elements at the top of the screen, battled with the reality that human fingers cannot extend like Mrs. Stretch, and seen a heatmap of every device and how freezing cold it is up in those top corners.
The arguments for the use of bottom screen navigation (a “Tab Bar” on iOS) were strong, and after auditing the features of the app I was able to distill the navigation into a tab bar where each of the primary functions of the app are available.
While trying to browse on the current app, one problem I ran into was that I consistently found myself in a seemingly inescapable black-hole of child screens… Home > Books > Top 100 > Genre > View book. With this structure, I had to click back at least 3 times to get Home just from looking at one book. God forbid I had clicked on a suggested book from another “Book Details” screen.
Oh, and I didn’t even mention getting to the book in the first place… eleven. I wanted to find a Top 100 Book on History, and it took me eleven clicks to get there.
Fixing this was my next order of business. As you saw in the earlier screenshot, the only way to browse (if you can even call it that) the different products the app has to offer is via the side menu activate by the hamburger. I addressed this usability problem by appending a horizontal scroll bar at the top of a new “Browse” tab which allows you to quickly move between different departments and find what you’re looking for.
The final major adjustment to the interface that I’ll touch on is Search.
In the current app, the Home screen has a search bar at the top underneath the Nav Bar, which quickly gets lost once you scroll. It is also only available as an icon in the Nav Bar on most other screens.
Considering the context of a bookstore, and how valuable search could (read: should) be to a potential user, I decided to give the search feature it’s own tab. I took some inspiration from Spotify here, providing a list of recent searches initially with the option to start a new search if desired. You can also scan a book you have on hand to try and find a match.
Design
From a pure design standpoint, there were 3 things I wanted to make sure to improve on throughout the app.
- Better utilization of whitespace
- More consistent use of typography
- More meaningful and uniform icons
These were my primary focuses while design the interface. I also tried to give the designs some depth by using shadows on actionable items like buttons and diffuse-shadows for book covers, similar to what has been seen in recent versions of iOS.
Conclusion
While I readily admit that these ideas haven’t been user tested to death, each decision made was made for a reason. After spending some time with this small side project, it felt like a substantial improvement in user experience from usability, functionality, and design standpoints.
If you’d like to see the full-pixels of these screens, including some of the additional screens I designed that weren’t featured in this article, head over to Dribbble and check it out!
I’d love to hear any feedback anyone has on areas where there’s room for improvement!