Portfolio of Evidence

Brief Overview

During my internship at Giraffe Studio, I was apart of the digital department, where I was supervised by Damian Monaghan the Creative Director. Damian provided ongoing support and guidance and offered constructive feedback throughout my internship. I had regular check-ins whether it was with Damian or a member of the digital department to go through the work I had done for the day. This helped foster a collaborative and encouraging intern/supervisor relationship, which helped me develop both professionally and personally. My main role was UX/UI Designer and Web Developer. I contributed to three main projects throughout my time there: 1. Complete Group Amalgamation, 2. ANU College of Law website revamp, and 3. Wordpress Development. I further participated in their weekly meetings to gain insight into team workflows and to stay updated on projects. I attended Giraffe for a total of 5 weeks, going in on Tuesdays, Wednesdays and Fridays. Spreading out my internship I thought was a good idea, as it allowed me to gain knowledge over multiple projects, further enhancing my learning with valuable real-world experience.

Complete Group Social Media Amalgamation Proposal

Context

I was tasked with the creation of a social media amalgamation proposal for a construction company in Mitchell called ‘Completeframetruss’ and ‘Complete_interiors_act’. The company wanted to amalgamate their 2 Instagram and Facebook accounts into the name ‘CompleteGroup’ as they were also doing this to their websites.

The four main areas I had to explore were tasks, management, examples and steps to complete. Firstly, I proposed what I thought was best along with extensive research into which account they should rename and keep and which to discontinue. This also included the best courses of action to take, announcements, exclusive content, making a business meta-account for combined management of Instagram and Facebook and project management. I then outlined what Giraffe would need to take on going forward like scheduling posts, testing different visuals and making sure engagement stays up. After, I proposed some examples of already existing Instagram accounts with different styles and themes for Complete Group to choose from for their own account style. Lastly, I listed out all the steps that had to be completed for amalgamation to take place such as username and bio changes.

The impact of this proposal helped the company visualise the process of social media amalgamation and understand the requirements involved whether its creative or technical. It also provided a practical reference for Giraffe to manage their social medias. The project contributed to the company’s rebranding goal by offering a detailed and research-based plan. By amalgamating their online presence, the company will be able to better connect with their audience and reduce any confusion through the process.

My supervisor responded very positively to the proposal and only suggested a few minor changes such as removing budgeting from the project management list. He particularly liked that I didn’t just delete their second account but used it to encourage people to follow their new one.

ANU College of Law

Context

I was tasked with revamping the ANU College of Law research page on their website. As shown in the PDF, ANU wanted a system where the user can filter through publications, people, events and impact whilst also being able to filter through 8 different categories inside of this. I discussed this with my supervisor and we both agreed that the example ANU provided us with was not ideal for the best user experience.

I developed multiple solutions to create a better user experience and concluded that having the 4 main filters shown at all times was more ideal. We also changed the selection style of the 8 subcategories to a drop-down box as this was more streamlined with their website styling guidelines. I further developed solutions for the user to be able to jump to different sections of the page, significantly improving navigability, especially for mobile viewing. I then went through and developed all the high-fidelity prototypes for both desktop and mobile, implementing images, text and other additional elements to enhance the user experience. Lastly, I created the interactions and animations like hover and click effects that the user will experience.

The impact of this project helped serve as a guide for the developer to build off and served as a final design reference for ANU. It improved the layout and filtering logic whilst also providing a more intuitive way to explore the research options. The project directly contributed to ANU’s objective of making the research page more accessible and discoverable, whilst also offering a cleaner interface that aligns with their branding.

The final prototypes were received positively by my supervisor and the digital team, as they appreciated the improved usability, clarity and adherence to ANU’s design standards. There were some minor tweaks that they suggested such as when to left-align or centre-align text and different types of animations I could implement to further improve the pages engagement and readability.

Pop-out Navigation

Full Website Showcase

anu website

Prototype Website

Full Mobile View

Wordpress & Bootstrap

Context

I was tasked with creating a functional website in Wordpress using PHP, semantic HTML and bootstrap for stylisation. I was also expected to use multiple different types of plugins to help make the website easier to build and more intuitive.

I first had to read all the documentation for Wordpress and Bootstrap so that I knew what I was doing once I started the project. I familiarised myself with Wordpress’s layout and installed the following plugins: Advanced Custom Fields (ACF), Custom Post Type UI (CPT UI), Search & Filter Pro (S&F Pro) and Classic Editor. Classic editor changed the way in which Wordpress looked in the backend so that it was fit for industry standard development with code and not drag and drop elements. ACF is used to create all the content on the page such as text and images. This is then retrieved in PHP using the field name I set such as the following: <?php the_field(‘field_name’); ?> . This is an industry standard technique allowing for the client to be able to add, edit and delete content from their website without having to adjust anything within the code.

CPT UI is another intuitive plugin that allows for the creation of a separate entity within Wordpress e.g. Projects. Inside of this I created different projects such as Project 1, 2 and 3 which were filled out with the ACF plugin that integrates seamlessly. This was implemented as it is a user-friendly approach to letting clients add projects or similar which are then automatically displayed on the webpage through PHP. The final plugin S&F Pro was the hardest to learn by far. There were many settings and configurations to learn when setting up the search bar and filters and how to implement them correctly in the code. This ultimately was implemented so the user can search through the different projects or filter through the different categories and dates for better navigability of the site.

Each plugin and tool were chosen based on its suitability for real-world web development scenarios, with a strong focus on creating a smooth client experience and a maintainable codebase. The impact from this made the site practical and flexible and largely contributed to letting site visitors easily navigate and filter through projects whilst adopting a client friendly solution for managing and displaying content.

My Wordpress website was received very positively by my supervisor and digital team. They were pleasantly surprised by my quick learning ability and proficiency to develop a website in a software and language I had never used before. My supervisor was also impressed by my ability to complete a complex task quickly and apply industry-standard structuring in my development, which he said enhanced the overall client usability.

PHP Code Preview - Projects Page

Wordpress Site Full View

Advanced Custom Fields - Editing Options

Custom Post Type UI - Adding a new project

Search and Filter Pro in Action