UI/UX Case Study — This App Makes Me GO BANANAS 🍌😡!!!
Made with 💛 by Binson Loke, 2023
The Story Begins With…
I was heading back to my hometown this Chinese New Year since there was no Wi-fi available. I decided to buy my usual mobile data in the Digi app.
It’s time to buy the Unlimited All Day Internet plan (tap)…
1. Let’s Open The App…
Let’s go to the Buy Add-Ons section. Inevitably, I have to wait for the screen to load but it takes longer than usual without telling me the sign of progress.
I simply sit and stared at a boring loading spinner for almost 5 min. Ugh, it really made me go bananas!!!
Seriously, how a product handles that waiting experience can make a huge difference to users and retention rates.
So, Instead of Doing This…
❌ No Sign of Wait Time
The loading spinner doesn’t tell me how much has been loaded.
❌ The Period of Unpredictability
The loading spinner tends to add uncertainty as they give almost zero feedback.
❌ Perceived To Be Slower Than Actual
The loading spinner makes loading appear slower.
🧠 Psychology Insight:
Doherty Threshold
It dictates that a user experience turns from painful to addictive after the system feedback time drops below 400ms.
Why Not Do This…
✅ Sign of Progress
The progression bar tells users how much time remains to complete. In this way, it helps make wait times tolerable, regardless of the accuracy.
🧠 Psychology Insight:
Goal-Gradient Effect
It states that the tendency to approach a goal increases with proximity to the goal. Digi could provide a clear indication of progress in order to motivate users to complete tasks.
✅ Make Waiting Fun
Using an illustration and a humorous microcopy is one way to humanize the problem while loading or processing is happening in the background.
🧠 Psychology Insight:
The Humor Effect
It states that people have a tendency to remember information better when that information is perceived as funny or humorous. It turns the load time into an opportunity to strengthen brand awareness and retention.
2. After Loading The Screen…
Come on, why do I need to scroll all the way down to buy my previous internet plan?
So, Instead of Doing This…
❌ Scrolling Fatigue
The zombie scrolling makes me slowly lose my focus and tune out my attention.
Why Not Do This…
✅ Personalization = Reduced Churn
Using previous experiences and data to craft a better experience is key to user retention. So, Digi could leverage past behaviors to remove repetitive and unnecessary steps.
3. After Purchasing…
Phew, finally purchased it. Let’s head to the home page and see my newest purchase. But where is it?
Oh, I have to scroll… Why isn’t this a default prompt?
So, Instead of Doing This…
❌ Expectation Aren’t Met
The expectations should be set by default.
❌ It’s Not Obvious
The newest purchase is vague to be noticed.
Why Not Do This…
✅ Set Expectations By Default
When interrupting users to view a new thing, ensure it’s not something expected. It’ll reduce the perceived value of the interaction. Instead, turn them on by default. In this way, it will create delightful moments.
✅ The Novelty Effect
Users react positively to new things, so make sure it’s well shown.
4. After Checking…
Hmm… I was wondering how many gigabytes are left for my other plans. Let’s check.
Eh, what does “balance” mean here?
So, Instead of Doing This…
❌ Fuzzy Copy
The copy didn’t convey the message clearly.
❌ The Information Is Not Displayed Efficiently
The information is not positioned close to each other.
Why Not Do This…
✅ Clear Copy
Information that is critical to the customers should convey a clear message.
✅ Grouping The Similar Elements
People tend to perceive connections between visual elements. So, objects that are near, or proximate to each other, tend to be grouped together. Takeaways, proximity helps to establish a relationship with nearby objects.
🧠 Psychology Insight:
Law of Proximity
It states that people have a tendency to group the elements that are positioned close to each other. Like the Law of Common Region, this law is also a grouping principle that makes it easy for users to interact with your design.
Wrapping Up
A seamless loading page design offers an opportunity to reinforce the value proposition, strengthen brand awareness, and reduce churn rates as well.
Ultimately, we should focus on optimizing the product to become leaner and faster to load.
Finally
Thanks for reading so far!
