Woolworth Mobile Consumer Website

Situation:

I was brought in to create a new user experience for Woolworth Mobile customers. As they were changing from an alliance with Optus to Telstra it required a new interface with integration into a back-end ‘Telecoms in a Box’ enterprise level application run by Telstra to service re-sellers.

Task:

My responsibility was to research and understand the requirements to integrate with the back-end system.

Next was to design a new interface that contained all the functional requirement and document them in the functional specification.

Action:

First was the identification and mapping of key processes, such as register, activate, recharge and various configurations based upon personal preference.

Next was the consolidation of the data fields required into form pages with workflow around different requirements generating different questions and corresponding data.

Then, an IA was evolved and functional tasks were scripted.

Best Practice was researched and applied to the form templates and patterns.

Result:

The website was divided into ‘public’ and ‘personalised’ sections. The public interface included key marketing information and the option for eCommerce phone sales and plan selection options. The personalised section was account related information and options, with shortcuts for key workflow.

Key functionality was contained within 320px tablets that would be universally consistent across mobile, tablet and web interfaces and streamline the responsive behaviour.

This simplified the development process, provided the user with a consistent experience across multiple platforms and did not sacrifice the strengths of larger media for the functionality in a mobile environment.

Key user functions like ‘recharge’ were given editable, pre-configured shortcuts to streamline user workflow.

Real-time chat would be used in non-mobile interactions.

Artifacts

Key template with Responsive Breakdown (Pending transition to Telstra Services)

Standard template with floating mobile friendly ‘Tablets’ to support key functionality in a consistent and universal manner across all platforms.

Content Elements and Includes.

Mix of WYSIWIG and Functional components, with column breakdown for responsive indicated.

Form Process and Pattern Sample: Web and Mobile

Activation process for web (left, showing all the fields ‘open’ for illustration). Colour coding shows different workflows based upon conditional requirements.

Right – The Mobile version, showing responsive transition and step-through process.