MENU
Booktrack Mockup

Booktrack

PROTOTYPING

UX / UI / Strategy

My Role

This work was completed while being employed at Jacknife.

I worked as a UX Designer alongside a Creative Director to establish the design strategy and create the interaction design, wireframe layouts as well as test and demonstrate the design through prototyping in addition to overseeing the user interface design work.

Background

Booktrack is a San Francisco based company that has created an e-reader technology that incorporates music, sound effects, and ambient sound. The company is privately funded by a wide range of investors including Peter Thiel, founder and former CEO of PayPal, and Mark D’Arcy, Director of Global Creative Solutions at Facebook.

Design Strategy

Through consultation with key stakeholders it was established that the project should explore strategies to improve the experience of buying of ebooks on the web portal. It was also necessary to use design to reduce the complexity in onboarding users and increasing sign-ups by explaining the technology in a simple and visual way. Streamlining the product and purchase screens would require multiple iterations and versions that could be tested and reviewed to ensure the most viable option would be eventually developed.

Booktrack Sitemap

Sitemap indicates overall structure of website and highlights pages that will be the focus of this phase of the project.

Process

Much of the work was initially informed by competitive overviews of existing online and ebook retailers as well as the use of internal user testing with early wireframes and prototypes to establish better user flows. Wireframing and prototyping would be use to establish and optimize the purchase and sign-up flows. The interaction design would need to work smoothly and intuitively while evoking other technological brands, appealing to a younger audience without alienating an older one.

The overwhelming number of clickable elements on a page meant that a system of buttons and links needed to be created to give order and hierarchy to pages that could easily become cluttered and unnavigable.

Wireframes

Multiple versions of heavily annotated wireframes were worked up and tested internally to identify the best strategies and make the requirements as clear and concise as possible. These wireframes provided rationale and backbone for the user interface design phase. The first phases of prototyping also involved using these wireframes to demonstrate conceptually how the purchase flow could be improved.

Booktrack Wireframes

Wireframe: overview of product detail page shows an iteration of the layout annotated with rationale and notes for key stakeholders and development team.

User Interaction Design

The overwhelming number of clickable elements on a page meant that a system of buttons and links needed to be created to give order and hierarchy to pages that could easily become cluttered and unnavigable. Primary, secondary and tertiary user actions were identified and labelled and then a design system was developed  to demarcate and support these actions.

Using scrolling elements and in-screen purchase dialogues made for a contemporary, easy-to-browse interface – there was no need to reload pages to see book details or make purchases.

Result

The final result was a working prototype of the new pages for both mobile and desktop that could be used by engineers to build the next version of Booktrack’s website.

Mobile Mockups

Mockups indicate mobile treatments for onboarding design, side-drawer navigation and login screen.

Booktrack UI 1
Booktrack Preview

Next Project

Mr. X

View Case Study Back to All Case Studies