User Interface DESIGN and development Student Hub / University of Melbourne

Similar documents
Leon Govier Senior User Experience Designer/ Digital Project Manager

[PROFILE / INTRO] 3D Multimedia, Graphics & Web Services

GENERIC AGENCY STATEMENT OF WORK. Website Redesign Project Generic Company

Visual Communications Project Brief

Maldives Pension Administration Office Republic of Maldives

Web design and planning

Title: Front-end Web Design, Back-end Development, & Graphic Design Levi Gable Web Design Seattle WA

Digital Web Design Syllabus/Online Course Plan

INFORMATION TECHNOLOGY: OFFICE AND WORKPLACE

Smietanski CLIENTS EDUCATION SOFTWARE CODE TOOLS FRAMEWORKS CMS. Joseph Smietanski Smietanski.me

JAVIER GONZÁLEZ. User Experience Designer and Information Architect

TIAGO FAIA MARQUES Online CV / Portfolio

Kentico CMS 5 Developer Training Syllabus

Due to a period of rapid growth Made Media is recruiting for new roles in development, design, project and account management.

MERVIN FRANCIS JOHNSINGH

ORGANISATION OF EASTERN CARIBBEAN STATES. Consultancy for Re-design of OECS Website

Band 7 points on the SFC Support Staff Pay Scale

Beccatron Studios: Webdesign Rate Sheet

ANUP KUMAR Alpharetta, GA

Web Training Course: Introduction to Web Editing Version September 2006 Version March 2007, Version May 2007.

Request For Proposal Redesign, Development, and Ongoing Hosting of the Monterey Peninsula College website (

Is to define and implement a design strategy with deep understanding of user and business needs that makes user interfaces and experiences great.

Adobe Flash Catalyst CS5.5

DEPARTMENT of DIGITAL MEDIA / INTERNET SERVICES:

Designing and Managing an Intranet

Archived. Designing and Managing an Intranet. Better Practice Checklist. Practical guides for effective use of new technologies in Government

REQUEST FOR BIDS -- Website Design

CREDENTIALS DOCUMENT. T M E. info@visionfactor.com.au W.

Marla Laubisch December 2015

H22130, page 1 UI/UX Designer Job Description

James Healey. Summary. Experience. UI / UX Designer & Front End Developer at ZZ Creative me@jahealey.co.uk

OCR LEVEL 2 CAMBRIDGE TECHNICAL

Dev01: Kentico CMS 7 Developer Essentials Syllabus

Business of the Web - CPNT 265 Module 1 Planning a Web site Instructor s Guide

Adobe Dreamweaver Exam Objectives

GRDSN Web/Interactive Design 2 Spring 2014

Lindsey Avery. (Lindsey Avery)

Handan Dogan. UX & Interaction Design Lead UI Developer. Technical Skills

James Singletary IV :: Front End Web Developer located in Tampa, Florida

PMI Marketing Portal User Guide

UNIVERSITY WEB GROUP AGENDA. 1 Introduction Ellen Keir. 2 Central web team activities Ross Haggart. 3 Life Sciences \ CMDN activities Andrew Millar

Skills for Employment Investment Project (SEIP)

Information Technology Systems (2012)

ADMINISTRATOR GUIDE VERSION

# No.3 Road, Richmond, BC V7A 1G5. Home: Cel:

Interactive solutions

The Agile Drupalist. Methodologies & Techniques for Running Effective Drupal Projects. By Adrian AJ Jones (Canuckaholic)

Web Training Course: Introduction to Web Editing Version 1.4 October 2007 Version 2.0 December Course Rationale: Aims & Objectives:

... Asbru Web Content Management System. Getting Started. Easily & Inexpensively Create, Publish & Manage Your Websites

Christopher Zavatchen

WEBSITE REDESIGN PROCESS Project Plan Overview: DRAFT Updated 1/26/12 A> DEFINITION AND PLANNING

Web & Graphic design for actors, artists and creative types

Web design & planning

Terms of Reference Web Development Consultancy. Adeso African Development Solutions

Deliverable D8.1 Water Reuse Europe (WRE) website design and functionality specification

MYP Unit Question. How can I apply and convey my design skills in developing a product to meet the expectations of a client?

William Grossman Web Developer

JOHN Y. PAK. Address: Los Angeles, CA Phone: (714) Online portfolio: hirejohnpak.com/rs_portfolio.html

How To Design A Website For The Decs

JOB DESCRIPTION. Principal Duties and Responsibilities (supported by Web Editor and Web Administrator)

Web project proposal. European e-skills Association

CARIBBEAN TELECOMMUNICATIONS UNION CARIBBEAN REGIONAL COMMUNICATIONS INFRASTRUCTURE PROJECT (CARCIP)

College of Arts and Sciences Options for Website Owners

A CHILD S HOPE FOUNDATION A PROPOSAL PREPARED BY: AUSTIN CLIFT, RACHEL RICHARDSON, TODD GOATES

Cheryl Morton SUMMARY TECHNICAL EXPERTISE EDUCATION EXPERIENCE. Dallas, TX

OBJECTIVE: User Experience Designer

Website design & development process

DESIGNING A USER-FOCUSED EXPERIENCE

TECHNICAL DESCRIPTION WEB DESIGN

Web Design Portfolio. Genesis Gaule :: PO Box 204 :: Forman, ND :: ::

Request for Proposals Brand and Website Development

WEB & MOBILE UI / UX ICON DESIGN ILLUSTRATOR

Joomla Templates 101 Barb Ackemann

Service Definition Easysite Web CMS

Creating Online Surveys with Qualtrics Survey Tool

For submission to the Web Redevelopment Project Board

Course outline. Code: DES222 Title: e-media B

Dreamweaver Domain 2: Planning Site Design and Page Layout

School of Medicine Guide to New Web Design

MISSION To achieve service excellence and exceed at whatever we do

Sage CRM 2014 R2 Welcome to your new Sage CRM experience

Redesign of the Rapid Information Bulletin Board (RIBBS)

JOB VACANCIES October 20 th, 2013

Design Your Future. Take your communications career to a higher level with a Master s Degree specializing in Web Design and Online Communication.

38 Essential Website Redesign Terms You Need to Know

Hello, I m Ryan Huber. I m currently the lead web developer and designer for a small team at Vanderbilt University.

webtree designs Gayle Pyfrom web site design and development Lakewood, CO

COLUMN. Planning your SharePoint intranet project. Intranet projects on SharePoint need a clear direction APRIL Challenges and opportunities

What s New in Adobe Fireworks CS4

LIS 467: Web Development and Information Architecture Note COURSE DESCRIPTION COURSE POLICIES

Diploma of Website Development

Information Technology Systems 2012 Sample unit of work

Writing for the University of Florida

The AFS:METHOD Web Design Contest

MAX QUATTROMANI SUMMARY EXPERIENCE. FRONT-END DEVELOPER/DESIGNER maxquattromani.com (303)

Date Approved by EMT: Version 1, approved 1 March Date Approved by GM: Version 1, approved 1 March 2014

Transcription:

User Interface DESIGN and development Student Hub / University of Melbourne This first iteration of the student hub in late 2014 was a my role: Tools used: starting point towards bringing key information together from a diverse range of sources into a unified interface, with the goal of making this important information easy to find and to create a more seamless, cohesive and reliable experience for students. Working alongside project managers, marketing experts, UX researchers and testers and content developers, my role focused on developing wireframes, mock-ups, HTML prototypes, web design and CMS template development and developing support documentation for site maintainers. Illustrator / Acrobat (wireframes and functional specifications) Bootstrap (HTML prototype / template framework) Squiz Matrix CMS HTML, CSS, SASS jquery, PictureFill Photoshop (image editing) Wave, colour contrast checkers and W3C code validators Basecamp (team / stakeholder comms) Evernote (project comms) Git (site back-ups, basic versioning)

INTRANET User Interface DESIGN and development Staff Hub / University of Melbourne In 2014 University of Melbourne launched it s first iteration of a University-wide intranet and the first of a series of themed hubs. The goal for this project was to consolidate a number of key University staff-only web resources under a unified information architecture and to present staff-only information and communications in a secure, consistent and user-focused way. my role: Working with a diverse and changing team and stakeholders, I was involved in many aspects including concept pitching (developing a series of straw men mockups), html wireframes and prototypes, and responsive /mobile-first template development in Squiz Matrix CMS on a Bootstrap framework. I also helped with importing and editing content. Tools used: Illustrator / Acrobat (wireframes and functional specifications) Fireworks (straw men) Bootstrap (HTML prototype / template framework) Squiz Matrix CMS HTML, CSS, jquery Photoshop (image editing) Excel Basecamp (team / stakeholder comms) Jira agile (team comms and project tracking) Git (site back-ups, basic versioning)

support documentation website for the staff hub information architecture user-interface design content CMS template build asset builders / module development Along with custom handover training (in person), this support site is provided to site administrators and maintainers inside their site folder and provides tools and instructions specific to maintaining their site as well as links into relevant information provided elsewhere by internal and external web communities to help them with their maintenance tasks. Each support site is based on a standard base template so I can implement it quickly for each new project. It uses nested content areas for efficient reproduction, ease of updates and consistency of messaging, but is also easily customisable for each client or project and administrators can easily build upon it.

website identity for Coatesville library & community centre This website was developed in semester 1, 2009 for a subject on Information and Interface Design. It was for a fictional library and community centre in the eastern suburbs (Glen Eira council). The centre provides a large number of services to the community and hosts a large volume of information on the site for the diverse audiences it serves. It was important to organise this information in a way that was welcoming and engaging and not overwhelming. It had to be easy-to-use for new users as well as efficient-to-use for frequent visitors. The design was inline with the branding of other information design (some of which is shown on the next page). The goal for the aesthetic is clean and open; a place of cool, peaceful respite; comfortably suburban; modern and a little bit refined. It also uses some of the colours from the Glen Eira logo, so when the logos are used together they are harmonious.

information design for Coatesville library & community centre Forms and wayfinding design.

website scenter of healing In Semester 1, 2010 I developed a website for Scenter of Healing, an aromatherapy practice. The deliverables for this project included: Logo design Moodboards / style guide Site Maps Wireframes Paper Prototypes Designs A working website The look and feel for Scenter of Healing is soft, earthy and ephemeral. The logo is a mandala flower, representing wellbeing and spiritual centering.

web practice hub university of melbourne In early 2012 I was involved in coordinating a project for a redesign of the web publishing hub (until it was merged into a new project). My work on this project involved: Return / creative brief Usability research (stakeholder and user interviews, true intent study using Loop 11) Information architecture Content strategy Mock-ups Wireframes Site development in Squiz CMS Content inventory in CMS to track site progress and assist with site maintenance Page tables each page in the site had hidden page metadata information that could be viewed from a bookmarklet or a special link in the table. This was designed to allow editors a quick, in-context view of the page intent, status and ownership.

ITS website redevelopment university of melbourne In November and December 2012 I designed interfaces for the ITS website and interface elements for an ITS service desk tool, Remedy). The goal was to incorporate styles preferred by site users (feedback that came out of extensive user studies conducted by my colleages) including a dashboard style interface and mega menus, and to support a more straightforward and user friendly approach to content that would be accessible for all target users. My role on this project included the following: Design of a visual system (eg. colours / icons) for use across systems and mediums Banner design Layout design Responsive HTML prototypes CMS template development and model content pages (6 layouts) Design of content management tools to help content managers build and manage the site content Design, build and content for a support website for content managers and site maintaners Mega menu for the We Can Help section Feedback from stakeholders, content managers and users was very positive. Sortable table with information and tools for content managers (screenshot from development in progress)

website design for fitness 405 after This design was undertaken for a subject called Contextual Studies in an assignment on Semiotics. The goal was to change the meaning of an existing promotional design using visual language to engage a different audience. I chose a website design for a local fitness centre, for which the existing promotional design was no-frills masculine. The current website design was also no-frills / non-design. The new design is aimed at a more aspirational and lifestyle focused audience. The look and feel is vivid, high-contrast and energetic. before Fitness 405 - It's all about you! http://www.fitness405.com.au/ Open 5.30 to Midnight Everyday of the Year New Energy New Beginnings New Happenings home Welcome to online Health Library Workplace Health Fitness 405 for your better health & fitness... We are here for you, to enhance your Health, Fitness, and help you achieve your goals Subscribe to Free Weekly Fitness Tips Fully Equipped Mixed Gym Over 45 Weekly Group Fitness Classes Gym Floor Instructors & Personal Training Food and Workout Monitoring Motivation & Guidance Support Nutrition Advice & Meals Plans Extensive Supplement Product Range Stress Management & Life Style Consultancy Clinical Massage Therapy Kids Fitness Program - Mini Moves It's all about you! Home Privacy Disclaimer 405 Time Table Contact Us Copyright 2004-2006 Better Health Pty Ltd Australia t/as Fitness 405 ABN 51 902 452 072 Site Design: NOVA it 1 of 1 19/5/08 9:01 PM

re-design and development of the hr website university of melbourne Human resources Developed a project brief to verbal guidelines provided by HR Management and incorporating extensive peer / industry research Development of project plan, adapting plan to fit in with current HR priorities Developed mock-ups of the site interface in Fireworks. The design has been composed with a view to balancing branding guidelines, web standards and visually illustrating HR s current strategy. The aim has been to create a layout which is harmonious and consistent with other University sites and yet provides the HR site a with a fresh look which facilitates site users to see HR in a new way and find content more easily Developed of a content inventory, including suggested improvements to information architecture Leading and developing a content management strategy, including outlining clear role definitions and establishing review cycles. Developing a modular style sheet library with extensive documentation and style guides Currently working on the development of an interactive prototype in the CMS After release I aim to continually improve the site based on user feedback, studies and continued research

joining melbourne university of melbourne Developed in 2008, this website s purpose was to onboard new staff. It provided a structured introduction to the University, links, resources and next steps for staff to orientate themselves in their first days and weeks of work. The project aimed to improve the consistency of induction processes across the University. The goals for the look and feel were warm, clean and simple and reflecting University values, eg. gold and silver in the background to represent the value of excellence. It also incorporated branding assets from the new Marketing and ITS templates to ensure consistency of navigation and brand experience. The stylesheets and interface assets are part of a modular library shared with the main HR site. My role involved: concept support and advocacy layout and design style guide image sourcing and editing providing advice on site architecture development in Squiz Matrix CMS, CSS and HTML data entry and formatting for web Tools used: Adobe Fireworks and Photoshop Adobe Dreamweaver Squiz Matrix CMS

forms design for university of melbourne Administration My role in forms design for University Administration areas has included: Research, testing and support for the Administration forms project Prototype designs for the project Template design Development of a forms website, including content Design of HR forms (a suite of 50+ forms), using Microsoft Word InDesign & PDF MySource Matrix CMS LiveCycle Ongoing maintenance of HR forms Support to design of finance forms and other administrative areas needing help with Word forms development

template design for university of melbourne, human resources I have developed a range of templates in Microsoft Word for use within Human Resources. These templates use inbuilt Styles and field codes (for typing over, and for an overiew of data to be edited) to keep information consistent and professional in appearance as well as making documents easier to develop and maintain. These templates have included: Position descriptions Letters Faxes and memos Proposals Agendas and minutes draft of a position description template

book design illustration These pages show some spreads from a book showcasing some of my illustration work. The book was themed around pattern formation in nature, natural flow and growth towards complexity. The spreads here illustrate branching, spirals and currents.

interface design for the university of melbourne hr manual My role in the HR manual included: Working with a minimal / changing brief to develop an interface for the HR manual, including Word templates and a web interface in the CMS Developing Word templates including Styles, numbered headings and form fields Interface design for website in the CMS and basic styles and structural templates Working with a large and swiftly changing team to get a large volume of information up within a very quick turnaround time Working on populating content in the manual Training key content developers and formatters to use the templates

publication design In previous roles, I have developed a lot of publications and flyers, including newsletters Meme magazine Featured here is a spread from a magazine developed for a unit on publication design. This included: Cover 4 page article spread Reviews section Also shown on this page is one of the covers for the newsletters I developed in my previous role.

information sheets carerlinks north I regularly developed information sheets, flyers, brochures, presentations and a variety of other print and screen design for CarerLinks North (Moreland Community Health Service). Illustrated here are some of the information sheets.

instruction documents University of melbourne, Human resources I have developed a number of IT instruction documents in Word/PDF for print, and also for the intranet. Here is an example of some illustrated sheets included with the data projector, which is lent out to people with varying levels of experience and comfort levels with setting up such equipment. Also, this particular unit (now retired) was a wily machine, who could require a lot of coaxing and troubleshooting to operate. Documenting it s quirks visually in these sheets made remembering troubleshooting steps much easier.