Hello, I am a «UX/UI Designer» from Melbourne. I enjoy creative problem solving and working within a cross-functional team.
I have a track record in Creative Direction and UI Design. I also enjoy beautiful typography and clean, accessible programming.
I work in Human Centered Design and UX Research.
portfolio
say hello: [email protected]
David Newman.
or call on: 0435 077 598
www.officeworks.com.au/shop/office-works/c/technology/smart-home-office
Banners are a critical way of communicating company initiatives, tools and business partnerships. A request was made to unify how Officeworks spreads its message.
UNDERSTAND
Empathy Ideate TestDefine Prototype Implement
EXPLORE DELIVER
Website here
officeworks
Banner Designs
Understand
Empathy A customers tendency is to ignore page elements that they perceive (correctly or incorrectly) to be ads.
On the web, UI elements and different pieces of content all fight for users’ attention.
To complete their tasks efficiently, people have learned to pay attention to elements that typically are helpful (e.g., navigation bars, search boxes,
headlines) and ignore those which are usually void of information. Banners are perhaps the most prominent member of this last category.
Legitimate content elements that have certain ad-like characteristics are ignored, too.
UNDERSTAND
Empathy Ideate TestDefine Prototype Implement
EXPLORE DELIVER
Understand
Empathy
CTR: 1.2%
CTR: 0.2%
CTR: 0.4%
CTR: 1.0%
CTR: 2.4%
After researching through Adobe Analytics on Click Through Rates, I observed that banners that were minimal and had the appropriate messaging, had higher engagement and conversion.
Could this mean that banners that don't look like banner ads are more noticeable?
Are customers choosing to ignore banners thinking they are ads?
observation hypothesis
UNDERSTAND
Empathy Ideate TestDefine Prototype Implement
EXPLORE DELIVER
Understand
Define Our target users should be considered as aware, not blind.
When we describe reluctance to view ads as “blindness” or “obliviousness,” we minimize the users’ active role in using a website. Several studies have found that users are not really “blind” to banners or similar advertisements, but are quite aware of their presence and actively choose not to view them.
Our success metrics for banners is Click-Through-Rate, but I though it necessary to also consider failure metrics and overall business initiatives to see how they align with optimisation.
sUccess metrics
failUre metrics
Click through Rate > 2%
Bounce Rate > 50%Overall page content engagement decrease
Uplift in Conversion Rate > 4%
our success metrics
our useropportunity
There was a need to both create a system that unifies all of our business communication initiatives, while considering what is most engaging for our customers.
UNDERSTAND
Empathy Ideate TestDefine Prototype Implement
EXPLORE DELIVER
An ad doesn’t have to appear at the top of the page or in the right rail to be ignored. On competitors websites, ads can appear anywhere within a webpage, and users are aware of this fact. Thus, they are careful not to waste time on ads, even when the ads appear within content areas.
Specifically, the ad stood out because of several qualities:
01 Small, rectangular shape in the middle of text.
02 Fancy formatting.
03 Coloured (blue) background against the white page.
04 Text embedded in the image.
explore
Ideate Could this mean that banners that don't look like banner ads are more noticeable?
Are customers choosing to ignore banners thinking they are ads?
hypothesis
UNDERSTAND
Empathy Ideate TestDefine Prototype Implement
EXPLORE DELIVER
explore
Ideate Would consistency increase engagement?
The consistent look and feel of a product, a brand, or even a campaign is critical to earning the trust of a buyer. That’s why it’s so important to make sure a product appears the same, even on omni-channel platforms. If its appearance varies, a buyer starts to doubt the product and lose trust in the brand – maybe without even realizing it.
Does tone and language effect conversion?
Conversion copywriting is a powerhouse of persuasion. It blends both an intensely scientific analysis with creative flair to create a focused message that your target audience cannot help but take the action you want them to.
hypothesis
Shop online for even more choice on seating.
Thousands more products are a click away.
RATIO: 1 : 2. 083
RATIO: 1 : 1 .198
You can order this product in-storeScan the barcode and shop using our app
RATIO: 1 : 1 .7543
RATIO : 1 : 1 .157
UNDERSTAND
Empathy Ideate TestDefine Prototype Implement
EXPLORE DELIVER
explore
Prototype
The Blue.
I shipped an A/B/n test to validate our success and failure metrics and see which design resonated most with our users.
a/b/n test
UNDERSTAND
Empathy Ideate TestDefine Prototype Implement
EXPLORE DELIVER
The Grey.
explore
Prototype
UNDERSTAND
Empathy Ideate TestDefine Prototype Implement
EXPLORE DELIVER
explore
Prototype
The Control.
UNDERSTAND
Empathy Ideate TestDefine Prototype Implement
EXPLORE DELIVER
deliver
Test the results
Could this mean that banners that don't look like banner ads are more noticeable?
Yes, the elements that make banners look more like ads decrease engagement. Also overall brand consistency improves brand credibility.
sUccess metrics
failUre metrics
CTR Control: 0.60%CTR Blue: 2.69%CTR Grey: 4.51%
Bounce Rate Control: 6.67%Bounce Rate Blue: 3.95%Bounce Rate Grey: 2.97%
UNDERSTAND
Empathy Ideate TestDefine Prototype Implement
EXPLORE DELIVER
deliver
Implement documentation mvp
To ensure correct delivery to multiple stakeholders, extensive confluence documentation was written for both UI Designers, UX Designers and Front-end Developers.
A banner builder is being built now as a Minimum Viable Product to automate all banner creation and reduce time considerably so that all Merchandise teams can generate HTML banners in minutes.
UNDERSTAND
Empathy Ideate TestDefine Prototype Implement
EXPLORE DELIVER
deliver
Implement value
— $3 increase in sales per visit for each banner over the whole website.
— Overall Brand consistency and credibility.
— Original banner production time went from 2 working days to 20 minutes.
UNDERSTAND
Empathy Ideate TestDefine Prototype Implement
EXPLORE DELIVER
Website here
UNDERSTAND
Empathy Ideate TestDefine Prototype Implement
EXPLORE DELIVER
Buying guides were a content strategy primarily used for SEO purposes. They were not optimised for usability and were difficult to create and update.
officeworks
Buying Guides
Understand
Empathy
UNDERSTAND
Empathy Ideate TestDefine Prototype Implement
EXPLORE DELIVER
customer journey
We know that most customer research journeys start online.
Awareness: Someone sees or hears about smart homes.
Consideration: The customer researches which type of smart assistant suits their needs.
Intent: The customer has almost made up their mind on a particular product.
Purchase: The customer buys a product.
Loyalty: The customer comes back to buy compatible accessories.
loyalty
purchase
Intent
consIderatIon
awareness
buyIng
guIde
Understand
Define
UNDERSTAND
Empathy Ideate TestDefine Prototype Implement
EXPLORE DELIVER
the users
the content creators
the architects
the customers
There are three main types of users in a buying guide:
— The content creators who write the guide.
— The architects who build the templates for web.
— The customers who read and engage with the guide.
The main pain points for these users are a lack of documentation and style-guides. The process of creating a guide requires a constant feedback loop with Front-end Developers. The guides aren't easily updated as customer enquires change over time.
The main pain points for these users are information architecture diagrams, technical documentation and asset maintenance.
The main pain points for these users were that the guides were hard to find organically and on-site. The guides weren't mobile responsive. They also don't answer all the questions customers might have.
explore
Ideate
UNDERSTAND
Empathy Ideate TestDefine Prototype Implement
EXPLORE DELIVER
hypothesis metrics for success
Good information architecture will assist guide creation for both developer and content creators.
I made three sections for answering these important questions: What do your users need? What do your users want? Can they use the product?
This led to a Useful Information section, a Category section and a Features and Benefits section.
— Conversion Rate uplift > 2.8%
— Avg Time on Site uplift
— Bounce rate < 5%
explore
Prototype
UNDERSTAND
Empathy Ideate TestDefine Prototype Implement
EXPLORE DELIVER
useful informationUseful information for customers who are completely new to the category and need rudimentary assistance.
The structure of the template is in three important sections relating to customer segments:
our categoriesThis section is for users who are browsing or want
features and benefitsThis section isn't trying to sell anything, it simply explains why you might want to incorporate these products into your life. It is also designed for in-store employee training.
deliver
Test
UNDERSTAND
Empathy Ideate TestDefine Prototype Implement
EXPLORE DELIVER
the results
After an A/B test comparing the new MVP buying guide with the old guide we saw:
Conversion Rate uplift: 49.6% Cart Additions uplift: 15% Bounce Rate decrease: 39.4%
deliver
Test
UNDERSTAND
Empathy Ideate TestDefine Prototype Implement
EXPLORE DELIVER
the results
After looking at the data and Hotjar Map readings, we made some important changes in the information architecture as most customer wanted to see the information in the Categories section rather than Useful Information section.
Also heavy image designs were modified to be typographic designs to reduce construction times.
deliver
Implement
UNDERSTAND
Empathy Ideate TestDefine Prototype Implement
EXPLORE DELIVER
documentation
To ensure correct delivery to multiple stakeholders, extensive confluence documentation was written for both UI Designers, UX Designers and Front-end Developers.
shop.elica.com.au
elica
Official Website Elica is a world leader in the design and manufacture of kitchen appliances for domestic use. Although their brand presence is strong in Europe, many people in Australia are unaware of who they are.
my role summary
— Facilitated strategy sessions with internal stakeholders.
— Re-design of Information Architecture.
— Create wireframes for mobile-first responsive website.
— Design and develop website and online HTML5 banners.
opportunity
There was an opportunity to utilise SEO and E-Commerce campaigns to bring awareness to Elica in Australia.
elica
Official Website
interactive map
information architecture
typographic heirarchy
Based off analytics and calls to the CFC, the next most common requests was why do you find an Elica product. So this interactive map was designed to be fun and convert online user to customers.
Previously locations were arrange by « store name » not by « suburb » alphabetically. User testing brought this to life when asking users to search for a product.
Inspired by British Typographic designer Mathew Carter, a design rule set was created for the address book.
the results value
The most popular page is now the landing page and online sales of Elica have increase 6% YoY with time-on-site up 1 minute and 30% less dropoffs.
With a new CMS, more products can be added easier and consequently Elica can showcase a larger array of products and unify the Australian market with the European.
elica
Official Website
