PROJECT INTRO
In order to help college students buy and sell textbooks with ease, specifically with well-thought checkout process, I designed a mobile app and a website of an online textbook store.
Time Oct - Nov 2016
My Role Interaction Designer (Independent Project)
mobile app introduction
TXBOOK is a mobile app targeting on college students who need to buy or sell textbooks.
Textbooks are necessary for college students, but they might just need to use one textbook for a certain semester, and never read them again. Therefore, a platform that enables them to buy cheap second-hand textbooks, and to sell used textbooks will be helpful.
Books on TXBOOK are organized by majors and subjects. Users can provide their major and interest information, and TXBOOK will recommend books for them. Users can choose from brand new and used books. For used books, there are three conditions: Like new, Good and Acceptable. Book price is determined by their conditions. When selling books, users need to select conditions of their books according to instructions and sample photos. The money they can get from TXBOOK depends on the book condition.
the advantages of mobile context
- The camera of a mobile device makes the process of searching books easier and faster. While buying or selling a book, users can take out their phone and take a photo of the cover page or barcode of this book. This process is easier than typing the book name.
- Users can order or sell a book anytime anywhere. The process of checkout is highly simplified, and the mobile app saves users’ payment and shipping information. Users won’t feel frustrated.
Contextual Scenario
SCENARIO 1: BUY A TEXTBOOK
Eric is a college student majoring in HCI. He is taking Interaction Design course this quarter and he needs to buy three textbooks. Eric is a big fan of TXBOOK, an online textbook store.During the course break, he takes out his phone and opens TXBOOK mobile app.
SCENARIO 2: SELL A TEXTBOOK
At the end of the quarter, Eric thinks he won’t need the textbook anymore. He decides to sell it on TXBOOK.
Sitemap
Design patterns and rationale
Pattern 1: Navigation
I used bottom tab bar as global navigation. It’s very clear for users what they can expect from this mobile app through tab bar. Users can always access global navigation in an easy way (close to their finger), so that they can easily jump among tabs.
There is a top status bar. At the middle of the status bar, it shows which page the user is currently in. On the left side of the status bar, it’s usually “Back” (to last page or step) or cancel. On the right side of the status bar, it usually shows the link to next step. I think using top status bar is a good way to inform users where they currently are, where they came from and where they will go.
PATTERN 2: search by a photo
TXBOOK enables users to search books by taking a photo. Whether users want to buy or sell a book, they can either take a photo of the cover page or barcode. The reason is that it’s really hard to type on mobile devices, on the contrary, it’s quite convenient for mobile users to take photos. Therefore, searching by photos is an important function for TXBOOK.
Pattern 3: Use default information
It’s a lot of work for users to type on mobile devices. Therefore, it’s also important for the mobile app to have default selection or default pre-filled information. For return users, there is always some information that has been saved. It’s good to assume they will use the same information in the future transactions and have all the information pre-filled for review. The ultimate goal is to reduce users’ work on mobile app.
While checking out, TXBOOK mobile app won't ask return users to type any payment or shipping information if it has already been saved. The only thing users need to do is reviewing to see if all the pre-filled information is correct.
Interactive Prototype
The checkout process design for TXBOOK WEBSITE
I also designed the checkout process for TXBOOK's website.
Design Rationale
Users will experience a 4-step checkout process
The design rationales to set up 4 steps include:
- The assumption is that the user hasn’t filled in any personal information before. If we expose all the empty field at one time in front of him/her, the user will get anxious or scared. It will be better to let them complete a small part of text field each time and feel accomplishment each time.
- Delivery option is based on shipping address. Where does the user want to ship the books will decide how long it will take to be delivered, as well as how much will the delivery cost. Therefore, it will be great if we can separate shipping and delivery while making shipping one step earlier than delivery, so that we won’t make wrong estimation or mistakes on delivery.
- Users can jump back to certain page to edit it, but they have to go through all the pages that are after this one. The reason is that one change on previous page might cause other changes on the latter pages. E.g. Shipping address change can cause delivery option change.
the basic page layout
- There will always be a step indicator similar to breadcrumb navigation. Users will know which step they currently are, what they have achieved and what are next steps.
- The middle left side is for information that users need to fill in, including all the text field and drop-down boxes.
- The right side is left for a fixed order summary window. It shows the number of items, total cost of books, tax, shipping cost and the total cost of this order. Even when users scroll up and down the page, the order summary window will always be at the right side. Users can see the direct change on order summary after they fill in any information or make any changes. Apart from that, they can also go back to edit shopping cart by a link on this window.
- The “Save & Continue” button is always on the left bottom side of the page. It’s disabled until users fill in all the necessary fields.
Interactive Prototype on Axure
MORE PROJECTS
