I'm Brad, a creative UX designer with a holistic approach to design. I'm Brad, a creative UX designer with a holistic approach to design.

Profile Pic

Sydney, Australia |

Transforming the Online Experience

SETTING

Location: Newcastle, Australia
Dates: June to August, 2015
Team: Brad Aitken (UX Designer), Technical Producer, Content Producer, Manager

BACKGROUND

I was asked to recreate the flagship website of an international television network with a project team. The new website needed to be user-friendly, have a responsive design and represent the organisation to the world for the next 2-3 years.

SOLUTION

For this young organisation, I sought to clarify the needs of the users, by implementing a human-centred methodology and objectively defining our requirements through research. Together we purposeful crafted a solution for the future.

STRATEGY

In my design, I provided easy catch-up opportunities, unambiguous access to live streaming and direct flows to a convenient online store. The approach was to establish optimal rapport with the television personalities by adopting a content-first approach.

Web front page
DESIGN PROCESS

For an organisation in the early stages of developing clear strategies and business processes, I encouraged use of the rational and human-centred Design Thinking process. The website needed a foundation grounded in users needs and in the context of a clearly-defined business strategy.

After empathising with users and defining the business goals, making important design choices for wireframes, user journeys and flows was relatively simple. Creativity would not be random, but would instead entail profoundly rational ideas, developed from clearly defined needs.

d.school's Design Thinking Process
Persona 1 Image
PERSONAS

Personas were thoughtfully formed from interview findings and web analytics data. The personas represented latent and immediate needs, and were used to objectively define the main priorities for our site and communicate needs to stakeholders.

Persona 1 Image
Dorothy
  • Retiree, loves knitting
  • Seeks companionship and routine
  • Frustrated by complex technology
Persona 2 Image
Blake
  • TAFE student & checkout bloke
  • Looking for identity and purpose in life
  • Frustrated by irrelevant info
Persona 3 Image
Venessa
  • Mother, wife and part-time retail assistant
  • Wants practical resources for day-to-day living and for her kids
  • Frustrated by always giving, never recieving
Outlining vision and value
VISION AND VALUES

In the early stages of the methodology, I clarified organisational statements of vision and values with the project team. Understanding the long-term desires of the organisation would be a key factor in forming a suitable online strategy for the site.

Examining payment processes
BUSINESS PROCESSES

Behind the scenes, efficient and effective business processes are crucial to a pleasant customer journey. These processes inevitably impact customer experiences. After interviewing administrators and staff, I mapped out the flows to determine how the processes might be simplified.

Finding requirements
REQUIREMENTS GATHERING

I met with program producers to map the basic content requirements and the cultural context which the content would be framed within. This gave the team a stronger idea of stakeholder expectations for the site.

IDEATION

Led by personas and a deeper understanding of the organisations desires, I worked with the team to synthesise our findings into a clearly-defined strategy: to create a highly-relational simple site that built an emotional connection with the users. But simplicity would not come easily.

Brainstorming sessions were held to ideate features of the site. These ideas were organised heirarchically, to begin to shape a heirarchy. This logical process itself involved empathising with the user in their journey. For example, would users want to access live streaming or catch-up first? And how many steps should it take to get there? Each step of the journey had to be considered.

Ideation session on the whiteboard
WIREFRAMING

An initial wireframing sessions was held with the team, to let the stakeholders be a part of the implementation. I guided design discussion, and where necessary explained theory such as gestalts laws of grouping, the golden ratio and current design patterns, always grounding design decisions in solid research.

From here, I iteratively developed wireframes in a paper notebook and discussed my sketches with team members throughout.

Wireframing on the whiteboard
FRONT PAGE

Iterations of the front page implemented bold colors in line with the branding scheme, content-first hero banners to engage with television presenters and direct navigation to desired features such as the live stream.

Outlining vision and value Outlining vision and value
LIVE STREAM

Promoting content on a page with multiple controls and tools involved utilising the grid to it's fullest extent. Clearing clutter was achieved through effective grouping and spacing, as per gestalts laws.

Outlining vision and value Outlining vision and value
ARTICLES

News article pages developed focus and clarity on content with negative space. Coloured boxes highlighted important factual information in fun and exciting ways. Originally full-width, these were pulled back in line with the text.

Outlining vision and value Outlining vision and value
USER EVALUATION

In user testing, participants were given simple tasks, such as to find a unique product in the store. Testing was performed in Proto.io with a range of users with varying abilities. Aside from noticing the ocasional 'ahh', I observed subtle interaction challenges such as interpretation of terms and whether search features were used efficiently.

In examining user feedback, consideration of personality also played a role. Understanding that some were more detail-oriented, others practically-minded and some intuitive, gave useful insight into the feedback offered by test users.

User evaluation notes
PROTOTYPING

To prototype the experience, I developed a custom WordPress theme with the help of a technical producer. In this process, small visual features were changed to the design, such as the placement of background images. Yet the underlying strategy and experience for the site had been established.

Example of prototyping in WordPress
REFLECTION

This project, for a young and still-forming Australian organisation, demonstrated the substantial value of creative design grounded in user research and analysis, within in a human-centred methodology. The tools for empathy, such as personas and interviews, gathered latent user needs and long-term organisational desires. This enabled us to define a strong strategy: to appeal to an emotional connection with viewers.

Through mapping complex business problems in payment processes, using design skills to propose solutions, the user's journey became more seemless.

In later stages, solid design theory resulted in the success of wireframes, mockups and prototype. This project, developed with a clearly defined strategy and set of needs, enabled the creation of an well-crafted, responsive experience, shaped out for the future.

Reflection image
Smart Watch Time-Keeping App

A Paradigm Shift in Time-Keeping

SETTING

Location: University of Sydney, Australia
Dates: March to June, 2014
Role: Student of Interaction Design

BACKGROUND

I was challenged to envision and design an app for a transport interchange of the future. Working as a designer in a design agency, I was to develop a working prototype in consultation with stakeholders from real-world city council, urban planners and researchers.

SOLUTION

My solution was to create a paradigm shift in time-keeping — a smartwatch app that provides context-relevant realtime data in a glanceable format for busy commuters.

HOW IT WORKS

As a traveller approaches a transport interchange (a bus stop, for example), the interchange pushes data via Bluetooth Low Energy to their smartwatch. Where Bluetooth is not available, the watch reverts to geolocation via a paired smartphone or tablet, to source the most contextually relevant data.

Bus Stop with Bluetooth
The services screen enabling users to select services they need
THE COMPANION APP

The companion app for tablet or smartphone connects with the smartwatch via Bluetooth and allows users to tailor the watch app for their personal needs. The companion app, downloadable from an app store, would allow users to choose a colour palette for their watch face, synchronise calendars and even customise specific travel services (shown).

DESIGN PROCESS

Throughout the project I adopted a human-centred Design Thinking process, largely based on d.school’s model (visualised below). Such a process ensured that in designing the paradigm shift, every detail was meaningfully crafted from the ground up. Every aspect of the design had a rational or emotional purpose.

Upon reaching the ideation and prototyping stages I worked through paper sketches, then to wireframes, to mockups, to prototypes with ongoing evaluation throughout, thereby building upon my design.

d.school's Design Thinking Model
BACKGROUND RESEARCH

To first begin building my understanding of the user problems at hand, I performed a review of three pre-existing future bus stop concepts to see what problem each design had addressed and then examined the designs in light of academic research. Drawing out the strengths and weaknesses of each, I found that the prominent use of public displays presented unresolved issues relating to privacy, crowds, cost, novelty, vandalism and screen-blindness1.

These findings led me to dig deeper and interview public transport users to probe some the most significant problems they experienced in their bus travel. My research revealed that regular travellers were mostly frustrated by unpredictability of travel times. Furthermore, irregular travellers at times preferred to walk for the same reason.

After synthesising and rationalising my findings into a mind map, I established that the primary need for bus users was not another public display - the need was a paradigm shift in time-keeping.

Mind Map
IDEATION

I began exploring a variety of ideas through storyboarding and diagramming based on personal observations and empathy with personas I had developed earlier. Travelling home on the train one evening, a solid concept began to form in my mind - a smart watch app showing live bus arrival times for the busy commuter.

An Early Concept Sketch The Concept in Storyboard Format
Interface Design 1 Interface Design 2
WIREFRAMES

I moved to wireframe the concept, first creating my own watch-face grid, then designing and testing several solutions that would be glanceable and understandable. Research informed my design through reference to facts about real-time data user preferences at public transport interchanges. For example, the dial was designed with minute strokes because the acceptable margin of error for real-time data was considered to be 1 minute2.

Interface Grid and Watch Body A Development of the Second Design - Larger Font Size A Development of the First Design - Multiple Bus Routes
HIGH FIDELITY MOCKUPS

I further developed my wireframes into high fidelity mockups, carefully selecting colours that would be glanceable, that would contrast between services and also add a hedonic nature for the user. The user experience became a central focus for an app to be displayed on wrists. The font of Avenir was also chosen for its sensibility, clarity and futuristic style3.

Companion App Wireframe
A Developed Wireframe of the Next Bus Screen
A Developed Wireframe of the Multiple Buses Screen
A Developed Wireframe of the All Routes Screen
A Developed Wireframe of the Calendar Screen
High-Fidelity Mockup of the Next Bus Screen High-Fidelity Mockup of the Multiple Buses Screen High-Fidelity Mockup of the All Routes Screen High-Fidelity Mockup of the Calendar Screen
EVALUATION

In evaluating my designs, I performed two rounds of scenario-based evaluations on a blend of bus users and professional designers, using high fidelity paper prototypes (shown). I explained four different scenarios where, in each, the user was asked to interact with the interface cutouts and speak their thoughts aloud while I took notes.

The findings revealed the need for a fine-tuning of the concept (for instance, where users prefered to be shown the quickest route, not their regular route) and the need for demonstration videos to explain user tracking and view changing. These additions were made in the companion app (demonstrated in the companion app promotional video).

Accompanying these findings, my evaluation confirmed the glanceability of fonts and helped establish a suitable watch size for the prototyping stage ahead.

Scenario Testing with Paper Cutouts
ANIMATIONS & THE COMPANION APP

To prototype the interface, I would need to design animations. I developed animations in Adobe After Effects, that would add a subtle ludic nature to the interface and also enhance the concept model of having blocks of time. I also progressed to mock up a companion app screen in Photoshop that I could use with Keynote for filming.

Developing Animations in Adobe After Effects Developing Animations in Adobe After Effects Preparing Companion App Screens
3D PRINTING

To have a watch face that one could wear, I designed and 3D printed a blank watch face model with one of the Design faculties Makerbots that I would project onto. Two iterations were printed in order to better attach a watch band. Black rubber bands were purchased and secured to the face, making the watch ready for filming.

Developing a 3D Watch Design 3D Printing the Watch Face Watch Components
DATA PROJECTION

For the final stage of prototyping, I arranged for a friend to put on the watch and rest their arm on a desk, onto which another friend would project the watch animations. We then simultaneously projected a context scene (video of a bus stop) onto the wall, while I filmed and directed.

Projecting on the Watch Filming with the Prototype
RELFECTION

Throughout the project I utilised a process that enabled the development of a versatile and valuable concept - a paradigm shift in time-keeping.

First in the process, background research and interviews enabled me to empathise with users in the areas of frustration that they experienced. It helped me understand key problem areas - that users were frustrated by public displays and that they desired a personal and efficient means of obtaining bus arrival times.

Next the ideation stage enabled me to develop a versatile and unique concept that would address specific problem areas posed by users. In crafting the user experience through wireframing, mockups and evaluation my concept could be presented to users and refined based on their feedback. Evaluation solidified the strengths and weaknesses of the design.

Finally, the working prototype enabled users to understand and see the user experience of the app.

Smart Time-Keeper App
REFERENCES

1. Municipal WiFi and interactive displays: Appropriation of new technologies in public urban spaces
http://dx.doi.org/10.1016/j.techfore.2013.08.037

2. Users’ views on current and future real-time bus information systems
http://onlinelibrary.wiley.com/doi/10.1002/atr.1206/abstract

3. Avenir Font Details
http://www.myfonts.com/fonts/linotype/avenir/

Bus Icon
http://commons.wikimedia.org/wiki/File:Bus-logo.svg

Interface Colour Theme
https://kuler.adobe.com/fluro-color-theme-1931321/

Companion App Mockup Components
http://www.teehanlax.com/tools/ipad/

Future Bus Stop
https://busstopofthefuturemastergroup.wikispaces.com/

Engaging Customers with
Interactive Music

SETTING

Location: University of Sydney, Australia
Dates: March to June, 2014
Team: Brad Aitken (Designer), Daniel Kenny (Designer)

BACKGROUND

The brief challenged us to create a store-front experience for a Telco that would be so cool, people would want to interact with the brand before they had time to reject it. Our business objective was to entice 20% of walk-past traffic to interact with the brand at the store-front. The brief also required a take-away component.

SOLUTION

Our solution was to design an experience around trust-building — a relocatable interactive display drawing shoppers into a musical experience with the brand through their footsteps.

HOW IT WORKS

As a by-passer walks in front of an interactive display at the storefront, they are enticed to engage with music that matches their walking pace, in rhythm and melody. For each step they take, a Kinect motion sensor records the step and a note plays over the top of a predefined musical backing. Interested by-passers can stop to interact further using their arms to play specific notes. Up to three by-passers can interact together.

DESIGN PROCESS

In this project, we adopted IDEO’s Design Thinking framework (right) which promoted the integration of business requirements, human desire and technical opportunity. The synergistic approach to design would enable our work to fulfil the requirements of multiple stakeholders and entities.

Within this framework, our design process followed d.school’s human-centred design model (below), whereby a contextual understanding of the problem through user interviews and research, would lead to meaningful concept development.

Design Thinking Framework
Iterative Design Process
RESEARCH, INTERVIEWS AND SITE ANALYSIS

I initiated my research by examining the design literature on public displays and their associated design issues. Research revealed the need for an intuitive design which would convert by-passers through subtle interaction at first contact1, along with inclusion of social interaction in order to help overcome human self-consciousness 2. It was clear even at this stage, that the initial hurdle of encouraging by-passers to interact (shown below) would need to be overcome through our design.

To explore how best to address these concerns, I performed a series of interviews outside Vodafone at the Queen Victoria Building (the chosen location) in order to establish social interaction norms while shopping, as well as what aspects drew shoppers to shop windows.

I compiled my research findings into a brief report for review, along with an initial set of ideas showing where I would be headed throughout the remainder of the project.

Interaction Levels Conversion Graph
Interview Site Image Site Analysis Image
Personas

To better understand the traits, goals and frustrations of telco customers, I reviewed the combined collection of our interview results and synthesised them into three distinct personas (summarised right). My personas led the team and our stakeholders, to a deeper understanding of our audience, showing we should direct our attention to fun and creative designs.

Persona 1 Image Michael
  • Photographer
  • Aims to find the perfect shot
  • Frustrated by poor aesthetics
Persona 2 Image Nicole
  • Teacher
  • Looks for fun activities for kids
  • Frustrated by non-creative people
Persona 3 Image Aaron
  • Surfer
  • Aims to find great service
  • Frustrated by careless attitudes
IDEATION

Knowing our solution would need to be highly creative, have a strong engagement level, and include a take-away component, I began to conceptualise three ideas. First a display with a live ringing phone inviting curious shoppers to a game. Second, a musical shopping experience (shown right). And third, a visual montage of customer stories, developed through sensing behaviour of by-passers. To elaborate my ideas, I sketched out mind-maps and storyboards, while Daniel my team partner, sketched out visual aspects to our ideas.

Musical Shopping Experience Storyboard Mindmap
Musical Shopping Interface Mockup The Take-Away Component Process
MOCKUPS

The synthesis and deep consideration of our ideas led us to settle on a visualisation of Vodafone-style beats representing notes that would sync with the footsteps of customers. This concept tied in nicely with both the brand and the musical nuance and the visual design could be easily adapted for different locations. Further to this, because of the concept’s strong level of draw-in through subtle interaction, we could maximise the fulfilment our of business requirement to draw in 20% of by-passers. The mockups above are credited to Daniel.

EVALUATION

In evaluating the mockups, I performed a heuristic evaluation - a technique used to resolve design issues in an interface - while Daniel performed a walk-through evaluation with potential users. The results of my heuristic evaluation (right) identified areas where we could improve visibility in the interface for users. We discussed the feedback together so the design could be tweaked in the prototyping stage, where needed. The results of Daniel’s walk-through evaluation revealed the need for animation in our prototype.

Heuristic Evaluation performed on interface
PROTOTYPING

The final prototype was coded as an animation for demonstrating a scenario where a user would be drawn to interact with the display. As Daniel coded, I filmed clips of user interaction with a display and compiled the clips together into a film. Once the film was compiled, it was presented to project stakeholders including designers from a design agency in Sydney along with academics. The clip was received glowingly and we were awarded a high distinction for our presentation.

Animation of Musical Interface
Video Editing the Film Clip Filming User Interaction
RELFECTION

The challenge to draw customers into an experience with a brand was one that required concept-building through a process. The human-centred process of ‘understand, observe, point of view, ideate, prototype and test’, brought about a solid solution grounded in research.

First, research established a deeper understanding of the problem space - that the design required social interaction with an intuitive inviting design through subtle interaction at first contact. Interviews to obtain points of view, as well as observations of the site then led us to empathise with our audience, recognising the design should be playful and inviting.

In the ideation stage our ideas were grounded in solid research, with a clear understanding of business, human and technical design requirements. Finally through prototyping iterations and testing, our concept was clarified and brought together more cohesively. Each stage of the process supported our ideas and design for a truly integrated result.

REFERENCES

1. Measuring Interactivity at an Interactive Public Information Display
http://sydney.edu.au/engineering/it/~wasinger/publications/2013OzCHI%20-%20Measuring%20Interactivity%20at%20an%20Interactive%20Public%20Information%20Display.pdf

2. Municipal WiFi and interactive displays: Appropriation of new technologies in public urban spaces
http://dx.doi.org/10.1016/j.techfore.2013.08.037

3. The Audience Funnel: Observations of Gesture Based Interaction With Multiple Large Displays in a City Center
http://www.tandfonline.com/doi/abs/10.1080/10447318.2011.555299

Persona Image - Photographer
http://www.stocksy.com/45919

Persona Image - Teacher
http://static.wixstatic.com/media/b38d18ddfff8414b06c5732514a53ee9.jpg_srz_583_453_85_22_0.50_1.20_0.00_jpg_srz

Persona Image - Surfer
http://1.bp.blogspot.com/-Z8QO4KCB-Yg/U8BmKWmERKI/AAAAAAAAARg/MtR14-zEk94/s1600/Julian+Wilson.jpg

Contact

Feel free to contact me using the form below. Or you can
write to or reach me at my LinkedIn profile.