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.
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.
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.
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.
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.
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.
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.