UX Writing Portfolio: A (brief) case study on myXL app
It has been almost a year since I last published my very first UX writing portfolio. Although I created other UX writing portfolios on a PDF as well, I haven’t had the time to adjust and make them proper before publishing them to Medium. Now, after finishing my thesis defense (and I passed!), I finally have some free time to construct this article—just to provide my suggestion for the myXL app.
Background
This all started with my curiosity and disappointment when using the myXL app. For context, myXL is an app built by XL Axiata to provide for the needs of its customers. XL Axiata is one of the major providers in Indonesia.
Through the app, users can do quite a lot of things, but mainly these:
- See remaining balance
- Top up balance
- Manage and buy internet packages
I like the design of the app, actually. The colors are well-balanced and it really embodies XL Axiata’s colors and identity. However, what I will be suggesting today is the UX writing displayed on the app, especially for the buying package flow.
Buying internet packages flow
There are two entry points to buy a package. I simplified it on the flowchart below.
What’s wrong with the UX writing?
When choosing the payment method, there is this green coupon-shaped section about the promos. The title is fine for me, but what’s misleading here is the text below it.
It says, “there are promos that can be used.” What I interpreted when I first read it is that I already got some promos that I could use now. However, when I clicked it, it showed me this:
Instead of showing the promos “that can be used”, the screen actually prompted me to type in the promo code that I have (and if I have any). Plus, the button at the bottom also says Select, which should imply that there is something (re: promos) to select on this screen.
I think the copy on the previous screen misguided me, making me think that I actually have any promos—when in fact, I may not have, and it will actually take me to type in the promo code.
Now, what’s lacking in my exploration here is that I do not know how the screen would look like if I had any promos, so I am suggesting solely based on my experience under my circumstances.
Suggestions
If I could fix it, here’s how it’d go:
Copy
I shall apologize in advance for I cannot edit and place my suggested copy in the design, so I’ll just explain it here.
Title: Save More With Promos (21)
Subtitle: Insert promo code or select one (31)
Reasoning: I decided not to change the title because I think it already delivered the main message here, which is saving more money with promos. As for the subtitle, I would like to say it out front about the actions that users will do once they are on the screen after this, which are inserting their own promo code or selecting one (assuming that users can only use one promo at one time).
Copy and design
Design: As I previously mentioned, the Select button implies that there should be something (re: promo) to select here. It’d be nice if there is a list of promos before or after users can insert their own promo code. If there isn’t any available promo at the time, there should be an empty state illustrated here.
Since my suggestion involves some design change ideas, I created a sketch of how it would look.
Reasoning:
Available Promos
For the screen consisting of available promos, I’d prefer the search field where users could insert or search for their own promo code to be placed at the top, before the list of promos. Because if there are many available promos at the moment, it’d be a pain point for users to scroll past them before they could just type in the code or promo name. The green-shaped design is supposed to illustrate the promos.
As for the copy, the first text above the search field is the prompt for both actions: inserting a promo code and selecting one promo below.
No Promo Available (Empty State)
When there isn’t any promo available, I thought the search field should be erased. It wouldn’t make sense to search for any promos when it is obvious that there aren’t any at the moment. I also deleted the Select button since there won’t be anything to select here. As for the illustration, I just put what I found first in Canva.
Conclusion
This case study is very much subjective because I did not conduct any research testing (or any research at all) before. It came up because of my own disappointment when using the app and I thought I would like to know if there are other people who’d feel the same when seeing the screens.
However, the myXL app works out fine for other features—so kudos to the XL Axiata team! Kindly let me know what you think about this; critiques and suggestions are highly welcome. :)
