Basics

Process

Design

Next Steps

Barnes & Noble Mobile App

UX/UI Design / Concept

A conceptual mobile app designed to help regain lost marketshare and make the bookseller competitive again.


The Basics

Team Members: Patrick Vong, Sahar Abdizadeh

My Role: Ideation, Storyboard, Research, User Journey, Wireframes

Timeline: 2 Weeks

Problem

Barnes and Noble has been experienced drops in sales both in store and online for two years. Research points to leading causes being a failure to compete with Amazon, and a digital platform that frustrates users.

Challenge

Come up with a solution that improves the user experience of Barnes and Noble's digital platform that will also help the book seller become more competitive with rivals such as Amazon.

Research showed the problems plaguing the company are market based, and stemming from not being technologically competitive.
From the research a strategy to help boost Barnes and Nobles standing in the market began to take shape.


The Process

The development of a storyboard that details the vision of this solution was a crucial first step, as the strategy on paper wasn't concrete enough to move forward. Visualizing the app in action helped the team understand what we would be creating.

The user persona was crafted as a bit of a composite of the Barnes and Noble customers who were interviewed, mainly because most of the the answers to the interview questions were so similar. The user journey was also crafted based on overwhelmingly common experiences shared with the team by the interviewees.

Sketches of the layout and development of a paper prototype helped sort out what the elements of the app would roughly look like as well as their general placement.

Following that was the first of two sets of wireframes where the layout of each page, the sizing and spacing of elements, and the iconography all became more developed. Preliminarly feedback on this iteration indicated that the design seemed "busy". The second iteration would address this by simplifying the layout.

The second set of wireframes refined some of the iconography for further clarity (i.e. the barcode scanner went from a lens to something that more literally communicates "barcode scan"). The layout was also simplified in ways that helped improve usability:

This iteration also saw the elimination of the hamburger menu in favor of a layout that didn't require one since all of the apps features could be accessed in the top and bottom navigation. The placement of which depended on the likely frequency of their use (with the features more likely to be used being on the bottom).



The Design

Finally, hi-fidelity wireframes were developed for each of the user flows expected to be used: Shopping, Notifications, Onboarding, and Checkout.

Other features include how the user is notified to take advantage of the app. Using location services a user could opt to have the app alert them to the fact they are near a Barnes and Noble and to take advantage of exclsive deals tailors specifically to their interests.

The onboarding is quick and simple, incorporating the opportunity for users to indicate their preferences at this time, or later in their profile settings.

The purchase flow aims to require as few taps as possible by using already stored information on the user, if it was supplied during the onboarding process. If this wasn't done the design of the checkout phase allows the user to enter payment information quickly.



Next Steps

Future considerations for this project include extensive user testing to see not only their reaction to the features but how well they would understand and use them, followed by continued iteration of the design based on the results.


Back to top