Revamping MyRepublic’s Mobile Order Experience
Overview
MyRepublic is one of the fastest-growing telecom operators in the Asia-Pacific region, powered by a proprietary cloud platform, and is Singapore’s number one network for gaming. With MyRepublic’s diverse offerings, consumers can choose between fibre broadband and a mobile line, with a stream of add-ons to customise their plans. Our online Order Portal allows them to view and place their orders instantly, eliminating the need to visit a store to subscribe to our services. It is the end funnel where users will make a final decision: review mobile/broadband details, compare plans, and eventually convert. With that being said, it is one of the most important consumer touch points we were looking to redesign.
Taking all that we know of the current order process, we set out to design our biggest revamp thus far. As UX Designers, we have to consider several things — stakeholders, end users, technical constraints, timeline constraints, amongst the data and insights we have garnered. To know what to design for our customers, we first have to understand the current pain points of the customer journey. For this post, we’ll be focusing on the mobile order journey.
The Order Portal is quite straightforward. You select a plan, key in your information, proceed to make payment and get notified that your order has been placed successfully. What customers don’t see are the technicalities and legalities we have to comply with, which could affect the user experience, since most customers want a fuss-free experience. We deal with the drudgery work in the best way possible and notify them clearly if we need their consent and agreement.
So when it comes to redesigning the Order Portal, there were a few problems we were looking to solve for the users. Let’s dive into each of these parts separately.
Selecting Plans & Add-Ons
Old user journey:
To help you understand better, the GIF above illustrates what users go through in the old Mobile Order Portal. When the Core Plan is selected, the user would land on another page with plans (in a table format with misaligned headers) and some add-ons. Once the plan is customised, upon clicking [Checkout], a Sign Up/Log In screen appears. This screen interrupts the flow that breaks the user’s ordering experience.
On the page where users can customise their plans, they can check the plan they have selected earlier on by referring to the floating panel labelled ‘What You’re Getting’ on the right. However, the abrupt switch to the Sign Up/Log In screen means that apart from the sudden break in the order flow, there was no way users were able to change their plan if they decide to make a switch after the Sign Up/Log In screen — that could also mean they might have to restart the order process to change their plan.
New user journey:
By moving up the sequence of the Sign Up/Log In screen before the plan selection, it is now clearer for users to edit and/or customise their plan in the Order Portal without breaking away from the order process.
With the new user interface, the Order Portal was designed for mobile-first usage. Details of the plans are designed in a carded layout with a quick side to side comparison to guide users in scanning through the plan details as quickly as possible before moving a step forward to choose their number.
Selecting a New Number & Choosing Delivery Date
Old user journey
In the old user journey, this part of the order process might have left users a little confused — should they ever want to re-pick another number (even if it’s just for fun). It’s easy to pick a new number; move forward, and check out. But what if users hit the back button after selecting the number? There were some considerations we had to keep in mind.
On the old Order Portal, clicking on [Change Number] wipes out the selected number immediately. With the numbers being drawn randomly each time it appears, the same number can’t be displayed in the pool of numbers for selection. However, the backend system still allows the selected number to be displayed as information. We had to consider those users who might have changed their mind to another plan and decided to go back and edit it. What happens in the old Order Portal is that all those information would be gone.
Moving forward, the CTA buttons in the pop-up were not the most ideal. Users had to decide between [Change Number] and 3 other buttons labelled as [Next: Choose Delivery] placed at different places on the page. This would have brought much confusion to users since having multiple CTA buttons on a page distracts rather than help.
This also happens when users move forward to ‘Choose a date & time’ selection (and if they decide to change their delivery slot) as seen below.
*CTA: Call-to-action
The note appearing above the date and time selection was a potential distraction too. Users may have a hard time discerning which information they should be concerned about.
Speaking with the Customer Experience (CX) team, we understood the intentions of them trying to be as transparent as possible on the potential delays. We worked out a way where these important messages are placed before and after the order journey is completed, allowing the user to complete the task without having to go through an enormous amount of text.
New user journey:
To improve this step of the Order Portal, a prominent note in orange appears at the top to notify users that the numbers were drawn from a pool. A change of their selection may result in their previous choice being no longer available. This highlights clearly to users before any action is taken.
The CTA buttons were revised to enable users to decide on their desired action, with the pop-up message angled towards a cordial reminder and the option to keep or change their number. What’s included on this screen as well for users; they are now able to view the number they have picked, which is displayed clearly right above the pool of mobile numbers.
In terms of refining certain visual elements, the awkward partially blurred background is replaced with a dark grey overlay instead, providing a focus on the pop-up message. Primary and secondary buttons are kept consistent throughout the entire order journey.
With the overwhelming note in the old design being revised to a simpler liner, and all other excess information removed, this paves way for users to focus one thing at a time until they complete their order.
Designing for Error
Another refinement we touched on was the appearance of the disabled button and error validation. Greying out the button without disabling it, still allows users to click on the “disabled button”, and proceeds to highlight to users the errors they needed to rectify before they could proceed with the order.
We actively incorporate brand tonality, copywriting, and UX writing when building a product or service. Such minor implementations can help enhance the user’s product experiences, with constant updates and refinements to be done as the ordering portal and other products evolve gradually.
Other things we did to add to the user experience:
- Revising the look and feel to enable users to be more efficient in looking for information relevant to their intent
- Revising the content hierarchy to optimise cognitive scanning
- Re-examining the copy used to inform users as they navigate and interact with the product
- Reinforcing brand vocabulary that our users identify with
- Designing with scalability in mind to enable the progression of the product
Summary
Whenever we work on a project, it doesn’t mean we are designing only for one particular thing. As for MyRepublic’s Order Portal, we had to keep in mind the other products that will be affected when the revamp rolls out. Redefining MyRepublic’s Mobile Order Portal experience was just a part of a bigger UX progression that we were looking to improve on.
Currently, we are still in the process of testing and iterating this Mobile Order Portal. We are learning from user feedback that’s crucial to the improvement of our products, and services for our customers, whilst balancing the requirements of the business and stakeholders.
