UX:UI at Officeworks_Jo Wittman

Joanna Wittman - Officeworks - UX/UI Designer

Brief: Create Detailed Design, Digital Asset Review and Story Writing / Agile Estimating.

This project had been in the works for 8 months and on hold. The product consisted of a template to be emailed to customer - the first product of this kind on the Officeworks site. This required resolving messaging, iconography and email design. Image assets were required to represent 30 categories as shown below. The project went live 5 weeks after I started at Officeworks.

Banners and marketing material for eb and eBay

New Product: Category: Facilities Supplies: SWMS Downloads (Safety Work Management Sheets)


Ebay Banners

Over 100 banners produced.


200 variable cards coded for variable data via xerox Xmpie software

Business NameOptional Tag Line

Title Name SurnameJob Title

T: 00 0000 0000 M: 1111 111 111F: 22 2222 2222E: email.addressW: website.address

Address 1Address 2

Optional textcan fill this

space if needed

Business NameTitle Name Surname | Job Title

T: +61 (0)0 0000 0000F: +61 (0)0 0000 0000M: +61 (0)000 000 000E: email.address

Address Line 1Address Line 2Address Line 3

UX/UI for the messaging for the uploading of files to be printed. Error messaging, tooltip and trim meassages over artwork.

Officeworks Print and Copy

Tooltip Tooltip

Delivery

CX-130 Forward Dated Orders

CX-168Applying a forward Date Forward Date Applied Confrimation PagePayment Page

Order Management System - UX/UI

New Metro, Regional and country icons designed, date selector, tool-tip and confirmation page.

Xmpie Business Cards -

Metro Regional Country

Forward dated orders - customer journey


Staple Sizing Chart

Shank depthSheet capacity: 30-70

66/11 11mm

Sheet capacity: 70-100

23/13 13mm

Sheet capacity: 100

9/14 14mm


66/14 14mm


23/17 17mm


23/20 20mm


23/24 24mm

Sheet capacity: 20

No.10 4mm

Sheet capacity: 20

23/6 6mm

24/6 6mm

26/6 6mm

66/6 6mm

Sheet capacity: 30

66/7 7mm

25/8 8mm

Sheet capacity: 40

9/8 8mm

Sheet capacity: 50

23/8 8mm

24/8 8mm

26/8 8mm

66/8 8mm


23/10 10mm

Sheet capacity: 65

25/10 10mm

Staple size Staple size Shank depth0

6

Note: Sheet capacity is based on standard 80gsm paper

Brush Shape Description Chart

Angle Filbert

Long Flat

Mop

Round

Dagger

Long Liner

Fan

Short Flat

Easily define sharp edges

Create texture and bold sweeping strokes

Fill in large areas or mop up excess colour

Create soft edging effects and blending colours

Add fine and intricate detail to your works

This brush is a Round, a Shader & a Liner all in one

Produce short accurate strokes

Use a long liner for delicate accurate detail

Feather edges or create sweeping shapes

Officeworks homepage design in Axure

Development of concepts based on user heatmaps.

Axure protoypes created for testing

Product Specification sheets


Officeworks Responsive Websit - UI Design

6 weeks building responsive design over 4 breakpoints using a supplied UI library. To exacting pixel-perfect standards! Using Photoshop CC.


Officeworks Responsive Website - UX/UI Design

The existing site includes feature where users can check the status of their delivery by tracking an order online.The existing user experience lacked clarity and depth, and the feature is not easily accessed. My brief as part of the OMS team was to create contextual scenarios, user flows and design interaction and UI that allowed users to access the status of multiple deliveries within a single order. The design needed to be resposive and adhere to the new responsive style guidlines.

Documents

UX:UI at Officeworks_Jo Wittman