design & development

Commercial Portfolios

logo-elxr_coloured_squares-transparent
elxr productions

Elxr Productions is a freelance business of mine. To date I have been responsible for designing and developing all the websites on this showcase.
Yodel, QUT
Yodel Services, QUT

Yodel Services was a commercial branch of QUT Creative Industries that I was Lead Project Manager for as well as strongly influencied the UI and feature development of this original Content Management System. I also led the UX and client delivery process through all the sites on this showcase.

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 capt