Showcase Ruth McAfee - Internet Portfolio

The project showcase includes samples of work I have delivered, while the case studies section describes my experience. Below in projects, personal responsibility is listed to the right ofbelow each project. Additional examples can be provided on application.

techspatula.com is an original, bespoke design. It is hand-coded and should also be read as an example of my capabilities and skills in UX, UI, html, CSS, JavaScript and web other technologies.

UX / UI design with numbered annotations

Preview (underlined hyperlink) needs to be added to all create and edit screens. NB: Items under the create menu are NEW and have not been published previously.
Actions menu to include "Cancel changes"

Remove unpublish from “create mode” (this is already an unpublished draft)
Note the change of wording from "Delegate ownership" to "Delegate authorship" (for more detail on this change see delegate UX pages)
Sentence case

Infographic and photographic track file dimensions will differ depending on content. File dimensions will be specified on next screen as user edits.

Max file size limit 2MB is required.
Tell users which file types are allowed - INCLUDING PDF for infographic tracks.

In the left menu, the "Create" icon is to be the selected icon
Though inactive, the next button should be visible. Tell the user what it does i.e Save and next. It will become fully opaque and clickable once the minimum requirements to progressing have been met. UX recommends this is once any of the fields (title, summary or image have been filled).

one.cba intranet

What am I looking at?

Logged-in view UX / UI designs with numbered annotations ready for development hand-off ...see a bit moreless The first image shows the editing view of a 'create graph, chart or infographic file' (internally referred to as a "track"). This particular series of templates is focusses on the interactions and flow following a task initiation in the 'Actions' menu in the top right of the screen. Blue dots indicate the context for annotations sampled in the next image.

What did I do?

html (rapid prototyping)
css (google dev tools)
UI design (Sketch)
Interaction design
Microcopy
Content audit with IA iterations
Wireframe (Balsamic)
Documentation (Confluence)
User research (treejack, interviews, analytics)

In-Gallery Projection PoC

What is this?

Data visualisation proof of concept using realtime library searches
View online | Read the DX Lab blog

What did I do?

UX / UI design
html
css
xml
javascript / jQuery
google analytics
User research

Mainstreet interactive responsive prototype

Main Street (2 week sprint)

What is this?

An experiment in storytelling syncronising images and news snippets from different data libraries.
View online | Read the DX Lab blog | View prototype