Optus

UX/UI redesign
Project Description
As a part of a recent job application, I decided to redesign some of the Optus website pages to showcase my UX/UI skills and thinking.
My Contributions
Optus has a well developed brand but unfortunately this doesn't come across in all aspects of the website. I tasked myself with unifying these web pages not only with each other, but with the brand guidelines as a whole.

Whilst there is a lot more room to completely redesign the website, including nav bars, interactions and more, I know the current limitations of the backend so decided to design something that could realistically be changed in the near future.

All of my design choices are implemented using statistics I've learnt on effective UX design and can be found using the link below. These design choices will need to be tested before implementing and my recommendations for this can also be found below.
View the Figma file here
The "roast"
Current website problems
2023
Whilst there is much more to design than visually appealing websites, like understanding the problem and being a strategic design thinker, it takes less than 50 milliseconds for users to form an opinion about your website that determines whether they’ll stay or leave. 57% of internet users say they won’t recommend a business with a poorly designed website and 38% of people will stop engaging with a website if the content or layout are unattractive.

Having heard of the current limitations of the website backend through my partner who works for Optus, there are some simple, realistic changes that could make a big difference to click through rates and other important metrics.

I took the time to delve into the Optus brand guidelines and was left confused as to why the guidelines weren't being followed on the website. For starters the icons being used not only differ on each webpage but they don't match the icons that are laid out in the guidelines (see below). The images that have been created to get users to click through the other product pages are not only visually unappealing but they also don't follow the brand guidelines (see below).

Another issue is how confusing the navbar is. Too many product pages are repeated or not grouped correctly. For example, when you click under "Shop" it already has mobile, prepaid and home internet, meaning there is no need to repeat it in the navbar. Most of these navbar items are also repeated under the landing page and could be included within the navbar or reorganised to look neater.

At a macro there seems to be a bigger issue of each page lacking cohesiveness with each other and the brand guidelines. Realistically I think the website could use some simple tweaks that are within the capabilities of the backend that would make a difference to click through rates, and ultimately company revenue.
Research & analysis
Reasoning behind my redesign
Whilst UX design choices tend to be linked to actual research and user information/behaviour, this redesign is for a job application so I don't have access to this yet. However, my design choices have reasoning behind them which I hope to explain further.

Ultimately, almost all of my design choices have been made for one reason, click through rates. The Optus website is filled with different products, for different types of people but they all aim to make the customer want to click through, read the information, and ultimately decide they want to do business with Optus. To make all of this information more digestible and visually appealing there are some subtle changes I would make.

Some experts say that rectangles with rounded corners are easier on the eyes than a rectangle with sharp edges because they take less cognitive effort to visually process. Another explanation on why we have an eye for rounded corners is because they’re more organic to how we use everyday objects in the physical world. As children we are quickly told that sharp corners hurt and round corners are safer. Rounded corners also point inward towards the centre of the rectangle, whereas sharp corners point outwards away from the rectangle. This could be crucial to making sure the customers experience on the Optus website is a positive one and one that's easier on the eye, ultimately leading the eye to view whats inside the rectangle.

With the rounded corners leading the customer into the product blocks, making sure the image being used is visually appealing is paramount as this is what the user sees first before the description. This is confirmed by research - as many as 87.6% of respondents considered the product image as the key element of the shopping experience.

Why did I decide to keep the CTA buttons with sharp edges? Whilst rounded corners help to lead the customers eye into the centre of a rectangle with a featured product, having sharper corners on CTA buttons can help to make them pop and stand out. The buttons are what customers need to click in order to navigate through the pages so having them with sharp corners helps them to stand out amongst the rest of the rectangles with rounded edges.
Optus Home Page
Redesign overview
A large part of my redesign was cleaning everything up. From the individual product page images, to the icons and also to smaller things like rounding the corners of the div blocks, each change was made to make the website simple, easier to use and look more visually appealing.

I cleaned up the icons under the landing page to match the brand guidelines and also removed some icons that are repeated in the nav bar. Making sure we eliminate redundant and repeated content can improve customer satisfaction.

When I read the cyber security banner it didn't make any sense to me, "we won't just do better. We'll do best". I decided to change this to read a little cleaner.

Using the brand guidelines design principles as inspiration, I also updated the product page images using stock imagery from the internet. These images should improve click through rates to the different product pages. This can be validated using an A/B test to test whether customers click more on the blocks with the newer images.
Optus Mobile
Redesign overview
As a large part of Optus is Optus mobile, I decided to redesign the mobile page. I also saw a lot of room for improvement as most of the images used currently are quite boring. To keep consistency with the homepage changes I also rounded the corners of the div blocks.

In order to hook the customers and have a good first impression, I think the mobile page needs to have a landing image. I chose a stock image that followed along with the photography principles outline in the brand guidelines and added a simple tagline.

I also updated the product imagery to make it look a lot more visually appealing than what is currently on the website. The design changes are also meant to help show what the product actually is, rather than just having boring text.

I've added some simple rounding and drop shadows to the article grids to make them look cleaner and more modern and hopefully make them stand out to the customer.
Optus Living Network
Redesign overview
The living network landing page is also quite bland and the layout is confusing. I thought it would be a good idea to move the QR code into the landing page and behind the phone. QR codes can be intriguing so having this in the landing page could be a good idea to encourage customers to scan it, leading them to the app.

Whilst the icons used throughout the living network page explain the product well, it does get very repetitive. This is why I decided to compliment the icon with an image.

I chose to remove some of the buttons throughout the page as it can overwhelm the customer and sometimes more is not always better. Really the most important thing is to redirect them to the app, so I chose to make the "learn more" link smaller and less of a focal point. Overall I think the layout is much cleaner and it really helps explain to the customer the different features of the "My Optus" app.

Lets create together

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.