RACQ Connected Member website

Ground-up responsive design

Image alt tag

xxxxxxxxxx

xxxxxxxxxx

Context

xxxxxxxxxx

Background

xxxxxxxx.

Objective

xxxxxxxxxx.

Image alt tag

Team

Product designer
Developer
Product Manager

Image alt tag

Tools

Workshops
Whiteboarding
Pencil on paper
Sketch
Invision

Image alt tag

Deliverables

Wireframes
User & UI flow maps
Mid-fi prototype
Hi-fi prototype
Style guide

Image alt tag

Timeframe

xxxxxxxx

Research & planning

xxxxxxxxxxx

xxxxxxxxxxxxxx

(Pending):  RACQ website & portal

Personas & use cases

Image alt tag

xxxxxxx
xxx

xxxxxxxxxxxxx

xxxxxxxxxxxxx.

Image alt tag

xxxxxxx
xxx

xxxxxxxxxxxxx

xxxxxxxxxxxxx

Image alt tag

xxxxxxx
xxx

xxxxxxxxxxxxx

xxxxxxxxxxxxx

User flow map

This high-level process map shows key interaction points along the critical path.

(Pending):  RACQ website & portal

Scope of work

xxxxxxxxxxxxx

  • xxxxxxxxxxx xxxxxxxx

  • xxxxxxxxx xxxxxxxxxxx

Ideation
Conceptual sketches
Wireframes

Mid-fidelity design

xxxxxxxxxxxxxx

UI flow map

(Pending):  RACQ website & portal
Mid-fidelity screens

User testing results

Findings from user testing of the mid-fi prototype included:

  1. xxxxxxxxxxxxx xxxxxxxxxxx

  2. xxxxxxxxxxxxx xxxxxxxxxxx

High fidelity design

xxxxxxxxxx.

xxxxxxxxx

Styleguide

xxxxxxxxxxx.

(Pending):  RACQ website & portal
Prototype

UI flow map

xxxxxxxxxxxx

(Pending):  RACQ website & portal
Key screens

Design exploration

As with any design project, a variety of different visual and functional approaches were explored for various interface elements and interaction patterns. Here's a small selection....

Internal assets & markup
Outcomes

xxxxxxxxxxx

xxxxxxxxx

Key learnings

  • xxxxxxxxxx

  • xxxxxxxx

Next steps

xxxxxxxxxxxx