The Brief

The Brief

Design uplift for the UIs

The overall brief is to rebrand the look and feel of the UI of the whole mobile banking app

Streamline the home internet plan purchase

There are many required steps that user need to do before they went to checkout. The challenge is how can we make the process feels easier for users.

ideation

Main Flow for Purchasing Home Internet Plan

Main Flow for Purchasing Home Internet Plan

Main Flow for Purchasing Home Internet Plan

Step-by-step

Step-by-step

There’s a specific and sequential process when someone wants to pay for a home internet in Australia. These are the following steps:

  1. SQ Check –– to know which eligible products by entering your home address

  2. Choose home internet products

  3. Choose modem & WI-Fi Mesh Offer

  4. Additional voice packages (optional)

  5. Continue to Checkout

Show step-by-step for purchasing home interent
Show step-by-step for purchasing home interent

Page Structure

Page Structure

  • Based on this flow, we decide to create a one full page that contains the all of the steps from the beginning (SQ Check) until the end (Continue to Checkout)

  • By having this structure, we can guide the users on each step and explain what actions they need to do before going to the next step and complete the process.

Structure of Home internet page, consisting of SQ Check, Choose Home Internet, Choose mOdem & Wi-Fi Mesh, and Voice packgae
Structure of Home internet page, consisting of SQ Check, Choose Home Internet, Choose mOdem & Wi-Fi Mesh, and Voice packgae

Solution

SQ Check

SQ Check

SQ Check

First, user need to go through a SQ (Service Qualification) Check process by entering their home address.

Enter Address

Enter Address

In the beginning, you need to enter your home address to know which home internet products that are eligible for you to purchase

Screenshot of entering address for SQ check process
Screenshot of entering address for SQ check process

Eligible for Products

Eligible for Products

  • If the address is eligible, we’re displaying what kind of technology that is available for user to purchase.

  • Provided links for user to educate more about the technology.

Screenshot of SQ result
Screenshot of SQ result

solution

Select Internet Products

Select Internet Products

Select Internet Products

  • We’re showing all eligible products for your home.

  • Displaying the home internet products by their technology type, either using Fiber or Wireless.

  • All home internet product details are being displayed up front so user can compare easily between each products.

Show a list of home internet plan cards
Show a list of home internet plan cards

Solution

Choosing Hardware

Choosing Hardware

Choosing Hardware

The modem that’s being provided is depending on which home internet products that you choose previously.

Modem for Fiber

Modem for Fiber

For fiber products, we provide the modem where the user will be paying for it in monthly installment. But they have an option to opt out.

Screenshot of modem section for fiber products
Screenshot of modem section for fiber products

Modem for Wireless

Modem for Wireless

Modem for Wireless

For wireless products, we provide the modem and user can’t opt out.

Screenshot of modem section for witreless products
Screenshot of modem section for witreless products

Additional Wi-Fi Mesh

Additional Wi-Fi Mesh

If you choose to buy modem to your plan, you’ll get a Wi-Fi Mesh offer than can help to enhance your internet connectivity.

Screenshot of Wi-Fi Mesh section
Screenshot of Wi-Fi Mesh section

solution

Buy Voice Package

Buy Voice Package

Buy Voice Package

  • If user also purchase the modem, we’re displaying voice package offers below.

  • If they don’t want to include the modem, we won’t display the voice package.

Screenshot of fixed voice package section
Screenshot of fixed voice package section

solution

Go to Purchase

Go to Purchase

Go to Purchase

Now that it’s all set, user can continue to the payment process by clicking the continue button in the bottom.

Screenshot of mini-cart with complete payment breakdown
Screenshot of mini-cart with complete payment breakdown