Bookly: Book Shopping App UI Concept Design
Kazi Mohammed Erfan
Bookly: concept design for a book shopping app
Bookly is a concept design, not client work. It is a mobile app UI kit for buying books, with a clear path from browsing to checkout, and we did the UI/UX design and art direction for the whole kit in Sketch.
Type: Concept design · Industry: eCommerce, books · What we did: UI/UX design and art direction · Tool: Sketch · Published: Behance, 2018
About the concept
There is no client behind Bookly. It is a self-initiated app UI kit for book lovers: a set of ready screens and parts for a book shopping app. Nothing was built or sold as a live app.
The challenge
Buying a book on a phone should feel as easy as browsing a shelf.
Discovery first. People browse books by cover and category, so covers had to lead every screen.
A short path to checkout. From a book page to payment in as few steps as possible.
Room for reading. The app needed space for content like a blog, alongside the shop.
Two screen sizes. The kit had to work on both iPhone X and iPhone 8.
What we did
A shelf you can scroll
A home screen with search, categories and large cover art.
Bright category tiles in different colours, so browsing feels light.
One clear button on each book
Product pages with the cover, price and one clear add-to-cart button.
Cart and checkout with saved card payment.
The pages around the shop
A welcome screen and a short sign-up form.
A side menu, profile, blog and about pages.
A kit others can build on
More than 14 screens, all in vector shapes, with 2 icon fonts.
Every screen designed for two resolutions: iPhone X and iPhone 8.
A purple brand colour and a simple book-mark logo used across the kit.
Scope
Included:
UI kit in Sketch: welcome, sign-up, home, product, cart, checkout, side menu, profile, blog and about.
Art direction for the kit and its presentation.
Not included:
A client. This was a self-initiated concept.
Development. No working app, back end or payments were built.
A real catalogue. The screens use sample books.
Results
A UI kit of 14+ screens for a book shopping app, in two iPhone sizes.
Published on Behance in 2018.
There are no usage numbers, because this is a concept, not a live product.
What we’d improve next
Add reading samples. A “read the first pages” view on each book page would help people decide before they buy.
Add a wishlist. Letting people save books for later would bring them back to the app.
Add reviews on book pages. Ratings and short reader reviews next to the price would help first-time buyers choose.
Working on something similar?
I design websites in Figma and build them in Framer or Webflow, so your team can edit every page without a developer. Message me here on Contra with your site or Figma file, and I’ll reply with a plan and a fixed price.
Like this project
Posted Aug 15, 2024
A mobile app UI kit concept for buying books: 14+ screens from welcome to checkout, designed in Sketch. Concept design only, no client.
Likes
1
Views
41
