The Redesign of Pibrary, the App for managing your books
A long time ago a friend of mine asked me to redesign his App and it is about managing your books so you could keep track of which ones you own and add books to your wishlist and lots of other related stuff, so basically it’s a digital organization library.
The app is build for Android platform and it works from API level 15 and more.
His app is targeted for users living in Iran therefore the text within it is in Farsi.
Here is an abstract video of the way it works:
I would like to point out some of the issues with the App:
- UX is one of the major issues here because adding attributes to your entities is very complex.
- A splash screen at the very beginning is annoying.
- Not fully using screen real state is a waste of space.
- Filtering items are used as actionbar tabs instead of easier implementation such as using overflow button in actionbar or having less than three tabs.
- Use of very small buttons makes it hard for the user to navigate through the App.
- No specified color scheme which reduces color consistency.
- App uses an obsolete Theme.
- Use of images for some buttons not only makes the App have slower performance but it also looks bad with devices having higher resolution screens.
- The settings window only consists of ONE item!!
- Backup uses device’s local storage.
- Restore also uses device’s local storage.
- Overall user interface is not satisfying and old.
I’ll first show my redesign then I talk about the UX and my suggestion and solutions.
The first thing I did was Drawing the sketches and Mind Mapping the idea of the App so I could have a very clear look at why it exists and how it should help people.
A lot of what I drew in the sketches were not implemented during the design.
The reason is when you are designing your idea using an App (in my case illustrator) you realize that you could do much better if something transforms into something else.
Mind Mapping is crucial to let you know what are the main elements of an App.
What I noticed during sketching is that you cannot really define the color of your unless you specify a color scheme based on the idea of it.
A lot has changed and to point out a few:
- Actionbar is simplified to Title, Author and Subject (Category)
- Each Item consists of an image and a bold Title with a description.
- A FAB to let the user add a new item.
- Material Design elements with respect to it’s Guidelines (As much as I could)
- The Color and Theme of Elements in the UI are based on the color scheme of the background image.
- Each item has a transparent background with the proper color and custom shape.
- Each Author’s books is individualized by a compact view of his bio and works in a clean minimal look.
- Each category is split into different genres and can be scrolled horizontally.
- Tried to make it as straightforward as possible.
- One thing I changed is the ability to scan the cover of a book and let the App find it on the internet and automatically add it’s information without asking user to enter them several times. #teamux :)
- And for the navigation I decided to use a navigation drawer, although because of limited activities, this App doesn’t really need one but it looks so clean and simple that I decided to use one.
Let’s have a comparison between the redesigned App and the old one.
- Use of RecyclerView instead of ListView for unlimited number of reasons.
- Use of AppCompat for lower API levels Compatibility
- Use of Material Design animations
- Add different kind of filters within overflow menu
- A parallel effect while swiping between tabs in the Home screen
- RTL Compatible UI
- Option to backup and restore App data using Cloud-Based Services
- Suggestion to buy a book from Online Stores
- Timed-Base Reminder
- Integrated Universal Search: which basically means the App should be able to look for the items locally saved and if they are not then searches over the internet.
- Automatic Cover Download: It should be able to search for the book’s name and find it’s proper cover image.
- Auto Text Completion: when adding new books, it should be smart and suggest previous names so user could prevent duplicating items.
- Automatic Bug Report: This one is Self Explanatory
- Cover Scan: It should be able to scan the cover of a book and find out all the information related to and fill the data entries.
- Use of Google Play Services (e.g Qr-Code Scan)
When I was redesigning the Application of “Mobile Bank Sepah”, a lot of people helped me by providing their feedback and I always loved doing what I do which is developing Mobile Applications, specially redesigning an App.
This App Redesign was requested by one of my friends who is also a developer and I hope he is happy with the result.
این مطلب در مورد طراحی مجدد برنامک (اپلیکیشن) موبایل بانک سپه هست و شامل تلاش 45 روزه من برای بهبود وضع ظاهری و تجربه …medium.com
All the books and their data are collected from the goodreads website
The Designing Software was Adobe Illustrator running on Windows.
Link to download the App for Iranian users.