BOOKs.com

APP Redesign

Design Thinking

To solve problems effectively, it is important for us to focus on our comparative advantage, this rule applies on both businesses and individual.

For me, I have to focus on redesigning fast to improve my skills and accumulate experience in this stage of my career. In the business side, under this competitive environment, businesses should let their app focus on its primary features to help user solve problems.

Without concentration, we will lost our direction and focus, we can never solve problems under distraction.

Project Briefing

As I am accumulating experience in UX Design, I am challenging myself to create quick projects and to redesign in a fast pase.

We sometime would only have a tight scheule to create design that could solve real problems and we could not have a rich budget for user research and usability testing.

Working individually, I want to train myself to create good UX and UI design with comphrehensive comparative benchmarking and existing data analysis.

Despite having an extremely shortframe of 3 days, I have redesign the Books.com book scanning app for 2 use cases: Scanning a book to purchase online and to trace the book order. I first improved the workflow of the app and later I also maxized the existing fuctions to reinvent the app to solve problems.

Outcomes

Make scanning function the first priority
Optimized the user flow within the app
Make the call to action more obvious
Make good use of the existing function
Improved app aesthetics

Tools

Figma
Miro
Photoshop

Backstory

I was originally working on the website redesign

The Book.com website is very clusttered, and it is frustrating to view the website on any devices.

I have been working on the redesign of the Book.com website for a month and I was trying to make it simpler, but it is a complex project that takes time to finished, I was feeling stucked.

And then I found that, they have a mobile app for user to scan a real book with its ISBN barcode and to search it in the Books.com website, it is a very good case to work on.

An APP with a great function and bad reputation

The company created this mobile app for book scanning. But the app is also cluttered with distractive marketing information and this casued bad reviews in the Play Store.

After I downloaded it, I found out that the scanning function is actually very useful, it is just submerged in a bad flow design and tones of distraction.

After I used the app, an idea pops out. Why not making the scan function the primary use case and let the user scan books immediately when they downloaded the app? With this idea in mind, I started the redesign project.

Case Study Contents

The Ideology
Quick Research
User Paint points
The Redesign
Usability Testing

1 - The Ideology

Primary Feature First

In the new design, I want to let user focus on solving problems. Making the userflow go smoothly to help user solve problem with obvious visual hints.

Also, I want to make good use of the existing features, which is actually useful for the user to find the books they want to purchase online and for the business to boost their sales with the app. In stead of feeding user with endless information to distract their decision-making, I want to help user to focus on solving their problem with a lazer-focus UI design.

Use case scenario

Users who have a books.com account wanted to scan a physical book in a bookstore with the app to see if they could purchase the book online in books.com with a better price.

2 - Quick Research

Short User Research

I asked myself and 4 of my friends who have used book.com to purchase book before, none of us knew the existance of the app. After introducing them to the scanning function of the app, they all found it very useful and they wanted to use it in real life.

In the same time they found out the app is filled with too much information that distracted them, and they can't find the right button to access the cart to process their payment within the app.

User's Intention

The target user of the app are those who have used Books.com before and they hope to solve the following problems:

Scan the book in a bookstore and to find it online
Preview the content of the book (They can do it in a real bookstore or do it on a website)
Purchase the book online with a better price

The fact is that, the price of the book online is much more a bargain than offline, like myself, I do like to discover books in bookstores and then to purchase them online with a better price.

Business's Intention

It is normal for the business to be eager to put as much information on an app to boot sales. But flooding the app with too much information, the primary scanning function of the app is submerged. Hindering this comparative advantage would indeed reduce the chances to close a deal.

The 4 main features the company wanted to include

As stated in the welcome screen of the app, the app have 4 main features:

Scan a book
Scan Record
Buy next time function
Order Tracking

It seems to me that, books.com want to create this app to help their user to scan book, purchase book and track their orders.

As the app is named 博客來快找 (Translate: books.com quick find) and the app icon is illustrated with a bar code scanner, it is obviouly that, the scanning feature is the primary function of the app, which is submerged in distraction.

The original user flow of the app is filled with pain points and obstacles

After knowing the intention, I have sketch out the userflow of the existing app and then I have located 3 Painpoints. The user have to go through 7 pages and 6 steps to complete the journey from opening the app to the payment page.

3 - USER Paint points

Pain point 1 - User can't locate the Scan Function easily

After downloading the APP, it is really hard for the user to find the scan button, they are directly brought to the homepage that culttered with informations. User need a heavier cognitive load to locate the scan button to perform the primary function of the app.

Pain point 2 - The Book Preview Function is not obvious

Books.com have a very good book preview feature, although user can read the book physically in the book store, but the preview function is an effective tool for user to make the purchase decision. In the original design, the features is not obvious enough to invite user to use it.

Pain point 3 - User can't process to payment easily

After hitting the put to cart button, it is hard for the user to find the way to process the payment. User have to go back to the top navigation bar, to click the cart icon to access the cart page to process the payment. These extra steps would potentially reduce the intention of the user to complete the order and to pay.

Redesign Suggestion

Make the scanning feature a primary use case

Let the user use the primary feature immediately when they downloaded the app. Put the scanning feature in the first priority, is the best practice for the business and users to solve problems. User don't have to be distract from other information and they can find the book in a faster manner when they can scan the book immediately after downloading the app.

New Information Architecture for the app

To smoothen the user flow for the user to solve problems - to find & purchase a book. I removed the step to the homepage and now the user can access to the scan feature immediate right after giving access permission to the app.

By removing the obstacle within the userflow, the user could enjoy the streamlined journey to scan a book, the preview the book online, purchasing it and to chase the order within the same app.

Redesigned user flow that allow user to access the scanning feature immediately

4 - The redesign

The core thinking of Redesign

Separating the app and the website

Differentiation between websites and application. The website is in effect body filter with information to attract sales, but it is not the user case for the app. User who downloaded the app should have understood the brand well, the app should focus on helping user to find and purchase book with the scan function.

Respect user who downloaded the APP

As a business, we are asking the user a lot to download an APP, the user need to permit the access of the phone camera and data to the app and they are exchanging for the service of the business with their personal information and money. It is important to provide the primary function to the user without distraction to respect their trust on the business. This is an import ideology to maintain the goodwill of the business and the brand with a user experience that respect the users.

Streamline the workflow

Remove obstacles in the customer journey, provide them direct features to solve problems under few use case. The new design is built upon these main 2 use cases:

To scan book, review the book, put in cart and to process payment.
To track the order after purchase.

▍Aspect 1 - Scan Function

Put the scan button in the welcome screen

Instead of locating the scan button in the buttom of the tab, the user will have the button on the welcome screen, right after they downloaded the app.

With direct access to the primary function of the app, user can scan a book immediately after downloading the app and giving authorization to the app.

Originally the scan button is located subtlely in the bottom left in the tab bar which is not obvious.

The user can immediately spot the scan button with distinctive design in the welcome page.

Put the Scan button every where

Locate it obviously in the middle of the navigation tab bar, so the user can scan book anytime when they opened the app.

Putting the primary fuction button everywhere is an important appraoch to invite user to use the feature to solve problem. So I make the button big and shape enough to invite the user to use this fuction.

▍Aspect 2 - Preview Function

Make the Button Obvious

The preview button is quite hidden in the original design, the preview function is very useful for the user to make their purchase decision online. In my redesign, I decided to make it more obvious and have a better differentiation against the other buttons.

There are two alternation, first I wanna to use color differeniation to make the button stands out, turn out it is actually not visually impressive and during the usability test, the user still missed it.

Redesign the button to be visually stand out to invite users to use the function.

Optimized the button to maximize accessibility

Beside color different, I used drop shadow to make the book preview button stands out in the second alternation. Turns out, all the user I test with in the usability test successful locate the button and to interact with this feature.

▍Aspect 3 - Call to Action

Floating Call to Action Box

In the usability test for the original app, users always can't locate the price of the book. In my redesign, I put the price and put into cart button on a floating box in the book profile page, the essential information and the CTA will be visible to user all the time

Check out option accessible everywhere

Member login is a request condition for the business, so we also have to streamline this step in the user flow.

Checking out in the cart page is quite a convention in eCommercial, in the original design, the cart is located in the top navigation, it's a common place to locate it, but during the usability test, all user mentioned that, they can't locate the cart immediately and to process the payment.

As to let user process to payment more easily, the put to cart button will change to process payment after user selected it. This design will invite the user to process the payment in an easier streamline manner.

Purchase summary

From a small scale comparative benchmarking, I found that, a purchase summary on a floating screen could let the user review their purchase and to process payment anytime.

I created this function in the design and the user found that this feature could invite them to process the payment more easily in the new design.

▍Aspect 4 - User Homepage

One of the core idea of the redesign is to stramline the userflow of the app, from scanning to tracking orders.

In the original app, the main features are scattered inside the bottom tab bar. The landing page after user logged in is filled with unrelated information.

Whene I am sketching out the new design flow, I think that it is a good way to centralize all the important feature on a homepage and make the information shown on the page relavant to the user.

Within the User Homepage, there are 4 main features:

▍Process Payment

To increase the call to action and to streamline the flow for the user to process to payment after they logged into the account.

▍Order Tracking Function

User can preview the latest order easily within the homepage and understnad the stuatus of their order immediately.

▍Scan Record

User might scan a few books in a single time, it is important to let the user trace back the scan reocrd. Beside the access to the scan record page, putting the result record in the homepage could convience the user to go back to the book profile faster.

▍Search Function

Lastly, in the new design, I put the messy search page in a separate screen and I bundle it together with the hamburger.

As to reduce distraction, I want to keep the homepage clean and to make all the information personalized for the user.

Isolating the user friom the massive information might hinder sale a bit, but I believe if the user can concentrate on doing their tasks, they can save more attention on deciciding to purchase the book with us or not.

5 - usability test

Press R to return to the Welcome Page to go through the 2 use cases of scanning book & tracking orders.

A Streamlined Journey to Purchase Book Online

I conducted the usability for 5 users with the prototype above, the feedbacks are all positive and the user enjoyed the experience of using the redesign app that removed the original obstacles.

Usability Test Objectives

Scan Button: To test whether user can use the scan fuction immediately and to access the scan anytime within the app

Preview Button: To test whether user can locate the preview button to use the book preview function

Purchase Flow: To test whether user can go through the purchase flow smoothly from put to cart to the payment page

User Homepage: To test whether the user could track order and to search books with the new personalized

The user now only have to go through 5 pages and 4 steps to complete the journey from opening the app to the payment page.

The next step

With limited time, I could just focus on improving the accessibilty of the primary scanning function. Further redesign can be made to reinvent this app into a comprehensive e-commerce app to provide a full journey for users to purchase book online.

Redesign of these aspects could take the app into the next level:

Improving the Payment Page
Improving the Search Page
Linkage to the Books.com E-book app
Create scanning button widget for Andriod

Self-evaluation

With such a limited time, I am quite satisfied with the result, now the redesigned app is actually a tool that could help users to solve their problem directly and I think that it is the meaning of applying UX in product design.

In reality, this must be a much more complex progress, as it is always not easy to change the convention within a company with a certain scale, books.com is big and they have been doing this business for a long time. The integration of the app to the business system is never an easy task, if this is a real project, I will prepare myself to invest more time and effort on the stakeholder management.

Since this is my first time to use Figma to do the design, I found it very useful. Unlike the projects I worked on Adobe XD and Sketch, Figma is based on web, I could literally design my screen anywhere in browser. Also, with lots of reference online, I used them as good material and great lesson to assist my journey to equip problem solving skills to solve users problem with good UX Design.