- MY ROLE: UX/UI designer (Bootcamp Individual Project)
- DURATION: 5 weeks
- TOOLS: Miro, Figma, Adobe Illustrator, Adobe Photoshop
The Brief
For this challenge I was tasked with analysing and evaluating an existing government website and redesigning the site to improve overall user experience. The design needed to be responsive across multiple devices ensuring best practice accessibility standards were adhered to.
Background
The ABC (Australian Broadcasting Corporation) is Australia’s National broadcasting network. It provides multiple TV and radio channels, as well as online platforms for news, sports and current affairs. The ABC homepage is the main site for all of these services as well as providing curated articles.
Link to original website here: abc.net.auMy Process
1. Analyse.
2. Define.
3. Ideate.
4. Test.
5. Design
Heuristic Analysis
I examined the existing website navigation to identify areas which could be improved. I also looked at accessibility standards to check text legibility passed WCAG standards. Below is a sample of some recommendations I had for the homepage.
01. ABC Logo Home Button
ABC logo is the primary link to the homepage on most pages, although not consistant across all. Unclear to some users that it is a link.
02. Top Bar
Could be simplified to reduce visual noise for the user.
Search icon does not stand out.
03. Burger Menu
Hides some important links and features.
04. Primary Navigation
Needs to be more prominent and include indicators to show current page.
No drop down menus, so user has to scroll down page to find out content.
05. Buttons
Good highlighting of call-to-action although the colour does not seem to be in-keeping with the brand.
06. Section Headers
Helps to group articles and guide user around the website. Not used consistently.
Information Architecture
I analysed the content and site map to uncover areas which could be simplified or restructured for a more streamlined user flow. I discovered that the news section in particular had too many secondary and tertiary links and many primary navigation links were repeated in the burger menu.
Userbility Testing
Objective
To assess the effectiveness of the navigation system across the site and uncover pain points which a user might experience navigating between the different sub-brands of the ABC.
I also wanted to see if users were able to easily find information on a specific topic.
Method
Users were asked to complete 3 tasks which would require them to navigate between several sub-brand homepages (Main Home page, World News, iView and the Search Page) and then return to the Main homepage.
User Insights
Key insights derived from user testing and questionaires.
Key Findings
• 60% of users found the website clear and easy to understand.
• 40% of users tested found it difficult to navigate back to the main home page from other areas of the site (News and iview) and had to resort to using the back button on their web browser.
• New users did not realise that the ABC logo was the home button.
• Users did not look at content in the burger menu.
• The search function was cumbersome and users found it frustrating being directed to a separate page (more clicks).
• Given the amount of content on the site, the search function could be far more prominent and simpler to use.
• Users were not clear which section of the website they were on, as there was insufficient labelling or identifiers on pages.
User Persona
The persona represents the frustrations and goals of a typical website user.
Demographic
Richard, 43
Motivations
- Bio:
- Richard is married with 2 school-aged children who go to a private school. He is an partner at a large architecture firm and spends far too many hours working.
- Goals:
- Retiring by age 55 in a home with a seaview. Wants to make informed decisions when it comes to finance and other life choices.
- Frustrations:
- Fake news stories.
- Websites that take too long to load.
- Too many pop-ups on websites.
UI Style Guide
Developing a UI style guide for the new design was essential to producing consistent webpages and a more pleasant experience for the user with recognised buttons and styles.
Design Features
The new ABC Homepage incorporates a streamlined top section showing date and weather, sign-in and search icons. The redesigned navigation is larger and clearer. Content is grouped into chunks with concise category headings. The new comprehensive footer covers all areas of the site which improves accessibility.
Navigation
The new navigation incorporates a large dropdown menu displaying highlighted stories with direct links. This allows the user to see an overview of content in other parts of the website from their current page and also allows them to navigate directly to top articles and sections.
Final Thoughts
Redesigning a comprehensive website such as the ABC, was a mammoth task. By first pulling apart the information architecture and re-structuring it into chunks, I was able to devise a more streamlined user journey and navigation system. A clear and consistent UI style guide was used to ensure the user experience was more intuitive and enjoyable.