Overview
As part of the Digital team at IPA, I was brought on board to help identify UX and UI improvements for the IPA website and had the responsibility of applying these updates and changes with a website re-design.
To assist with the site re-design I also created components, assets, and a Design System for IPA. I was also responsible for developing UI mock-ups and prototypes to clearly illustrate how the new website functions and looks would be.
Navigation
Challenge:
The current website has a hamburger menu for its desktop and mobile site navigation.
(Default navigation state)
(Selected navigation state)
Solution:
I designed a drop-down menu, with a hover-and-click function, made up of clear headings for easy site navigation.
(Default navigation state)
(Hover state state)
Site log in
Challenge:
The current members' sign-in option is an icon with no indicating text, and no change of state when hovering.
Solution:
By removing the hamburger menu, and moving the navigation menu to the middle of the page, the user/login icon was replaced by 2 buttons. Log in and Sign up (for users that would like to register with the company).
Search Bar
Challenge:
The current search bar is inactive until you click on the magnifying glass icon which brings up the search bar.
(Default state)
(Active state)
Solution:
A search bar was designed and made to always appear in every page of the site. The word “Search” was also included in faint text color, to reinforce the search option to the user.
(Default state)
Headline
Solution:
Redesigned the landing page to include a hero banner with a clear and simple company headline, as well as a Call-to-Action (CTA) button.
In the example of the hero banner, an iconic Australian landmark was used, this image can always be updated to reflect current news and events.
The CTA buttons were placed over the banner with a short introduction to the company, to tell the user who the company is, and the option to learn more or register.
Challenge:
The site landing page has a carousel displaying recent stories. There is no headline to tell the user who or what the company does or offers.
Site Content
Challenge:
The main body of content on the page was made up of 7 sections. No importance hierarchy was taken in the placement of these items.
Solution:
Discussions with internal teams indicated which items should be prioritised on the landing page. The top 3 were selected and added to the new design with a short description and a CTA button.
Challenge:
Contained in the body of the page is a section promoting ANZIP (IPA’s sister site), the section used a zoom-in animation when hovering over the image, and its CTA was not clearly visible.
Solution:
The section was slightly altered to fit the new design. Its background was darkened to seprate it from the main page content. Its CTA was turned into a button with its color matching the ANZIP green logo color. The animation on hover was removed, as this effect isnt present in any other sections of the site.
Footer
Challenge:
The page footer items are out of date and there are accessibility issues with its grey and grey color scheme.
Directly above the footer, there’s a section containing a media release and Twitter feed. this section takes up a large proportion of the screen and was also taken into consideration when designing a new footer.
Solution:
The Footer was given an updated look which included updating the listed items to reflect key sections of the site, an updated color scheme for accessibility, updating the social media icons, and adding the company logo.
The media release and twitter feed sections were completely removed from the new footer design to keep the page slick and less crowded.
Carousel
Solution: An alternate carousel design was made that does not take up the entire page width, and it includes smaller item tiles. The new design also displays prev/next buttons and dot progress indicators. The entire item tile in this instance has been made clickable on hover.
two versions of the carousel were made;
This version included infrastructure images in the item tiles. These images can be changed depending on the information that the client would like to display. Each item tile also has a category label, to show the user at a first glance what the information will relate to.
The second version contains the same elements as version 1, with the only difference being that the tile images have been replaced with solid colors which represent the individual information categories.
Challenge: The carousel on the landing page is not clearly identifiable as a carousel.
The carousel does not show the previous/ next item nor does the mouse pointer change state when hovering in the left/right directions.
The mouse pointer state only changes when you hover over very small, thin dashes that make up the carousel progress indicators.
(New carousel design version 1)
(New carousel design version 2)
Carousel further actions
I did not have time to finalize and test the design of the carousel, but my intention was to combine versions 1 and 2 with a new design, as well as including a CTA button after the text which would indicate “read more”, “find out more”, “Click to read more” or “Continue reading”.
The current site has the carousel at the very top of the page as its headline, the new design originally had the carousel with the latest updates on the bottom of the page before the footer. This layout was not confirmed and depending on the final design version, the newly designed headline and carousel could be merged into one designed and be placed on the top of the page as its headline.
Final looks
Original design
My new design
