design & development

Folio highlights

logo-elxr_coloured_squares-transparent
National Covid 19 Clinical Evidence Taskforce

is a recent site I led a team of UX designers/co-developer and handled client engagement through agile content and design iterations at the height of the 2020 pandemic. The Victorian Minister for Health publicly announced it was the single-source of clinical evidence and treatment workflows for Australian physicians and government.

Highlights: Rapid build. The News/blog section was 100% me – built the templates from scratch and designed by riffing on the initial look.

logo-elxr_coloured_squares-transparent
Vision Eye Institute

is a project I came onboard halfway that serves as a public site and member portal for over 2000 opthamologists and laser eye surgeons across Australia.

Highlights: The public facing site,beyond informational, drives vibrant multimedia blog/news components, and a large volume of consultation booking forms for 27 clinics. I project led, designed and co-developed the Members portal (behind a login) to manage ongoing training and informational events, CPD industry points tracking and serves up hundreds of multimedia learning resources and quizzes.

logo-elxr_coloured_squares-transparent
NewLife IVF

is a patient informational and booking conduit I led the design/development for the launch of a new brand of IVF in Melbourne, Australia.

Highlights: Includes ongoing events, campaign pages with highly targeted SEO. In addition there is a micro site that manages a members only database of Sperm donors that I handled the server setup/administration.

Tech stack (of all above): WordPress, PHP, Javascript, SASS Further examples of my work as Technical Lead at Wellmark can be found on: https://wellmark.com.au/work

logo-elxr_coloured_squares-transparent
Better Surf Marketplace

is one of the dozens of freelance projects I have done over the past 20 years.

Tech stack: WordPress, Woocommerce

Highlights: This site keeps my chops up on the the eCommerce side of WordPress. I also designed the original logos, artwork, photo production, layout and editing of the First Aid eBook and handled the sale on Apple and Amazon bookstores.

logo-elxr_coloured_squares-transparent
Artspop.org.au

was one of 25 sites I was responsible for as Technical Lead/Project Manager in a business unit of Queensland University of Technology called Yodel iCi. This particular site from 2014 was commissioned by the ESA (Education Services Australia) and heralded by their director as the finest presentation of the National Curriculum for the Arts at the time.

Tech stack: built with a proprietary ASP.NET/C#/Javascript CMS which I led the design of (especially the development of a back-end system for clients).

Highlights: While I think a bit dated now, at the time it exceeded most university and government accessibility standards at the time to meet WCAG2.0 in delivering video content with captions and subtitles.

–>


UI/UX Design

Evolution of a Website Search

A new Advanced Search feature was added to a long standing Search area UI for this community directory website. The biggest problem was that most people would miss it if they didn’t know it was there. Here is an example of my initial feedback to the development team.

MCD-Advanced-Search-UI-UX-Feedback-1

MCD-Advanced-Search-UI-UX-Feedback-2

 

Variation 1

To eliminate some redundancy in ‘community directory’ (header, title bar) I reduced it to just Search – consequently Advanced Search could be used on that following page.

My initial suggestion of adding some small blue ‘Advanced Search’ text underneath still had the same issue of a very small target to click on (even if you know it’s there!), so I tried:

  1. Shortening the Location field to half length and shifting the related Radius field right next to it.
  2. Making 2 nice big buttons for each search option.

Result: Overall this tightened up the whole search area a bit and eliminated the unpredictable word-wrapping.

MCD-Advanced-Search-Variation-1

Variation 2

I think it’s important to try the extreme end and settle on a comfortable place in between. It’s pretty obvious this is a search area. To some degree, the title implied it was the Search page but it’s actually the landing page with other purposes. So I:

  1. Removed the title altogether
  2. Restored Location to it’s full length
  3. Added a distinct but slimmer blue Advanced Search button underneath that is still plenty big enough for big thumbs.

Result: I think it looks quite clear where everything is and it’s purpose. This also tightened up the whole search area significantly, allowing another line of the quotation below it.

MCD-Advanced-Search-Variation-2


University Student Portal Makeover

For QUT’s Doorway to Research site, I took a 5 year old design and cleaned up the UI with more modern sensibilities while avoiding confusing existing users:

DtR-Before
DtR-Before
DtR-After
DtR-After

From Wireframe to Final Product

QUT: MOOCs

For a new MOOC (Massive Online Learning Courses) program at QUT, one of the initial pieces I was tasked with was putting together the top-level pages for the course info. It had to confirm explicitly to the university’s corporate template and there was no staging server. After content had been approved, I used the live prototyping software MACAW to create this live mockup of the 3 pages.

QUT: Arts POP

The following series of PDFs demonstrate my collaboration with a graphic designer through the entire process of Wireframing to Mockups to Final product for the Arts-POP site for Queensland University of Technology:

  • Wireframes Phase 1 – Based on my discussions with stakeholders and coupling this with the feature set I proposed, I drafted up this initial set of Wireframes.
  • Style Board Top Pick – this was the design style the team picked and we ended up using elements of this in the final product.
  • Mockups Phase 1 – based off the designer’s style board, I turned my original wireframes into more of a mockup.
  • Mockups Phase 2 – after some further design work by the graphic designer, this was the final mockups presented to the stakeholders.
  • Mockups Phase 2 (Smartphone) – also final mockups, these I tailoring as best as possible within confines of a static page to replicate the responsive ‘smartphone’ layout that would eventuate.
  • Final Design Guide – after several rounds between the designer, development team and myself, we settled on this final design guide for the home page, the remainder of the site would follow these styles.
  • Arts-POP Website – the final site can be seen here which I was predominantly responsible for the front-end design code.

Logo Rebranding

Localising the My Community Directory logo. This was already a clean design that captured at least the location aspect of an online directory. Some needs arised where the logo in social profiles needed to identify which regional branch the profile was on. Instead of cluttering the design with extraneous text or images I settled on creating these variations for each Australian state based on loosely-official state colours.

My Community Directory Logo - State Colours


e-Learning Slide development

While developing course material for a Robotics MOOC at QUT, a major element of my work was bringing clarity to content presentation. Here are some before and after shots.

Euclidian Geometry-Before
Euclidian Geometry-Before
Euclidian Geometry-After
Euclidian Geometry-After
Disc-Before
Disc-Before
Disc-After
Disc-After

 


Programming Examples

Please visit my GitHub page for some of my recent coding adventures.

Debugging

A most common task in any programming is troubleshooting why it is not working. As much of my work to date involves using code libraries & frameworks, and modelling solutions from templates of features already built in to various CMSs, I have developed a keen eye for spotting syntax issues that vary from language to language, and utilising any resources applicable from: official documentation, related forums, program language guides, and often just trial and error. This example illustrates some non-working code I was presented, some of the process I went through to fix it and the working proof-of-concept.

example of broken python code
Python code: broken
example of fixed python code
Python code: fixed
example of python code results
Python code: results