{"id":2391,"date":"2014-07-18T12:15:28","date_gmt":"2014-07-18T02:15:28","guid":{"rendered":"http:\/\/www.jasonshanks.com\/?page_id=2391"},"modified":"2016-09-21T10:54:34","modified_gmt":"2016-09-21T00:54:34","slug":"design-and-development","status":"publish","type":"page","link":"https:\/\/www.jasonshanks.com\/portfolio\/design-and-development\/","title":{"rendered":"design & development"},"content":{"rendered":"

Commercial Portfolios<\/h2>\n
\n
\"logo-elxr_coloured_squares-transparent\"<\/a>
elxr productions<\/figcaption><\/figure>
\nElxr Productions<\/a> is a freelance business of mine. To date I have been responsible for designing and developing all the websites on this showcase.\n<\/div>\n
\n
\"Yodel,<\/a>
Yodel Services, QUT<\/figcaption><\/figure>
\nYodel Services<\/a> 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.\n<\/div>\n
\n

UI\/UX Design<\/h2>\n

Evolution of a Website Search<\/h3>\n

A new Advanced Search<\/strong> 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.<\/p>\n

\"MCD-Advanced-Search-UI-UX-Feedback-1\"<\/a><\/p>\n

\"MCD-Advanced-Search-UI-UX-Feedback-2\"<\/a><\/p>\n

 <\/p>\n

Variation 1<\/h4>\n

To eliminate some redundancy in ‘community directory’ (header, title bar) I reduced it to just Search<\/strong> \u2013 consequently Advanced Search<\/strong> could be used on that following page.<\/p>\n

My initial\u00a0suggestion of adding\u00a0some small blue ‘Advanced Search’ text underneath still had\u00a0the same issue of a very small target to click on (even if you know it\u2019s there!), so I tried:<\/p>\n

    \n
  1. Shortening the Location<\/strong> field to half length and shifting\u00a0the related\u00a0Radius<\/strong> field right next to it.<\/li>\n
  2. Making 2 nice big buttons for each search option.<\/li>\n<\/ol>\n

    Result:<\/b> Overall this tightened up the whole search area a bit and eliminated the unpredictable word-wrapping.<\/p>\n

    \"MCD-Advanced-Search-Variation-1\"<\/a><\/p>\n

    Variation 2<\/h4>\n

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

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

      Result:<\/strong> I think it looks quite\u00a0clear where everything is\u00a0and it’s purpose. This also tightened up the whole search area significantly, allowing another line of the quotation below it.<\/p>\n

      \"MCD-Advanced-Search-Variation-2\"<\/a><\/p>\n

      \n

      University Student Portal Makeover<\/h3>\n

      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:<\/p>\n

      \"DtR-Before\"<\/a>
      DtR-Before<\/figcaption><\/figure>\n
      \"DtR-After\"<\/a>
      DtR-After<\/figcaption><\/figure>\n
      \n

      From Wireframe to Final Product<\/h3>\n

      QUT: MOOCs<\/h3>\n

      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<\/a> to create this live mockup of the 3 pages<\/a>.<\/p>\n

      QUT: Arts POP<\/h3>\n

      The following series of PDFs demonstrate my collaboration with a graphic\u00a0designer through the entire process of\u00a0Wireframing to Mockups to Final product for the Arts-POP<\/abbr> site for Queensland University of Technology:<\/p>\n