Used Books Mobile Shopping App

Used Books is a mobile shopping app platform that allows users to buy books for less. Used Books sells books that have been used and are still in good condition, which in turn allows the users to buy more books for less.

Services

Art Direction

UX/UI Design

Mockup-5.png
Mockup4.png
Mockup8.png
smartmockups_kqilhrff.jpg
smartmockups_kqilcoyo.jpg

The Used Books mobile app was designed to have a clean and organized feel to it. The colours were colour-picked from pages of books to create a neutral palette that fits with the brand. The overall design was made to feel welcoming and light.

The Process

The Challenge

The goals were to:

1. Create a mobile shopping app that consisted of clear navigation and categories that meets the needs of new and old users.

2. Design a transaction and shipping screen that meets the business and user needs with the minimal amount of user information.

My Role & Main Tasks

I led the User Experience and User Interface design and prototyping.

1. Labelling & Navigation Systems

2. Competitive Research

3. Art Direction

4. User Experience/Behaviour Information

5. User Interface Design

Mockup-5.png
smartmockups_kqinqbiu.jpg

Labelling & Navigation Systems

The process started with labelling and navigation systems. I determined labelling systems based off of all my items by categorizing and sub-categorizing them. I then proceeded with user-testing to ensure my system was clear and concise.

Screen Shot 2021-06-25 at 1.24.41 PM
Screen Shot 2021-06-25 at 1.24.41 PM
press to zoom
Screen Shot 2021-06-25 at 1.19.09 PM.png

Research

I researched competing companies to determine what navigation and labelling systems were being used. The focus of my app is usability for old and new users which led my research in finding common navigation and labelling systems.

Information Architecture

I made flowcharts and wireframes to focus on behaviour-driven actions for both desktop and mobile.

DD50_AIA3_NikkiKeller_HomeScreen.png
DD50_AIA3_NikkiKeller_ItemsList.png
DD50_AIA3_NikkiKeller_DetailsScreen.png
DD50_AIA3_NikkiKeller_TransactionScreen.
DD50_AIA3_NikkiKeller_ShippingScreen.png
Nav-Wireframe.png
DD50_AIA2_NikkiKeller_Flowchart.png

Art Direction

After the research, I prepared a style board to guide the art direction of the mobile app to keep the design cohesive.

StyleBoard.png

Final Designs

After feedback, revisions were made until the mobile app was complete.

smartmockups_kqcyfxht.jpg
smartmockups_kqcyezdo.jpg
smartmockups_kqcyf6ra.jpg
smartmockups_kqd05zjj.jpg
smartmockups_kqcyer8n.jpg
smartmockups_kqcyekbu.jpg
DD50_NikkiKeller_HomeScreen.png
DD50_NikkiKeller_ItemsListScreen.png
DD50_NikkiKeller_DetailsScreen.png
DD50_NikkiKeller_TransactionScreen.png
DD50_NikkiKeller_ShippingScreen.png
DD50_NikkiKeller_NavigationScreen.png

Colour Palette

I colour picked a light beige from a page of a book for the main colour of the app. I accented that beige with a palette of neutral browns, black and an off white. I chose colours that accented well with the main colour.

For the header text, I chose a dark brown to add a soft contrast to the warm beige.

Colour-Palette.png

Typography

I chose Orpheus Pro Bold for the headers as it has an elegant, old fashioned look to it that gives off feelings of olden day books. I paired it with Avenir to use a simple text that would typically be used as text in books.

type-1.png
type-2.png