GIGL App— UI/UX Redesign case study

15 min readAug 27, 2022

🤔What is GIGL?

GIGL is an application where we can read & listen to audiobook summaries of books for free or with a paid subscription.

In short, it is similar to Audible but it only provides audiobook summaries, not the complete audiobook.

Disclaimer — This is a personal project I did in 2nd year of my B.tech. I was not paid by GIGL to redesign the app.

👀How do I know that its design needs to be improved?

I read books a lot, mainly in the self-help genre & for revising the content of any books that I have read in the past I listen to the summary of that book.

I used to search for summaries on YouTube, but one day I discovered this app through a YouTube channel where so many book summaries were available in a more detailed and simpler way.

So I installed the app & after opening it I was bombarded with so many permissions which made me think not to go forward as they were asking for call permission with other permissions but I proceeded.

And then I searched straight for the book “Ikigai”, Kudos! It was available in this app, so I opened it, and then it showed me that this book is available only with a premium subscription which pissed me off.

The same thing happened a few more times. Now I was frustrated because it showed me the book I was looking for but when I opened it to listen, it showed that it was a premium book.

This happened because there was no indication in the search results that this book comes with a premium subscription.

And later when I explored the app I noticed that there are so many things that can be fixed & improved.

Since I was also searching for a project Idea to show my problem-solving skills I took this challenge as a personal project for building a better experience in any way I could.

🥊 Deep dive into the app

Now to solve problems a user might be facing first I needed to understand the whole app’s features & functionality. So I deep-dived into all the different sections of the app.

During this exploration of the app, I was clearly able to recognize some problems a user might be facing.
Overall the app looked like some developers who built the whole app on their own without a designer.

💸Business model

There are things that businesses do on purpose that might frustrate the user(Eg:- Running ADS) so we can’t remove those things even if it’s frustrating for the user, so to understand that first I need to understand the business model.

The app generates revenue💰mainly from 3 tunnels.

Ads.
Paid subscriptions.
Affiliate marketing(There is an option to buy books from Amazon).

⭐Reviews on Google Play Store

I looked at reviews on Google Play to understand the problems of regular users of the app. I went through a bunch of negative & positive reviews with the help of the filter option provided by Google Play Store.

Here are some of the reviews I discovered that point toward some pain points.

Some pain points I discovered from reviews

Majority of users were very satisfied with the quality of audiobooks but they all were very mad about the poorly designed interface.
Many people didn’t feel secure in providing call & camera permission.
Book recommendations are not good.
Not able to find books that were recommended through notifications.
People feel the lack of basic features in audiobook player.
The navigation in the book reader is confusing.
The price of premium membership looks very costly.

👦User interview

Now to understand what problems users are facing I conducted user interviews with 8 people.

7 of them have never used GIGL before but they were using other similar platforms like KUKU FM, and Audible & 1 was a regular user of GIGL.

I asked them to use GIGL for a few days instead of the current audiobook apps they were using.

✡️Some key insights from the interview

As all of them were using other audiobook apps they also compared it with the app they were used to.

I was thinking that this might happen…
5 of them refused to use the app because it was asking for irrelevant permissions (access to phone calls, Camera & storage permission)
But somehow I convinced them to give permission & use the app

As sometimes they listen to audiobooks while doing some other work they where have problem in controlling the player while working.
They were not able to pick a new book easily.
Sometimes when they listen to & read audiobooks simultaneously they were not able to find out where they are in the written summary once they lost track.
As they were used to other audiobook apps they feel the lack of very basic features in GIGL like Taking notes, bookmarks, & some other small but important features.

🖥️Secondary research

Now to gather insights from other people's work and research & to understand other problems & behavior related to audiobooks & books I did some desk research.

Some key insights from desk research

Problem with audiobooks

We cannot see images or diagrams in audiobooks that are part of the book.
Although audiobooks help people complete books faster, but they lack the feel of an actual book.
We can’t highlight important lines/parts in audiobook.

A importent thing from the reasearch of Anushka Jain
Audiobook services are offered by many apps like- Audible, Google Play Books and Spotify. They have almost the same interface and features. The audiobook’s main interface is like a music player.
All the audiobook players are designed similar to a music player not according to the requirments of a audiobook.

Audiobook listening Behavior

31% of people listen to audiobooks while driving or on a road trip.
25% of people listen while doing household work.
18% of people listen while exercising.
10% of people listen while walking.
And remaining do it either in free time or some other small work
Mostly people don’t know what to read/listen next after completing a book.
People have difficulty in recalling what they have learned from a audiobook.

😖 Pain Points

After analyzing the current app, play store reviews & conducting user interviews I was able to identify major problems in current app designs.

🔸Inconsistency in design — The app doesn’t follow a consistent design style & systems, throughout the app, things look very different from each other.

🔸Lack of good aesthetics — Aesthetics directly affects the user experience because as human beings we consider aesthetically pleasant designs to be more functional & usable(Acc. to 1st law of UX — Aesthetic usability effect).

🔸Lack of basic features — As mentioned above the app lacks very basic features that other similar apps have.

🔸Bad recommendations — The same Books are recommended to every user
If the app doesn’t recommend personalized books to users — then the number of books they will listen to will reduce — which will lead to a decrease in time spend on the app — which ultimately leads to a decrease in the number of active users.

🔸Security issues — The app ask for call & camera permission with other permissions without mentioning its use. Which makes many users not go further in the app and uninstall it.

I designed the solution in a way that will not only help the user but will also help businesses in retaining more users & revenue.

Let's start…

🔀App setup flow

Currently, the app asks for all permissions at once as soon as we complete the signup
I removed the permissions from the app setup flow & now we will ask for permission when it is used for the first time by mentioning why we need it.
Like:- Asking for storage permission when downloading an audiobook
I also asked for favorite book categories & book language, we will use this to make book suggestions better according to a user. this will definitely increase the no of books listened to & time spent in the app by users.

💡 Home screen

The home screen is the biggest of all screens & contains many different elements so I will break down individual elements one by one for a better understanding.

IA of the home screen

Currently, the information & different categories listing of books is randomly placed, it is not organized according to the interest & needs of a user.

For many events, roughly 80% of the effects come from 20% of the causes. (Pareto Principle — Law of UX).

Keeping the Pareto principle in mind, I redesign the IA of home page so that the user first sees that 20% of books in which they are interested out of thousands of available books.
I placed 4 option continue listening, For you, Trending, and Popular books on top of the list as these contains the books in which the user might be interested.

Let’s see the new design of the home page

I removed Change language button from top as language is not something that users will change frequently, We have already asked the book language during account setup.
If users want to change the language they can do it from the settings.

I added a button for a premium membership mentioning the price of 3₹/day.
It will promote users to buy premium memberships without getting too much attention and space.
I moved the search option to the bottom nav & gave it a full page as it’s one of the most prominent features of the app.
And also added a notification option, in this users can find all the books we suggested through notifications

Currently, there is no clue that Today's special is a carousel slider.
I resized it a bit and make other cards visible & redesigned the card in a more organized way.

Continue listening — This one is newly added, here user can simply tap on the book and it will resume from where they left last time,
the progress bar below shows how much book is left with time
Unlike all other books section here when the user taps on the book details page will not open as the user is no longer required to see book details once they have started listening to the book, instead it will open the audiobook player.

Book cover view

Currently, the book title is not visible completely when it's overflowing and there is no point in showing an incomplete t itle, it’s not helping in any way.
I split the overflowing text into multiple lines so that it‘s completely visible.

But do we really need to put the book title(name) when it‘s already written in book cover❓
The answer is Yes, because sometimes the book title is not easy to understand due to the design of book cover.

I changed the book language indicator as it’s taking too much attention than required, although it’s important to mention the book language but practically thinking if a user has selected Hindi language for books then the books we will show them will be Hindi across the app, no English book will be shown. so there is no point in giving language indicators that much attention.
And if the user has selected both English and Hindi then book language really doesn’t matter.
I have kept its position same throughout the app because if I changed it user might have a problem finding it on different screens.
I changed the locked icon with a crown so that gives a feeling of the premium book, also changed the placement currently it interferes with the book title.
And added ratings (rating is a new feature, will explain later why needed this)
Rating will help users in picking the right book

Premium subscription card & Pricing page

The current premium subscription card doesn't even look like a card it looks like another book cover in the list, and also it’s placed in the free summaries section, where it will grab little to no attention from users.

When multiple similar objects are present, the one that differs from the rest is most likely to be remembered. (Von Restorff Effect — law of UX)

I gave it almost one page of space & since it’s very different from any other element in the entire home feed it will grab the user's attention most as compared to any other element.
I showcased the price in days so that it feels like a very small amount to the user —less than 3₹/day.
Breaking down the price in days can increase the probability of users buying any product or service.
‌I also listed the benefits of premium membership and gave a big clear CTA button to start premium membership.
On the pricing page, the offer is not shown correctly, there is an offer timer on top of the page but there is no price shown there instead it’s inside a card far away from the timer & it doesn't even look like an offer.
I redesigned it in an organed way so that it's easy to understand.

Famous List

Currently, if we look at the famous list enough information is not shown.
If we take the first card in the list there is a photo of a person and his name and there is a logo of Lenskart in the background,
now not every user will be able to guess that he might be the founder of Lenskart.

Thinking from uses perspective:- Who is this guy? and why should I see his favorite book?

So I added a little description about the person, this will also help in other lists we can give a better idea to users what they can get with this book list.

Thinking from uses perspective (after changes):- Ooh he is the founder of Lenskar, he is very successful I should definitely check his favorite books.

Here is the final combined home screen

🔍 Search screen

Currently, users can access the search from the icon on the action bar
Since it’s one of the most prominent features I gave its own page & moved it to the bottom navbar.

Currently, a lot of space is wasted, it can be used to improve the search experience & save the user time by adding some elements.
I added a voice search, recent search list & categories so that users can easily access book categories without scrolling on the home page.

Search results

Currently, if the user has selected the English language(as the default language for the audiobook) then the books shown in the search result will also be English only.
But there will be scenarios when a book might be available in Hindi but not in English, in this case, the user has no way or hint to find the book in other languages.
So I added a language filter
if a book is available in another language then we will tell the user “some results are available in the other language” & then the user can see the results if they want to.

🪟 Book detail view

On this screen, there is one of the three revenue sources of the business — Affiliate marking
An amazon logo is placed on the right side of the book cover, only a few people will be able to guess that it's for buying this book from amazon as there is no label.
I converted it into a chip & placed it on the action bar so that it’s clearly visible.
Currently, there is no option for bookmarking & there is no rating system for the book, user can only like a book.
With likes, one cannot judge if this book is good or not. so I changed likes & comments with ratings & reviews.
I divided the page into different sections using Tabs so that users don’t have to scroll long.

🎧 Audiobook player

While doing research about audiobooks one thing I discovered is that people miss the feeling of the physical book while listening to audiobooks.

The current audiobook player gives the feeling of a music player it’s identical to what a music player has.
In an audiobook player, there is no need of a big book cover/thumbnail & name because in music player music changes after a few minutes & to identify which music is being played currently we require a thumbnail and a big name.
But in the case of GIGL’s audiobook, there is no such thing the audiobook will not change automatically.
So I removed the book cover and placed the book name on the action bar & there are 6 parts of every audiobook & parts don’t have a name so there is no such thing to be displayed as a chapter name.
And now we can use the space to show a transcript of the audiobook, showing the text will provide an actual book reading experience to the user. and we will also be able to show images & diagrams in this new player.
I also added driving mode, sleep timer & add note functionality to improve the user experience.

Book reading view

Currently, the user needs to swipe up to scroll the text but when one part/chapter is completed then the user needs to swipe left/right to jump from one part to another. with this many users were having problems as they were not able to identify that they have to swipe left/right to change part.
So I changed it to a vertical scroll completely, now next part will be shown when one part is completed with a vertical scroll

📚 My Library

To give a more personalized feeling I changed the name from “Library” to “My Library”.
Currently, the library section shows only history, there is no record of downloaded books.
I split the library section into 3 parts “history”, “downloads” & the newly added feature “bookmark”
If we look at the current book history list the information is not shown correctly, the remove button is given too much emphasis, and only a progress bar is given with no written data about how much book is completed.
On the new history list, users can just tap on the book and it will resume from where they left.
I added the remaining time & chapter completed with a progress bar & remove all unnecessary information that users don’t need to see anymore.

Profile & badges

I redesigned the profile in a more organized & minimalistic way.
I used gamification to make the app more engaging — I added “Badges”, users will earn badges on completing a task
like - listening to summaries daily for 7 days, rating GIGL 5 stars on the play store, & more.

🎁 Time to wrap up

This was my first personal project and I learned a lot of new things in the process of making it better.

I did this redesign year 2021 and I also shared it with team GIGL, they were happy to see the redesign and now they have started to implement some of the new features I added.
I don’t know if they added it by taking my designs into consideration or they already have planned it but I am happy that they are improving.

I am also a creator on Instagram where I share stuff about UI/UX Design. make sure to check it if you are a designer it might help you ✌️.