diff --git a/+not-found.html b/+not-found.html index 27b504a..118f230 100644 --- a/+not-found.html +++ b/+not-found.html @@ -262,5 +262,5 @@ @keyframes r-t2lo5v{0%{opacity:1;}100%{opacity:0;}}
+@font-face{font-family:ClimateCrisis;src:url(/assets/public/fonts/ClimateCrisis-Regular.e515e1791f011f494d1ba4f3c1763962.ttf?platform=web&hash=e515e1791f011f494d1ba4f3c1763962);font-display:auto}
\ No newline at end of file diff --git a/_expo/static/js/web/entry-c73b3dcb885466b4d0467d384519d178.js b/_expo/static/js/web/entry-3500adccd52dab82f5df1f082cbee46e.js similarity index 99% rename from _expo/static/js/web/entry-c73b3dcb885466b4d0467d384519d178.js rename to _expo/static/js/web/entry-3500adccd52dab82f5df1f082cbee46e.js index 2643dc0..3c85c83 100644 --- a/_expo/static/js/web/entry-c73b3dcb885466b4d0467d384519d178.js +++ b/_expo/static/js/web/entry-3500adccd52dab82f5df1f082cbee46e.js @@ -2571,8 +2571,8 @@ __d((function(g,r,i,a,m,e,d){var n=Object.defineProperties({},{"./accelerating-l __d((function(g,_r,i,a,m,_e,d){var e=_r(d[0]);Object.defineProperty(_e,"__esModule",{value:!0}),_e.default=f;var t=e(_r(d[1])),r=e(_r(d[2])),n=_r(d[3]),o=_r(d[4]),c=["components"];function p(e,t){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);t&&(n=n.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),r.push.apply(r,n)}return r}function u(e){for(var t=1;t
index.tsx
work/index.tsx
resume/index.tsx
writing/index.tsx
speaking/index.tsx
user-guide/index.tsx
speaking/[post].tsx
work/[post].tsx
writing/[post].tsx
+not-found.tsx
+@font-face{font-family:ClimateCrisis;src:url(/assets/public/fonts/ClimateCrisis-Regular.e515e1791f011f494d1ba4f3c1763962.ttf?platform=web&hash=e515e1791f011f494d1ba4f3c1763962);font-display:auto}
index.tsx
work/index.tsx
resume/index.tsx
writing/index.tsx
speaking/index.tsx
user-guide/index.tsx
speaking/[post].tsx
work/[post].tsx
writing/[post].tsx
+not-found.tsx
\ No newline at end of file diff --git a/favicon.ico b/favicon.ico deleted file mode 100644 index eca1c20..0000000 Binary files a/favicon.ico and /dev/null differ diff --git a/index.html b/index.html index 96ba24d..8a0da39 100644 --- a/index.html +++ b/index.html @@ -262,5 +262,5 @@ @keyframes r-t2lo5v{0%{opacity:1;}100%{opacity:0;}}
LB

Hi, I’m Luke

An entrepreneurial designer with experience across engineering, product, leadership, and community building.

I thrive on blending these disciplines to craft innovative solutions that enrich lives.

How? By collaborating with a highly connected and motivated team.

Want to learn more about me?

Explore these links

Writing

Exploring ideas & insights

Work

A few key projects I'm proud of

Speaking

Ideas & insights I’ve shared IRL

Résumé

My professional experience and skills

+@font-face{font-family:ClimateCrisis;src:url(/assets/public/fonts/ClimateCrisis-Regular.e515e1791f011f494d1ba4f3c1763962.ttf?platform=web&hash=e515e1791f011f494d1ba4f3c1763962);font-display:auto}
LB

Hi, I’m Luke

An entrepreneurial designer with experience across engineering, product, leadership, and community building.

I thrive on blending these disciplines to craft innovative solutions that enrich lives.

How? By collaborating with a highly connected and motivated team.

Want to learn more about me?

Explore these links

Writing

Exploring ideas & insights

Work

A few key projects I'm proud of

Speaking

Ideas & insights I’ve shared IRL

Résumé

My professional experience and skills

\ No newline at end of file diff --git a/resume.html b/resume.html index 6f2242e..a1b3bdf 100644 --- a/resume.html +++ b/resume.html @@ -262,5 +262,5 @@ @keyframes r-t2lo5v{0%{opacity:1;}100%{opacity:0;}}
LB

Luke Brooker

I’m an entrepreneurial designer experienced in design, engineering, product, leadership, and community building.

I thrive on blending disciplines to craft innovative solutionsthat enrich lives and create successful businesses.

I believe the best way to do this is in collaboration with a highly connected and motivated team.

Experitise

  • Design Leadership - I've led design teams from 2 to 13, fostering a culture of collaboration and growth.
  • Design Systems - I've built and maintained design systems for over 11 years, improving the speed and quality of design and development.
  • Product Strategy - I've worked closely with product and engineering to define and execute product strategy, ensuring alignment across the company.
  • Design Operations - I've improved design operations at each company I've worked at, ensuring the team is set up for success.

Career

High level

  • Scaled design at Go1 from Series A to Series D, improving the experience through significant growth.
  • Fostered product and product design community growth in Brisbane for over 14 years.
  • Pioneered the design system space, building, writing, and speaking about them for over 11 years, uplifting design operations at each company I've worked at.

Product of ___

Organiser & Co-founder · 2016 - Present

The goal of the Product of ___ community is to create close connections in your local product and design community, serving as a support and mentor group for product designers and product managers.

  • Joined from the inaugural meeting, becoming an organiser, guiding the future direction of the meetup, including expansion to multiple locations across Australia, the United States, and Europe.
  • Supported the planning and execution of workshops and panels.
  • Initiated the first weekly breakfast, which became the cornerstone of all Product of ___ meetups, fostering close connections and community.
  • The Brisbane group alone includes over 1500 members.

Go1

Head of Design · 2021 - 2023

  • Joined Go1's newly created Senior Leadership Team, collaborating closely with members to understand their needs and help them grasp the role of Design at Go1.
  • Grew and managed a team of 13 product designers, researchers, and a design manager across Australia, Vietnam, and France.
  • Collaborated on a new Vision and Strategy for Go1 with other executives, including the CEO and new SVP of Product, effectively communicating it across all of Go1 to ensure alignment, incorporating emerging AI technologies and accelerating our experience vision.
  • Evolved our experience vision to incorporate new acquisitions and company focus.
  • Collaborated with a new and growing data team on key success metrics, allowing Product, Engineering, and Design to align on metrics that drive customer value.
  • Implemented an improved Product Design Review that elevated the work of Design across Go1 and facilitated greater collaboration with stakeholders.
  • Supported further successful Series D funding rounds through effectively communicated presentations.

Design Manager · 2018 - 2021

  • Led the creation of an experience vision (based on foundational customer research and internal workshops) to align senior leadership on the direction of Go1.
  • Collaborated with Design Studio and Go1 Executives on a company-wide rebrand, evolving our design system and hiring and supporting a dedicated Design System Lead, ensuring a smooth transition of our product branding within a few months.
  • Collaborated closely with Microsoft on an initial integration and partnership that led to a series of additional integrations driving customer acquisition.
  • Implemented a new levels system for Product design based on company values and product principles, increasing the team's engagement score by more than 40% and enabling the promotion of multiple designers.
  • Supported successful funding rounds from Series B to Series D through effectively communicated presentations.
  • Grew and managed a team of 9 product designers across Australia and Vietnam.

Product Design Lead · 2017 - 2018

  • Responsible and accountable for all Product Design across Go1.
  • Introduced and implemented Jobs to be Done methodology, creating a common language across the company.
  • Collaborated with Head of Product to define and execute product strategy.
  • Led workshops with new partners to kickstart a new integration strategy that became core to the Go1 value proposition.
  • Led multiple projects to improve Go1's search and recommendations.
  • Designed and developed Go1's design system (Go1d), enabling all of engineering and design to adopt it within months.
  • Introduced and led new collaborative processes across product, engineering, and design.
  • Grew and managed a small team of 2 product designers.

Everydayhero

Staff Product Designer/Developer · 2016 - 2017

  • Led the redesign of fundraising page donations, increasing average donations by on mobile by over 22% and conversion rates by 10%.
  • Introduced and supported the implementation of Jobs to be done methodology, leading to key insights on how to evolve our crowdfunding product.
  • Collaborated with data, marketing, and engineering on a growth campaign leveraging data insights and behavioural psychology, increasing average fundraising amounts by over 20% on every new page created.
  • Evolved the Everydayhero brand and design language, including creating and supporting the development of a new design system, increasing our speed of delivery.
  • Collaborated on the creation of a new white-labelable design system that increased the efficiency of professional services work for our charity customers, utilising our platform APIs and delivering new charity landing pages in days instead of weeks.

Red Hat

Senior UX Designer · 2013 - 2016

  • Led design and front-end development for 2 teams: an open-source translation tool and an internal certification platform.
  • Used contextual inquiry with translators of many languages to understand workflows and bottlenecks, increasing the productivity of translators with a redesign of a translation editor.
  • Led the transition from a Java-based (JSF & GWT) front-end to a React-based one.
  • Designed and developed a design system for the translation tool, enabling increased time to delivery from design to production.
  • Led collaborative workshops with developers to create ongoing, incremental improvements.

Glo Digital

User Experience Director · 2011 - 2013

  • Led the discovery and design of all projects, including many government clients.
  • Developed style guides or style tiles for multiple clients.
  • Created many successful ongoing relationships with clients through inclusive workshops and ongoing communication to make them feel heard and achieve their results.
  • Represented the company at multiple conferences, speaking about design and front-end best practices and emerging techniques.

Citipointe Church

Web/Graphic/UX Designer · 2008 - 2012

  • Led the design and redevelopment of multiple web properties, including church, event, and charity websites.
  • Collaborated on multiple album launches, including lighting design for the live video recording, launch website, and launch materials.
  • Developed connections across the industry through Twitter, meetups, and conferences, speaking at various meetups and conferences on design and front-end.

References

Get in contact for references from a variety of amazing people I've worked with over the years.

Contact

Email me at mail@lukebrooker.com

Or find me elsewhere:

LinkedIn
@Luke Brooker
X
@lukebrooker
Github
@lukebrooker
Instagram
@lukebrooker
Dribbble
@lukebrooker
Meetup
Product of BNE
+@font-face{font-family:ClimateCrisis;src:url(/assets/public/fonts/ClimateCrisis-Regular.e515e1791f011f494d1ba4f3c1763962.ttf?platform=web&hash=e515e1791f011f494d1ba4f3c1763962);font-display:auto}
LB

Luke Brooker

I’m an entrepreneurial designer experienced in design, engineering, product, leadership, and community building.

I thrive on blending disciplines to craft innovative solutionsthat enrich lives and create successful businesses.

I believe the best way to do this is in collaboration with a highly connected and motivated team.

Experitise

  • Design Leadership - I've led design teams from 2 to 13, fostering a culture of collaboration and growth.
  • Design Systems - I've built and maintained design systems for over 11 years, improving the speed and quality of design and development.
  • Product Strategy - I've worked closely with product and engineering to define and execute product strategy, ensuring alignment across the company.
  • Design Operations - I've improved design operations at each company I've worked at, ensuring the team is set up for success.

Career

High level

  • Scaled design at Go1 from Series A to Series D, improving the experience through significant growth.
  • Fostered product and product design community growth in Brisbane for over 14 years.
  • Pioneered the design system space, building, writing, and speaking about them for over 11 years, uplifting design operations at each company I've worked at.

Product of ___

Organiser & Co-founder · 2016 - Present

The goal of the Product of ___ community is to create close connections in your local product and design community, serving as a support and mentor group for product designers and product managers.

  • Joined from the inaugural meeting, becoming an organiser, guiding the future direction of the meetup, including expansion to multiple locations across Australia, the United States, and Europe.
  • Supported the planning and execution of workshops and panels.
  • Initiated the first weekly breakfast, which became the cornerstone of all Product of ___ meetups, fostering close connections and community.
  • The Brisbane group alone includes over 1500 members.

Go1

Head of Design · 2021 - 2023

  • Joined Go1's newly created Senior Leadership Team, collaborating closely with members to understand their needs and help them grasp the role of Design at Go1.
  • Grew and managed a team of 13 product designers, researchers, and a design manager across Australia, Vietnam, and France.
  • Collaborated on a new Vision and Strategy for Go1 with other executives, including the CEO and new SVP of Product, effectively communicating it across all of Go1 to ensure alignment, incorporating emerging AI technologies and accelerating our experience vision.
  • Evolved our experience vision to incorporate new acquisitions and company focus.
  • Collaborated with a new and growing data team on key success metrics, allowing Product, Engineering, and Design to align on metrics that drive customer value.
  • Implemented an improved Product Design Review that elevated the work of Design across Go1 and facilitated greater collaboration with stakeholders.
  • Supported further successful Series D funding rounds through effectively communicated presentations.

Design Manager · 2018 - 2021

  • Led the creation of an experience vision (based on foundational customer research and internal workshops) to align senior leadership on the direction of Go1.
  • Collaborated with Design Studio and Go1 Executives on a company-wide rebrand, evolving our design system and hiring and supporting a dedicated Design System Lead, ensuring a smooth transition of our product branding within a few months.
  • Collaborated closely with Microsoft on an initial integration and partnership that led to a series of additional integrations driving customer acquisition.
  • Implemented a new levels system for Product design based on company values and product principles, increasing the team's engagement score by more than 40% and enabling the promotion of multiple designers.
  • Supported successful funding rounds from Series B to Series D through effectively communicated presentations.
  • Grew and managed a team of 9 product designers across Australia and Vietnam.

Product Design Lead · 2017 - 2018

  • Responsible and accountable for all Product Design across Go1.
  • Introduced and implemented Jobs to be Done methodology, creating a common language across the company.
  • Collaborated with Head of Product to define and execute product strategy.
  • Led workshops with new partners to kickstart a new integration strategy that became core to the Go1 value proposition.
  • Led multiple projects to improve Go1's search and recommendations.
  • Designed and developed Go1's design system (Go1d), enabling all of engineering and design to adopt it within months.
  • Introduced and led new collaborative processes across product, engineering, and design.
  • Grew and managed a small team of 2 product designers.

Everydayhero

Staff Product Designer/Developer · 2016 - 2017

  • Led the redesign of fundraising page donations, increasing average donations by on mobile by over 22% and conversion rates by 10%.
  • Introduced and supported the implementation of Jobs to be done methodology, leading to key insights on how to evolve our crowdfunding product.
  • Collaborated with data, marketing, and engineering on a growth campaign leveraging data insights and behavioural psychology, increasing average fundraising amounts by over 20% on every new page created.
  • Evolved the Everydayhero brand and design language, including creating and supporting the development of a new design system, increasing our speed of delivery.
  • Collaborated on the creation of a new white-labelable design system that increased the efficiency of professional services work for our charity customers, utilising our platform APIs and delivering new charity landing pages in days instead of weeks.

Red Hat

Senior UX Designer · 2013 - 2016

  • Led design and front-end development for 2 teams: an open-source translation tool and an internal certification platform.
  • Used contextual inquiry with translators of many languages to understand workflows and bottlenecks, increasing the productivity of translators with a redesign of a translation editor.
  • Led the transition from a Java-based (JSF & GWT) front-end to a React-based one.
  • Designed and developed a design system for the translation tool, enabling increased time to delivery from design to production.
  • Led collaborative workshops with developers to create ongoing, incremental improvements.

Glo Digital

User Experience Director · 2011 - 2013

  • Led the discovery and design of all projects, including many government clients.
  • Developed style guides or style tiles for multiple clients.
  • Created many successful ongoing relationships with clients through inclusive workshops and ongoing communication to make them feel heard and achieve their results.
  • Represented the company at multiple conferences, speaking about design and front-end best practices and emerging techniques.

Citipointe Church

Web/Graphic/UX Designer · 2008 - 2012

  • Led the design and redevelopment of multiple web properties, including church, event, and charity websites.
  • Collaborated on multiple album launches, including lighting design for the live video recording, launch website, and launch materials.
  • Developed connections across the industry through Twitter, meetups, and conferences, speaking at various meetups and conferences on design and front-end.

References

Get in contact for references from a variety of amazing people I've worked with over the years.

Contact

Email me at mail@lukebrooker.com

Or find me elsewhere:

LinkedIn
@Luke Brooker
X
@lukebrooker
Github
@lukebrooker
Instagram
@lukebrooker
Dribbble
@lukebrooker
Meetup
Product of BNE
\ No newline at end of file diff --git a/speaking.html b/speaking.html index d1d3370..f105d86 100644 --- a/speaking.html +++ b/speaking.html @@ -262,5 +262,5 @@ @keyframes r-t2lo5v{0%{opacity:1;}100%{opacity:0;}}

Speaking

Ideas & insights I’ve shared IRL

Craft as in Beer image

Published on 27 Mar 2014

Craft as in Beer

A talk about the craft of software design and development, and how it relates to beer.

Improving Your Responsive Workflow With Style Guides image

Published on 5 Feb 2013

Improving Your Responsive Workflow With Style Guides

A follow up to previous style guide talks. This time going deeper on execution.

Future Friendly Style Guides image

Published on 28 Feb 2012

Future Friendly Style Guides

A look at how we can create style guides that are future friendly, and how we can use them to create a more consistent and maintainable web.

+@font-face{font-family:ClimateCrisis;src:url(/assets/public/fonts/ClimateCrisis-Regular.e515e1791f011f494d1ba4f3c1763962.ttf?platform=web&hash=e515e1791f011f494d1ba4f3c1763962);font-display:auto}

Speaking

Ideas & insights I’ve shared IRL

Craft as in Beer image

Published on 27 Mar 2014

Craft as in Beer

A talk about the craft of software design and development, and how it relates to beer.

Improving Your Responsive Workflow With Style Guides image

Published on 5 Feb 2013

Improving Your Responsive Workflow With Style Guides

A follow up to previous style guide talks. This time going deeper on execution.

Future Friendly Style Guides image

Published on 28 Feb 2012

Future Friendly Style Guides

A look at how we can create style guides that are future friendly, and how we can use them to create a more consistent and maintainable web.

\ No newline at end of file diff --git a/speaking/[post].html b/speaking/[post].html index 96a1f9b..b34d06c 100644 --- a/speaking/[post].html +++ b/speaking/[post].html @@ -262,5 +262,5 @@ @keyframes r-t2lo5v{0%{opacity:1;}100%{opacity:0;}}
Not Found: [post]
+@font-face{font-family:ClimateCrisis;src:url(/assets/public/fonts/ClimateCrisis-Regular.e515e1791f011f494d1ba4f3c1763962.ttf?platform=web&hash=e515e1791f011f494d1ba4f3c1763962);font-display:auto}
Not Found: [post]
\ No newline at end of file diff --git a/speaking/craft-as-in-beer.html b/speaking/craft-as-in-beer.html index d45b0cb..e95072b 100644 --- a/speaking/craft-as-in-beer.html +++ b/speaking/craft-as-in-beer.html @@ -262,5 +262,5 @@ @keyframes r-t2lo5v{0%{opacity:1;}100%{opacity:0;}}

Craft as in Beer

A talk about the craft of software design and development, and how it relates to beer.

Published on 27 Mar 2014

This was another talk I gave at another Web Directions, What Do You Know in Brisbane.

Find out more in the related blog post.

View in full screen

+@font-face{font-family:ClimateCrisis;src:url(/assets/public/fonts/ClimateCrisis-Regular.e515e1791f011f494d1ba4f3c1763962.ttf?platform=web&hash=e515e1791f011f494d1ba4f3c1763962);font-display:auto}

Craft as in Beer

A talk about the craft of software design and development, and how it relates to beer.

Published on 27 Mar 2014

This was another talk I gave at another Web Directions, What Do You Know in Brisbane.

Find out more in the related blog post.

View in full screen

\ No newline at end of file diff --git a/speaking/future-friendly-style-guides.html b/speaking/future-friendly-style-guides.html index b4393ba..67dbc25 100644 --- a/speaking/future-friendly-style-guides.html +++ b/speaking/future-friendly-style-guides.html @@ -262,5 +262,5 @@ @keyframes r-t2lo5v{0%{opacity:1;}100%{opacity:0;}}

Future Friendly Style Guides

A look at how we can create style guides that are future friendly, and how we can use them to create a more consistent and maintainable web.

Published on 28 Feb 2012

I first gave this talk at Web Directions, What Do You Know.

Find out more in the related blog post.

View in full screen

+@font-face{font-family:ClimateCrisis;src:url(/assets/public/fonts/ClimateCrisis-Regular.e515e1791f011f494d1ba4f3c1763962.ttf?platform=web&hash=e515e1791f011f494d1ba4f3c1763962);font-display:auto}

Future Friendly Style Guides

A look at how we can create style guides that are future friendly, and how we can use them to create a more consistent and maintainable web.

Published on 28 Feb 2012

I first gave this talk at Web Directions, What Do You Know.

Find out more in the related blog post.

View in full screen

\ No newline at end of file diff --git a/speaking/improving-your-responsive-workflow-with-style-guides.html b/speaking/improving-your-responsive-workflow-with-style-guides.html index c748661..635974f 100644 --- a/speaking/improving-your-responsive-workflow-with-style-guides.html +++ b/speaking/improving-your-responsive-workflow-with-style-guides.html @@ -262,5 +262,5 @@ @keyframes r-t2lo5v{0%{opacity:1;}100%{opacity:0;}}

Improving Your Responsive Workflow With Style Guides

A follow up to previous style guide talks. This time going deeper on execution.

Published on 5 Feb 2013

I first gave this talk at DrupalCon Sydney in February 2013.

View in full screen

+@font-face{font-family:ClimateCrisis;src:url(/assets/public/fonts/ClimateCrisis-Regular.e515e1791f011f494d1ba4f3c1763962.ttf?platform=web&hash=e515e1791f011f494d1ba4f3c1763962);font-display:auto}

Improving Your Responsive Workflow With Style Guides

A follow up to previous style guide talks. This time going deeper on execution.

Published on 5 Feb 2013

I first gave this talk at DrupalCon Sydney in February 2013.

View in full screen

\ No newline at end of file diff --git a/user-guide.html b/user-guide.html index 91f236e..7e5605f 100644 --- a/user-guide.html +++ b/user-guide.html @@ -262,5 +262,5 @@ @keyframes r-t2lo5v{0%{opacity:1;}100%{opacity:0;}}

User Guide

How I believe I work best with others

For anyone I'm working with or about to work with, I'm excited to be working with you! I believe the strength of a team is in the unique experiences and personalities of each member. But this also means it can take a little while to learn how we can best work together.

My goal with this guide is to shortcut the time it takes us to work together well. But this is just my side of things. If you have your own guide, I'd love to read it too.

A little about me

  • I'm a Husband and Dad first. I have an incredible wife (Bekki, married 15 years), son (Orson, 9), and daughter (Dempsey, 6).
  • I live on the (North) Gold Coast, which is about 20 mins from the surf and about 40 mins to Brisbane city.

Outside of work I love

  • Making great coffee
  • Running/Hiking but have recently gotten back into the gym/weights
  • Playing or watching football (AKA soccer). I'm a Spurs/Tottenham fan #COYS
  • Watching BJJ/MMA and hoping to find the time to get back into training one day (Still just a blue belt in BJJ)
  • Fostering the product/design community in Brisbane through Product of BNE

My values

Connected teams achieve more than disconnected teams

When we're are closely connected, we better harness each other's strengths, communicate seamlessly, and pursue shared objectives with greater efficiency.

This value is closest to my heart. I truly care about every team member I work with and want them to be at their best. Creating an environment of psychological safety helps each person bring their best self to work and realise their true potential.

We do our best work when we're motivated

This embodies my belief that peak performance is fuelled by motivation. Which I believe is driven by purpose, autonomy and mastery.

I'm always looking for ways to improve each of these areas and keep motivation high in a team.

Clarity boosts teams alignment and efficiency

Clarity ensures we understand our roles, responsibilities, and objectives, cutting confusion and minimising misunderstandings. Clear communication fosters transparency and openness, empowering proactive problem-solving and collaborative decision-making.

I aim to bring clarity, so we can make informed decisions and take decisive action, boosting efficiency and productivity.

Energised teams can better overcome obstacles

When we're energised, we bring a contagious enthusiasm and determination to tackle obstacles. This positive energy fuels creativity, resilience, and a can-do attitude, enabling us to find innovative solutions and navigate difficulties effectively.

Even even trying circumstances, I aim to bring not only stability, but energy to a team to increase morale and push us towards our goals.

How I view success

What does being good at your job mean to you? What are your values that underpin your understanding of success?

How I communicate

How have other people described your communication style? What have you gotten feedback about in the past? How should others interpret what you do or say? What do you struggle to express? How do you like to stay in sync with others (email, chat, in-person)? What’s your availability outside of work hours? 

Things I do that may annoy you

What’s the cause of misunderstandings that you’ve had in the past? What are some things about your style that other people have given you critical feedback on? What quirks or mannerisms might unintentionally annoy a different personality type? 

What gains and loses my trust

What actions can a person take to gain your trust? Conversely, what triggers you? 

My strengths

What do you love to do and are good at? What can you help others with?

I'm a genuine, kind, empathetic leader with incredible knowledge and mastery in Product Design. I'm at my best when mentoring my team and recognising their successes.

My growth areas

What are your blind spots? What are you working on? What can others help you with?

What I expect from people I manage

What do you consider a stellar job for someone who reports to you? What do you consider a mediocre or bad job? What’s unique about your expectations that may differ from other managers?

How I give and receive feedback

What is your philosophy around feedback? What can others expect in receiving feedback from you? How would you prefer to receive feedback from others?

+@font-face{font-family:ClimateCrisis;src:url(/assets/public/fonts/ClimateCrisis-Regular.e515e1791f011f494d1ba4f3c1763962.ttf?platform=web&hash=e515e1791f011f494d1ba4f3c1763962);font-display:auto}

User Guide

How I believe I work best with others

For anyone I'm working with or about to work with, I'm excited to be working with you! I believe the strength of a team is in the unique experiences and personalities of each member. But this also means it can take a little while to learn how we can best work together.

My goal with this guide is to shortcut the time it takes us to work together well. But this is just my side of things. If you have your own guide, I'd love to read it too.

A little about me

  • I'm a Husband and Dad first. I have an incredible wife (Bekki, married 15 years), son (Orson, 9), and daughter (Dempsey, 6).
  • I live on the (North) Gold Coast, which is about 20 mins from the surf and about 40 mins to Brisbane city.

Outside of work I love

  • Making great coffee
  • Running/Hiking but have recently gotten back into the gym/weights
  • Playing or watching football (AKA soccer). I'm a Spurs/Tottenham fan #COYS
  • Watching BJJ/MMA and hoping to find the time to get back into training one day (Still just a blue belt in BJJ)
  • Fostering the product/design community in Brisbane through Product of BNE

My values

Connected teams achieve more than disconnected teams

When we're are closely connected, we better harness each other's strengths, communicate seamlessly, and pursue shared objectives with greater efficiency.

This value is closest to my heart. I truly care about every team member I work with and want them to be at their best. Creating an environment of psychological safety helps each person bring their best self to work and realise their true potential.

We do our best work when we're motivated

This embodies my belief that peak performance is fuelled by motivation. Which I believe is driven by purpose, autonomy and mastery.

I'm always looking for ways to improve each of these areas and keep motivation high in a team.

Clarity boosts teams alignment and efficiency

Clarity ensures we understand our roles, responsibilities, and objectives, cutting confusion and minimising misunderstandings. Clear communication fosters transparency and openness, empowering proactive problem-solving and collaborative decision-making.

I aim to bring clarity, so we can make informed decisions and take decisive action, boosting efficiency and productivity.

Energised teams can better overcome obstacles

When we're energised, we bring a contagious enthusiasm and determination to tackle obstacles. This positive energy fuels creativity, resilience, and a can-do attitude, enabling us to find innovative solutions and navigate difficulties effectively.

Even even trying circumstances, I aim to bring not only stability, but energy to a team to increase morale and push us towards our goals.

How I view success

What does being good at your job mean to you? What are your values that underpin your understanding of success?

How I communicate

How have other people described your communication style? What have you gotten feedback about in the past? How should others interpret what you do or say? What do you struggle to express? How do you like to stay in sync with others (email, chat, in-person)? What’s your availability outside of work hours? 

Things I do that may annoy you

What’s the cause of misunderstandings that you’ve had in the past? What are some things about your style that other people have given you critical feedback on? What quirks or mannerisms might unintentionally annoy a different personality type? 

What gains and loses my trust

What actions can a person take to gain your trust? Conversely, what triggers you? 

My strengths

What do you love to do and are good at? What can you help others with?

I'm a genuine, kind, empathetic leader with incredible knowledge and mastery in Product Design. I'm at my best when mentoring my team and recognising their successes.

My growth areas

What are your blind spots? What are you working on? What can others help you with?

What I expect from people I manage

What do you consider a stellar job for someone who reports to you? What do you consider a mediocre or bad job? What’s unique about your expectations that may differ from other managers?

How I give and receive feedback

What is your philosophy around feedback? What can others expect in receiving feedback from you? How would you prefer to receive feedback from others?

\ No newline at end of file diff --git a/work.html b/work.html index 4e3188d..9643b51 100644 --- a/work.html +++ b/work.html @@ -262,5 +262,5 @@ @keyframes r-t2lo5v{0%{opacity:1;}100%{opacity:0;}}

Work

A few key projects I'm proud of

Over my 15+ years of product design experience, I’ve worked on countless projects, collaborating with many talented people. Over that time I’ve grown in many different areas. I’ve chosen a few projects that highlight some of my key strengths. Especially those that have evolved more recently.

I’m happy to answer any questions or go deeper on any of these projects. Contact me at mail@lukebrooker.com.

Research · Facilitation · UI · UX

Increasing charity revenue by rethinking donations on mobile

Increasing charity revenue by rethinking donations on mobile image

I redesigned the end to end flow for how people give to fundraisers on Everydayhero. Focusing on mobile resulted in a huge jump in donations.

More work coming soon.

+@font-face{font-family:ClimateCrisis;src:url(/assets/public/fonts/ClimateCrisis-Regular.e515e1791f011f494d1ba4f3c1763962.ttf?platform=web&hash=e515e1791f011f494d1ba4f3c1763962);font-display:auto}

Work

A few key projects I'm proud of

Over my 15+ years of product design experience, I’ve worked on countless projects, collaborating with many talented people. Over that time I’ve grown in many different areas. I’ve chosen a few projects that highlight some of my key strengths. Especially those that have evolved more recently.

I’m happy to answer any questions or go deeper on any of these projects. Contact me at mail@lukebrooker.com.

Research · Facilitation · UI · UX

Increasing charity revenue by rethinking donations on mobile

Increasing charity revenue by rethinking donations on mobile image

I redesigned the end to end flow for how people give to fundraisers on Everydayhero. Focusing on mobile resulted in a huge jump in donations.

More work coming soon.

\ No newline at end of file diff --git a/work/[post].html b/work/[post].html index 476bb97..f0a808e 100644 --- a/work/[post].html +++ b/work/[post].html @@ -262,5 +262,5 @@ @keyframes r-t2lo5v{0%{opacity:1;}100%{opacity:0;}}
Not Found: [post]
+@font-face{font-family:ClimateCrisis;src:url(/assets/public/fonts/ClimateCrisis-Regular.e515e1791f011f494d1ba4f3c1763962.ttf?platform=web&hash=e515e1791f011f494d1ba4f3c1763962);font-display:auto}
Not Found: [post]
\ No newline at end of file diff --git a/work/increasing-charity-revenue-by-rethinking-donations-on-mobile.html b/work/increasing-charity-revenue-by-rethinking-donations-on-mobile.html index 025fa78..ba203ca 100644 --- a/work/increasing-charity-revenue-by-rethinking-donations-on-mobile.html +++ b/work/increasing-charity-revenue-by-rethinking-donations-on-mobile.html @@ -262,5 +262,5 @@ @keyframes r-t2lo5v{0%{opacity:1;}100%{opacity:0;}}
Increasing charity revenue by rethinking donations on mobile

Increasing charity revenue by rethinking donations on mobile

I redesigned the end to end flow for how people give to fundraisers on Everydayhero. Focusing on mobile resulted in a huge jump in donations.

Research · Facilitation · UI · UX

Everydayhero was a charity crowdfunding platform where individuals could fundraise for charities they were passionate about. Fundraisers would share their fundraising pages among friends, family, and others online to help support their campaign by donating. I was the design lead for the team working on the end to end fundraiser and donation flows.

Mobile wasn’t performing

In 2016 we discovered (through our regular data insights team reports) that our mobile donation conversions and average donations was significantly lower on mobile. Also, mobile traffic was increasing. With more people coming from social media links.

There were some obvious potential problems with the existing long donation form. But we to validate those and explore other hypotheses, we started with user testing. Since our audience was a broad range of users that usually had no prior experience with Everydayhero, we used usertesting.com for a fast turn-around.

There were some obvious potential problems with the existing long donation form. But we to validate those and explore other hypotheses, we started with user testing. Since our audience was a broad range of users that usually had no prior experience with Everydayhero, we used usertesting.com for a fast turn-around.

Collaborating in a design sprint workshop at Everydayhero

Collaborating on the problems

Now that we had a great idea of the improvement opportunities from user testing we decided to run a Design Sprint to bring in the team and other experts across support and customer success.

We played back key insights, the rest of the team added their own context, and together we landed on our top priority opportunities.

As we ideated together we aligned on some key solutions. But one area we were divided was between a single page or stepped form. Best practices were telling us that focusing on one thing at a time on mobile was the better option. But some thought it was too simple a form for this approach. This was one of the key hypotheses we decided to test.

Testing early and often

We went back to usertesting.com with 2 prototypes and key hypotheses to test. Through testing we discovered that the stepped flow was quicker to understand. It let people focus on one decision at a time, making them feel more comfortable to move forward.

Users were able to blow through some steps quickly, while other steps took a little longer to understand, and therefore they didn’t always make decisions we were optimising for. We used these results to iterate a few more times until we had a solution we were happy to move forward on executing.

Here I am explaining how we got to the final result.

Nailing the details

Through development there were still many details to work out. Since we were dealing with peoples finances, it was extra important to make them feel safe and confident that everything in the process was exceeding their expectations.

This involved working side-by-side with developers to nail interactions and with QA to ensure we covered every possible configuration of the form and how those details displayed on completion pages, fundraising pages, and receipts.

Measuring success

We were excited to see some immediate results after releasing the new donation form. And not just on mobile (although these had the biggest bump).

  • Donation completion rates were up 7%
  • Donations increased by 10%
  • Opt-in charity communications increased by 40%

These huge results validated our process and how we collaborated as a team. Allowing us to build on it for future initiatives.

Feel free to contact me (details below) for more info on this project. You can also explore more of my work or view my resume.

+@font-face{font-family:ClimateCrisis;src:url(/assets/public/fonts/ClimateCrisis-Regular.e515e1791f011f494d1ba4f3c1763962.ttf?platform=web&hash=e515e1791f011f494d1ba4f3c1763962);font-display:auto}
Increasing charity revenue by rethinking donations on mobile

Increasing charity revenue by rethinking donations on mobile

I redesigned the end to end flow for how people give to fundraisers on Everydayhero. Focusing on mobile resulted in a huge jump in donations.

Research · Facilitation · UI · UX

Everydayhero was a charity crowdfunding platform where individuals could fundraise for charities they were passionate about. Fundraisers would share their fundraising pages among friends, family, and others online to help support their campaign by donating. I was the design lead for the team working on the end to end fundraiser and donation flows.

Mobile wasn’t performing

In 2016 we discovered (through our regular data insights team reports) that our mobile donation conversions and average donations was significantly lower on mobile. Also, mobile traffic was increasing. With more people coming from social media links.

There were some obvious potential problems with the existing long donation form. But we to validate those and explore other hypotheses, we started with user testing. Since our audience was a broad range of users that usually had no prior experience with Everydayhero, we used usertesting.com for a fast turn-around.

There were some obvious potential problems with the existing long donation form. But we to validate those and explore other hypotheses, we started with user testing. Since our audience was a broad range of users that usually had no prior experience with Everydayhero, we used usertesting.com for a fast turn-around.

Collaborating in a design sprint workshop at Everydayhero

Collaborating on the problems

Now that we had a great idea of the improvement opportunities from user testing we decided to run a Design Sprint to bring in the team and other experts across support and customer success.

We played back key insights, the rest of the team added their own context, and together we landed on our top priority opportunities.

As we ideated together we aligned on some key solutions. But one area we were divided was between a single page or stepped form. Best practices were telling us that focusing on one thing at a time on mobile was the better option. But some thought it was too simple a form for this approach. This was one of the key hypotheses we decided to test.

Testing early and often

We went back to usertesting.com with 2 prototypes and key hypotheses to test. Through testing we discovered that the stepped flow was quicker to understand. It let people focus on one decision at a time, making them feel more comfortable to move forward.

Users were able to blow through some steps quickly, while other steps took a little longer to understand, and therefore they didn’t always make decisions we were optimising for. We used these results to iterate a few more times until we had a solution we were happy to move forward on executing.

Here I am explaining how we got to the final result.

Nailing the details

Through development there were still many details to work out. Since we were dealing with peoples finances, it was extra important to make them feel safe and confident that everything in the process was exceeding their expectations.

This involved working side-by-side with developers to nail interactions and with QA to ensure we covered every possible configuration of the form and how those details displayed on completion pages, fundraising pages, and receipts.

Measuring success

We were excited to see some immediate results after releasing the new donation form. And not just on mobile (although these had the biggest bump).

  • Donation completion rates were up 7%
  • Donations increased by 10%
  • Opt-in charity communications increased by 40%

These huge results validated our process and how we collaborated as a team. Allowing us to build on it for future initiatives.

Feel free to contact me (details below) for more info on this project. You can also explore more of my work or view my resume.

\ No newline at end of file diff --git a/writing.html b/writing.html index c269a2a..850791d 100644 --- a/writing.html +++ b/writing.html @@ -262,5 +262,5 @@ @keyframes r-t2lo5v{0%{opacity:1;}100%{opacity:0;}}

Writing

Exploring ideas & insights

Published on 6 Mar 2024

A Motivation Model

One of the biggest factors in determining the success of a project is the motivation of the people working on it.

Published on 29 Mar 2014

Craft as in Beer

In a sea of news, trends, frameworks, and other noise, it's important to focus on our craft.

Published on 4 Mar 2012

Future Friendly Style Guides

In a device agnostic world, our workflows need to be more adaptive.

+@font-face{font-family:ClimateCrisis;src:url(/assets/public/fonts/ClimateCrisis-Regular.e515e1791f011f494d1ba4f3c1763962.ttf?platform=web&hash=e515e1791f011f494d1ba4f3c1763962);font-display:auto}

Writing

Exploring ideas & insights

Published on 6 Mar 2024

A Motivation Model

One of the biggest factors in determining the success of a project is the motivation of the people working on it.

Published on 29 Mar 2014

Craft as in Beer

In a sea of news, trends, frameworks, and other noise, it's important to focus on our craft.

Published on 4 Mar 2012

Future Friendly Style Guides

In a device agnostic world, our workflows need to be more adaptive.

\ No newline at end of file diff --git a/writing/[post].html b/writing/[post].html index fd4611b..a5af18c 100644 --- a/writing/[post].html +++ b/writing/[post].html @@ -262,5 +262,5 @@ @keyframes r-t2lo5v{0%{opacity:1;}100%{opacity:0;}}
Not Found: [post]
+@font-face{font-family:ClimateCrisis;src:url(/assets/public/fonts/ClimateCrisis-Regular.e515e1791f011f494d1ba4f3c1763962.ttf?platform=web&hash=e515e1791f011f494d1ba4f3c1763962);font-display:auto}
Not Found: [post]
\ No newline at end of file diff --git a/writing/a-motivation-model.html b/writing/a-motivation-model.html index 23ff969..5cacb21 100644 --- a/writing/a-motivation-model.html +++ b/writing/a-motivation-model.html @@ -262,5 +262,5 @@ @keyframes r-t2lo5v{0%{opacity:1;}100%{opacity:0;}}

A Motivation Model

One of the biggest factors in determining the success of a project is the motivation of the people working on it.

Published on 6 Mar 2024

I firmly believe that motivation is the cornerstone of a team's success. Years ago, I stumbled upon Daniel Pink's motivation model outlined in his book "Drive", and it has stayed with me ever since.

Pink's model identifies three crucial pillars:

  1. Purpose
  2. Autonomy
  3. Mastery

Over the past few years, I've consistently referred back to this model to pinpoint my team's most significant needs and where my focus should lie. And it's paid off. Since adopting this approach, I've consistently enhanced team engagement scores and boosted overall motivation.

Purpose

Let's start with Purpose. It's about understanding the 'why' behind what we do. When team members have a clear sense of purpose and understand how their work contributes to a greater cause, they are naturally more motivated and driven to excel.

This understanding often begins with the broader company vision. However, I've found that to truly grasp your purpose, you need a more detailed experience vision. A classic example is AirBnb's "Project Snow White." It helps a large team grasp how they fit into the bigger picture without getting bogged down in details.

If there are significant gaps in all three areas, purpose is where I would start first.

Autonomy

Providing team members with the freedom to make decisions, take ownership of their work, and chart their own course fosters a sense of empowerment and responsibility. It's about trusting in their abilities and allowing them the space to thrive.

Once I align with team members on vision and goals, I trust them to experiment, take risks, and learn from their experiences. Granting them autonomy allows their creativity to flourish and propels their success.

Mastery

Mastery revolves around continuously improving and developing our skills. Designers are motivated when they have opportunities to learn and grow. I give my team access to training, workshops, and resources to enhance their design skills. I encourage them to set personal goals and provide feedback and recognition for their achievements.

When I first realized there was a gap in this area, it was related to ambiguity in expectations at each team member's level and how they could progress to the next. Creating a levels framework made a huge difference. It served as a tool we could use in 1:1s and performance reviews to align on expectations and set goals, allowing many on the team to successfully achieve promotions.

For me, these three pillars serve as a compass, guiding my efforts to keep my team motivated and engaged. By regularly assessing where the team's needs lie and focusing my attention on these areas, I've witnessed tangible improvements in team engagement scores and overall motivation.

+@font-face{font-family:ClimateCrisis;src:url(/assets/public/fonts/ClimateCrisis-Regular.e515e1791f011f494d1ba4f3c1763962.ttf?platform=web&hash=e515e1791f011f494d1ba4f3c1763962);font-display:auto}

A Motivation Model

One of the biggest factors in determining the success of a project is the motivation of the people working on it.

Published on 6 Mar 2024

I firmly believe that motivation is the cornerstone of a team's success. Years ago, I stumbled upon Daniel Pink's motivation model outlined in his book "Drive", and it has stayed with me ever since.

Pink's model identifies three crucial pillars:

  1. Purpose
  2. Autonomy
  3. Mastery

Over the past few years, I've consistently referred back to this model to pinpoint my team's most significant needs and where my focus should lie. And it's paid off. Since adopting this approach, I've consistently enhanced team engagement scores and boosted overall motivation.

Purpose

Let's start with Purpose. It's about understanding the 'why' behind what we do. When team members have a clear sense of purpose and understand how their work contributes to a greater cause, they are naturally more motivated and driven to excel.

This understanding often begins with the broader company vision. However, I've found that to truly grasp your purpose, you need a more detailed experience vision. A classic example is AirBnb's "Project Snow White." It helps a large team grasp how they fit into the bigger picture without getting bogged down in details.

If there are significant gaps in all three areas, purpose is where I would start first.

Autonomy

Providing team members with the freedom to make decisions, take ownership of their work, and chart their own course fosters a sense of empowerment and responsibility. It's about trusting in their abilities and allowing them the space to thrive.

Once I align with team members on vision and goals, I trust them to experiment, take risks, and learn from their experiences. Granting them autonomy allows their creativity to flourish and propels their success.

Mastery

Mastery revolves around continuously improving and developing our skills. Designers are motivated when they have opportunities to learn and grow. I give my team access to training, workshops, and resources to enhance their design skills. I encourage them to set personal goals and provide feedback and recognition for their achievements.

When I first realized there was a gap in this area, it was related to ambiguity in expectations at each team member's level and how they could progress to the next. Creating a levels framework made a huge difference. It served as a tool we could use in 1:1s and performance reviews to align on expectations and set goals, allowing many on the team to successfully achieve promotions.

For me, these three pillars serve as a compass, guiding my efforts to keep my team motivated and engaged. By regularly assessing where the team's needs lie and focusing my attention on these areas, I've witnessed tangible improvements in team engagement scores and overall motivation.

\ No newline at end of file diff --git a/writing/craft-as-in-beer.html b/writing/craft-as-in-beer.html index 887a6c0..81e7236 100644 --- a/writing/craft-as-in-beer.html +++ b/writing/craft-as-in-beer.html @@ -262,5 +262,5 @@ @keyframes r-t2lo5v{0%{opacity:1;}100%{opacity:0;}}

Craft as in Beer

In a sea of news, trends, frameworks, and other noise, it's important to focus on our craft.

Published on 29 Mar 2014

Last night I spoke at the excellent "What Do You Know" event, run by Web Directions. Since my slides are not exactly self explanatory, I thought I would post this alongside them to help those who missed the event.

I love a good beer. But not just any beer. When you taste one of these exceptional brews, you don't skull it, you savour it. For me this is usually in the form of craft beer.

According to the American Brewers Association craft beer is practically defined by:

  • Small
  • Independent
  • Traditional

I would argue that great craft breweries are actually defined by:

  • Experience
  • Quality
  • Passion

This second definition is harder to use in practice, but it's one that lends itself to the reason I love craft beer.

The other reason I like the second definition, is that it not only defines craft beer, but any craftsperson. So, when thinking of the role craftspersonship and the web, I naturally thought of sushi.

OK, maybe that's not natural. But to be specific I was thinking of Jiro Ono, arguably the worlds best sushi chef. As documented in the movie “Jiro Dreams of Sushi”, Jiro has been honing his craft for over 75 years. He cares about every single step in the life of one of his dishes, all the way back to the inception of his ingredients. It’s this care that allows him to create one of the most exceptional dining experiences available.

Bringing it back to the web, and how we design and develop for multiple devices, it constantly strikes me that many don’t take this care in their work.

So what can we learn from Jiro? The main thing that struck me about Jiro was his relentless pursuit of perfection. In this pursuit I learnt 3 things that help in design and development on the web.

Master the Simple Things

One of the first things you notice about the sushi Jiro creates, is that it is simple, not simplistic, but simple. Each plate of sushi looks simple, but the attention to detail that goes into that simple plate is astonishing. From ageing tuna for 3-10 days depending on its age, to massaging octopus for 50 minutes. To a customer, this may look look like a simple piece of tuna or octopus, but after tasting it, the quality, experience and passion put into it is evident.

It is this mastery of the simple things that we can bring to design and development. For instance do you know what attributes you should be using in your viewport meta tag? Do you know how to keep the aspect ratio of your video when it's container adapts responsively? These simple solutions can fix large usability problems I have seen again and again. Too often I see developers skipping over this small, simple stuff and coming up with complex solutions to responsive design that effectively breaks on a large percentage of devices.

I don't know about you, but because of the rate of change on the web and the team members I need to collaborate with, trying to keep this knowledge all in my head is not going to work as well for me as it does for Jiro. One way I deal with this is to keep as much of my process documented as possible. I have my own CSS guidelines, project boilerplate and I keep a library of UX research and best practices that I keep updating and referencing.

By doing this, I keep a strong foundation. When new techniques are discovered or bought to my attention I can adapt my thinking, add it to my guidelines and still have a strong foundation to base future decisions on.

Understand your Dependencies

As much as a perfectionist as Jiro is, he can't control everything in his dishes. If he was out growing and catching his ingredients he wouldn't have time to prepare the dishes he is so famous for. But he doesn't just go to the local supermarket and grab some cans of tuna. He has formed relationships with vendors at the local markets and understands every detail about the ingredients he is using.

Sometimes as web developers, we don't have the luxury to create everything from scratch or it just doesn't make sense for us to build a complex JavaScript library that someone else has already spent years of development and testing creating. But this doesn't mean we should blindly add these things to our projects.

If we want to ensure the quality and maintainability of our work, we need to understand each dependency we include. How deep this knowledge goes, depends on the potential impact of the dependency. A small, flexible library that can easily be replaced, may not need to be investigated too deeply, but a large framework that will become the foundation for your whole UI, is something you should take very seriously.

The biggest offender to this of late is Bootstrap. Not that Bootstrap itself doing something specifically wrong for what it is trying to achieve, but that developers blindly include it as a foundation for major projects is astonishing to me. Using Bootstrap usually end up with you adding it somewhere in your project and then override it until you get what you want and end up with convoluted CSS file that nobody is sure what is going so every new property gets added to the bottom with extra specificity and the eventual !IMPORTANT (typed as loudly as possible).

Besides not being maintainable, the design and development solutions included in a framework like this aren't always the best for your particular problem… but you treat it like a nail and use one of the 20 or so hammers your were given.

Don't get me wrong, I love that these frameworks are out there. As soon as a new version is out I will scour the code to see what they are doing differently. If I like something I see, I can add it back to my boilerplate or adapt my guidelines. If you want to use a framework like this, go ahead. But for me it seem like giving this control to a framework is like a brewery making beer from a home brew kit.

Extend Simple with Creative Thinking

Jiro isn't making the same sushi now as he was 50 years ago. Even though he learned from great sushi chefs that said there was nothing left they could learn, he didn't believe it and he kept pushing to improve. He does things that weren't or sometimes still aren't the norm in the sushi industry. One example that struck me, was he even adjusted the size of each dish he gave to individual customers to ensure they would all finish at the same time.

Once we have our standards on the web, we sometimes take them as fact and don't attempt to question or better them over time. Why do we use text-decoration: underline? Why are our designs 960px wide? If we didn't question best practices from time to time, we wouldn't progress the web.

A recent example is, Mikkel Bo Schmidt's re-design of the select element. Rather than accept a default select element was good enough for a device agnostic site (anyone that uses iOS will know that it isn't), Mikkel's company opted to design something specific and more user friendly to their specific problem.

Now, I am not saying we should spend a month on each individual detail of our designs, but each time we can invest a little extra time and passion into an important part of our craft, that is experience and quality that we now have for our next project. Doing a little of this at every chance we get, is what helps us become craftspeople.

+@font-face{font-family:ClimateCrisis;src:url(/assets/public/fonts/ClimateCrisis-Regular.e515e1791f011f494d1ba4f3c1763962.ttf?platform=web&hash=e515e1791f011f494d1ba4f3c1763962);font-display:auto}

Craft as in Beer

In a sea of news, trends, frameworks, and other noise, it's important to focus on our craft.

Published on 29 Mar 2014

Last night I spoke at the excellent "What Do You Know" event, run by Web Directions. Since my slides are not exactly self explanatory, I thought I would post this alongside them to help those who missed the event.

I love a good beer. But not just any beer. When you taste one of these exceptional brews, you don't skull it, you savour it. For me this is usually in the form of craft beer.

According to the American Brewers Association craft beer is practically defined by:

  • Small
  • Independent
  • Traditional

I would argue that great craft breweries are actually defined by:

  • Experience
  • Quality
  • Passion

This second definition is harder to use in practice, but it's one that lends itself to the reason I love craft beer.

The other reason I like the second definition, is that it not only defines craft beer, but any craftsperson. So, when thinking of the role craftspersonship and the web, I naturally thought of sushi.

OK, maybe that's not natural. But to be specific I was thinking of Jiro Ono, arguably the worlds best sushi chef. As documented in the movie “Jiro Dreams of Sushi”, Jiro has been honing his craft for over 75 years. He cares about every single step in the life of one of his dishes, all the way back to the inception of his ingredients. It’s this care that allows him to create one of the most exceptional dining experiences available.

Bringing it back to the web, and how we design and develop for multiple devices, it constantly strikes me that many don’t take this care in their work.

So what can we learn from Jiro? The main thing that struck me about Jiro was his relentless pursuit of perfection. In this pursuit I learnt 3 things that help in design and development on the web.

Master the Simple Things

One of the first things you notice about the sushi Jiro creates, is that it is simple, not simplistic, but simple. Each plate of sushi looks simple, but the attention to detail that goes into that simple plate is astonishing. From ageing tuna for 3-10 days depending on its age, to massaging octopus for 50 minutes. To a customer, this may look look like a simple piece of tuna or octopus, but after tasting it, the quality, experience and passion put into it is evident.

It is this mastery of the simple things that we can bring to design and development. For instance do you know what attributes you should be using in your viewport meta tag? Do you know how to keep the aspect ratio of your video when it's container adapts responsively? These simple solutions can fix large usability problems I have seen again and again. Too often I see developers skipping over this small, simple stuff and coming up with complex solutions to responsive design that effectively breaks on a large percentage of devices.

I don't know about you, but because of the rate of change on the web and the team members I need to collaborate with, trying to keep this knowledge all in my head is not going to work as well for me as it does for Jiro. One way I deal with this is to keep as much of my process documented as possible. I have my own CSS guidelines, project boilerplate and I keep a library of UX research and best practices that I keep updating and referencing.

By doing this, I keep a strong foundation. When new techniques are discovered or bought to my attention I can adapt my thinking, add it to my guidelines and still have a strong foundation to base future decisions on.

Understand your Dependencies

As much as a perfectionist as Jiro is, he can't control everything in his dishes. If he was out growing and catching his ingredients he wouldn't have time to prepare the dishes he is so famous for. But he doesn't just go to the local supermarket and grab some cans of tuna. He has formed relationships with vendors at the local markets and understands every detail about the ingredients he is using.

Sometimes as web developers, we don't have the luxury to create everything from scratch or it just doesn't make sense for us to build a complex JavaScript library that someone else has already spent years of development and testing creating. But this doesn't mean we should blindly add these things to our projects.

If we want to ensure the quality and maintainability of our work, we need to understand each dependency we include. How deep this knowledge goes, depends on the potential impact of the dependency. A small, flexible library that can easily be replaced, may not need to be investigated too deeply, but a large framework that will become the foundation for your whole UI, is something you should take very seriously.

The biggest offender to this of late is Bootstrap. Not that Bootstrap itself doing something specifically wrong for what it is trying to achieve, but that developers blindly include it as a foundation for major projects is astonishing to me. Using Bootstrap usually end up with you adding it somewhere in your project and then override it until you get what you want and end up with convoluted CSS file that nobody is sure what is going so every new property gets added to the bottom with extra specificity and the eventual !IMPORTANT (typed as loudly as possible).

Besides not being maintainable, the design and development solutions included in a framework like this aren't always the best for your particular problem… but you treat it like a nail and use one of the 20 or so hammers your were given.

Don't get me wrong, I love that these frameworks are out there. As soon as a new version is out I will scour the code to see what they are doing differently. If I like something I see, I can add it back to my boilerplate or adapt my guidelines. If you want to use a framework like this, go ahead. But for me it seem like giving this control to a framework is like a brewery making beer from a home brew kit.

Extend Simple with Creative Thinking

Jiro isn't making the same sushi now as he was 50 years ago. Even though he learned from great sushi chefs that said there was nothing left they could learn, he didn't believe it and he kept pushing to improve. He does things that weren't or sometimes still aren't the norm in the sushi industry. One example that struck me, was he even adjusted the size of each dish he gave to individual customers to ensure they would all finish at the same time.

Once we have our standards on the web, we sometimes take them as fact and don't attempt to question or better them over time. Why do we use text-decoration: underline? Why are our designs 960px wide? If we didn't question best practices from time to time, we wouldn't progress the web.

A recent example is, Mikkel Bo Schmidt's re-design of the select element. Rather than accept a default select element was good enough for a device agnostic site (anyone that uses iOS will know that it isn't), Mikkel's company opted to design something specific and more user friendly to their specific problem.

Now, I am not saying we should spend a month on each individual detail of our designs, but each time we can invest a little extra time and passion into an important part of our craft, that is experience and quality that we now have for our next project. Doing a little of this at every chance we get, is what helps us become craftspeople.

\ No newline at end of file diff --git a/writing/demystifying-unicorns.html b/writing/demystifying-unicorns.html index 65391ef..dc07622 100644 --- a/writing/demystifying-unicorns.html +++ b/writing/demystifying-unicorns.html @@ -262,5 +262,5 @@ @keyframes r-t2lo5v{0%{opacity:1;}100%{opacity:0;}}

Demystifying Unicorns

Design Unicorns. They may be less rare than you think.

Published on 23 Oct 2016

TBA

+@font-face{font-family:ClimateCrisis;src:url(/assets/public/fonts/ClimateCrisis-Regular.e515e1791f011f494d1ba4f3c1763962.ttf?platform=web&hash=e515e1791f011f494d1ba4f3c1763962);font-display:auto}

Demystifying Unicorns

Design Unicorns. They may be less rare than you think.

Published on 23 Oct 2016

TBA

\ No newline at end of file diff --git a/writing/future-friendly-style-guides.html b/writing/future-friendly-style-guides.html index 2a3a183..ba4113b 100644 --- a/writing/future-friendly-style-guides.html +++ b/writing/future-friendly-style-guides.html @@ -262,6 +262,6 @@ @keyframes r-t2lo5v{0%{opacity:1;}100%{opacity:0;}}

Future Friendly Style Guides

In a device agnostic world, our workflows need to be more adaptive.

Published on 4 Mar 2012

There has been a lot of talk of responsive design workflow, layout, sensors and more lately, especially with the recent #responsivesummit hubbub. And why wouldn't there be, with all the excitement and potential surrounding responsive design, we are now starting to see it implemented in larger businesses and across a border range of projects. So what's the problem? -OK there are many, and we are making progress, but the one I've been thinking about is… Workflow. Our current workflow doesn't seem to work... or flow. And more specifically in our workflow, how is this site going to "look/work/function/respond"? And how do we get to that quickly?

We are moving so fast

I feel like with every project I am doing things slightly differently, trying to find the most optimal way to implement a responsive design at the same time as getting client feedback/approval and communicating the vision/goals/experience of the project to the rest of the team. I have been making progress with my workflow (this talk is a very broad, top down view of some my approach, which has already slightly changed) and the main steps I see now at getting something in front of client quickly include:

  • Wire-frames - sketched only, with multiple widths.
  • First Stage Prototyping - very top level, mostly for a live feel of the layout from the wireframes, but able to be seen on many devices.
  • Style Tiles - I am open to other methods here, but this seems to be the best use of Photoshop and to get a feel of what the site should look/feel like before jumping in to "designing in the browser".

And the focus of this article…

A Style Guide

So why a style guide? I know these have been used in the past but are usually written near the end of the project, to give and overview of how everything should look. After it has been designed. Well, the best answer I have come up with, is this from Anna Debenham (Who has had some great things to say on this topic):

Websites are systems rather than pages and as soon as we stop perceiving them as that, the better.

So instead of thinking of the "system" you are building as single pages that each have a different version for each screen size, think of if more like one space that has expanding and contracting regions(header, sidebar etc), in each of these regions is where you put the building blocks(elements and components) that also expand and contract. A style guide is where you can assemble all these elements and components.

Elements, Components and Patterns.

In the past most online style guides have included the basic elements of a website. Headers, basic typography, forms and other standard html elements were part of this. We still need these but as the web becomes inherently more responsive, we are seeing a greater need for guidelines in the design of components (elements that together form it's own peice of content or functionality).

One obvious example is navigation menus. Usually formed with the new nav element and then an unordered list containing links. The way we display this has generally been in the form of a horizontal or vertical bar.

Horizontal Menu

This is what we call a design pattern, these are not new either. But recently I have noticed a greater focus on patterns, especially when it comes to mobile patterns, as these are fairly new.

Mobile Menu

So now, with responsive design, we have the same component being used but with a different design pattern depending on it's environment.

People are realising this and I think it is why we have started to see more pattern libraries and pattern collection tools. Recently Dan Cederholm released his responsive Wordpress theme "Pears", which lets you collect your own pieces of html and css for your your own pattern library. Not long before that Jeremy Keith released a simpler version of this same idea called "Pattern Primer", which is purely a php script with that compiles a folder of html files into a single page of patterns. Then you have your prototyping libraries like Foundation and Twitter Bootstrap that contain plenty of their own patterns, but also function sort of like a style guide.

Back to style guides, the two things that sparked my interest in this topic were Anna Debenham's 24 Ways article and Kyle Neath's Knyle Style Sheets. The first of which explains the many benefits of creating a style guide in our current environment and second is specification on how to document your CSS as well as a ruby gem to pass the documentation and create a "living style guide".

An Idea

All of these tools, libraries and articles cumulated in an idea. What if in the responsive design workflow, we could have a dynamic, documented style guide that can be generated from new and established patterns which could be a starting point for each project and then customised accordingly. So taking ideas from each of the tools I had seen I created Pattern Response, a project similar in structure to Jeremy Keith's Pattern Primer but with the ability to structure elements, components and patterns into folders and navigate to them easily on one generated style guide. All within a responsive layout, to make testing components at different widths possible.

Pattern Response can be used for more than just a responsive style guide to send to a client. It can be used to document all the components of a site to pass on to a developer. It can also be used to keep a library of your collected and created patterns to reference on new projects. I have even used it to include only the components a client would be able to use in their wysiwyg editor, with an example and explanation of each element and component. What ever html files you throw into the patterns folder it will generate on the page along with it's documentation and a way to navigate to it (through a menu or search).

Now I'm not saying you have to use my Pattern Response project for this (it is pretty hacked together), but for me it is the most flexible system I can use to create style guides quickly. Right, now how use it.

Using it in a responsive workflow

As a designer, if you have worked out the architecture, flow, layout and feel of the "system" you are designing, you should have an idea of how the "system" is going to function and the elements and components that will help achieve this (I usually document the components I am going to use during/after the wire-framing stage). After this stage you can load up your starter style guide, including the basic html elements used on all sites as well as components you use across all projects. You can then add custom elements for this specific site.

Once the elements are in, they can be styled using the Pattern Response page or Pattern Response can reference the css file of your existing project as you build it. If possible I try to design all the global elements and components I can in the style guide. Designers, if you can't code HTML and CSS this a good document to use to work with the developer as they implement your designs and discuss how each component will work at certain widths.

When documenting each component of in the style guide, I like to think about how each of the elements will work in a responsive environment. Using Luke Wroblewski's notes from Ethan Marcotte's recent An Event Apart talk "Rolling Up Our Responsive Sleeves" I stole his categories of width, hierarchy, density and interaction to explain how a component should react to different sensors (yes there is more than just width to think about, but it is still the major one at the moment).

Using these categories, think about how this component will react at different widths, where this component will be used in the sites heirachy (e.g. which regions will it be included in and which other components should it take precedence over?), with the components density what content can be hidden or shrunk depend on it's sensor (e.g. the images on a list of blog teasers can be hidden on small screens) and finally how the the component can be interacted with (e.g. The main menu may have drop downs that are not available when on small screens or touch devices).

Once the style guide is created and documented it can be used to show the client how each component of the site will function and appear. More importantly it is a great reference point for developers to use to see the structure of the html behind the components and how to implement them. Personally, I have placed the whole Pattern Response project folder in the root folder of the site I have been working on and named it something like "style-guide" so it is easily referenced by anyone at anytime during the project.

As is usually the case, I am not saying this is the method you should use, it's just something I have had success with and has helped in the transition from fixed to responsive sites. I'd love to get feedback if it helps anyone else or if you have other ways of doing this. Also, I'm open to input and changes to the project on github (I'm not really a php programmer). I'm sure it needs some cleaning up.

Also, here are the slides from the talk I did on this at Web Directions, What Do You Know.

+@font-face{font-family:ClimateCrisis;src:url(/assets/public/fonts/ClimateCrisis-Regular.e515e1791f011f494d1ba4f3c1763962.ttf?platform=web&hash=e515e1791f011f494d1ba4f3c1763962);font-display:auto}

Future Friendly Style Guides

In a device agnostic world, our workflows need to be more adaptive.

Published on 4 Mar 2012

There has been a lot of talk of responsive design workflow, layout, sensors and more lately, especially with the recent #responsivesummit hubbub. And why wouldn't there be, with all the excitement and potential surrounding responsive design, we are now starting to see it implemented in larger businesses and across a border range of projects. So what's the problem? +OK there are many, and we are making progress, but the one I've been thinking about is… Workflow. Our current workflow doesn't seem to work... or flow. And more specifically in our workflow, how is this site going to "look/work/function/respond"? And how do we get to that quickly?

We are moving so fast

I feel like with every project I am doing things slightly differently, trying to find the most optimal way to implement a responsive design at the same time as getting client feedback/approval and communicating the vision/goals/experience of the project to the rest of the team. I have been making progress with my workflow (this talk is a very broad, top down view of some my approach, which has already slightly changed) and the main steps I see now at getting something in front of client quickly include:

  • Wire-frames - sketched only, with multiple widths.
  • First Stage Prototyping - very top level, mostly for a live feel of the layout from the wireframes, but able to be seen on many devices.
  • Style Tiles - I am open to other methods here, but this seems to be the best use of Photoshop and to get a feel of what the site should look/feel like before jumping in to "designing in the browser".

And the focus of this article…

A Style Guide

So why a style guide? I know these have been used in the past but are usually written near the end of the project, to give and overview of how everything should look. After it has been designed. Well, the best answer I have come up with, is this from Anna Debenham (Who has had some great things to say on this topic):

Websites are systems rather than pages and as soon as we stop perceiving them as that, the better.

So instead of thinking of the "system" you are building as single pages that each have a different version for each screen size, think of if more like one space that has expanding and contracting regions(header, sidebar etc), in each of these regions is where you put the building blocks(elements and components) that also expand and contract. A style guide is where you can assemble all these elements and components.

Elements, Components and Patterns.

In the past most online style guides have included the basic elements of a website. Headers, basic typography, forms and other standard html elements were part of this. We still need these but as the web becomes inherently more responsive, we are seeing a greater need for guidelines in the design of components (elements that together form it's own peice of content or functionality).

One obvious example is navigation menus. Usually formed with the new nav element and then an unordered list containing links. The way we display this has generally been in the form of a horizontal or vertical bar.

Horizontal Menu

This is what we call a design pattern, these are not new either. But recently I have noticed a greater focus on patterns, especially when it comes to mobile patterns, as these are fairly new.

Mobile Menu

So now, with responsive design, we have the same component being used but with a different design pattern depending on it's environment.

People are realising this and I think it is why we have started to see more pattern libraries and pattern collection tools. Recently Dan Cederholm released his responsive Wordpress theme "Pears", which lets you collect your own pieces of html and css for your your own pattern library. Not long before that Jeremy Keith released a simpler version of this same idea called "Pattern Primer", which is purely a php script with that compiles a folder of html files into a single page of patterns. Then you have your prototyping libraries like Foundation and Twitter Bootstrap that contain plenty of their own patterns, but also function sort of like a style guide.

Back to style guides, the two things that sparked my interest in this topic were Anna Debenham's 24 Ways article and Kyle Neath's Knyle Style Sheets. The first of which explains the many benefits of creating a style guide in our current environment and second is specification on how to document your CSS as well as a ruby gem to pass the documentation and create a "living style guide".

An Idea

All of these tools, libraries and articles cumulated in an idea. What if in the responsive design workflow, we could have a dynamic, documented style guide that can be generated from new and established patterns which could be a starting point for each project and then customised accordingly. So taking ideas from each of the tools I had seen I created Pattern Response, a project similar in structure to Jeremy Keith's Pattern Primer but with the ability to structure elements, components and patterns into folders and navigate to them easily on one generated style guide. All within a responsive layout, to make testing components at different widths possible.

Pattern Response can be used for more than just a responsive style guide to send to a client. It can be used to document all the components of a site to pass on to a developer. It can also be used to keep a library of your collected and created patterns to reference on new projects. I have even used it to include only the components a client would be able to use in their wysiwyg editor, with an example and explanation of each element and component. What ever html files you throw into the patterns folder it will generate on the page along with it's documentation and a way to navigate to it (through a menu or search).

Now I'm not saying you have to use my Pattern Response project for this (it is pretty hacked together), but for me it is the most flexible system I can use to create style guides quickly. Right, now how use it.

Using it in a responsive workflow

As a designer, if you have worked out the architecture, flow, layout and feel of the "system" you are designing, you should have an idea of how the "system" is going to function and the elements and components that will help achieve this (I usually document the components I am going to use during/after the wire-framing stage). After this stage you can load up your starter style guide, including the basic html elements used on all sites as well as components you use across all projects. You can then add custom elements for this specific site.

Once the elements are in, they can be styled using the Pattern Response page or Pattern Response can reference the css file of your existing project as you build it. If possible I try to design all the global elements and components I can in the style guide. Designers, if you can't code HTML and CSS this a good document to use to work with the developer as they implement your designs and discuss how each component will work at certain widths.

When documenting each component of in the style guide, I like to think about how each of the elements will work in a responsive environment. Using Luke Wroblewski's notes from Ethan Marcotte's recent An Event Apart talk "Rolling Up Our Responsive Sleeves" I stole his categories of width, hierarchy, density and interaction to explain how a component should react to different sensors (yes there is more than just width to think about, but it is still the major one at the moment).

Using these categories, think about how this component will react at different widths, where this component will be used in the sites heirachy (e.g. which regions will it be included in and which other components should it take precedence over?), with the components density what content can be hidden or shrunk depend on it's sensor (e.g. the images on a list of blog teasers can be hidden on small screens) and finally how the the component can be interacted with (e.g. The main menu may have drop downs that are not available when on small screens or touch devices).

Once the style guide is created and documented it can be used to show the client how each component of the site will function and appear. More importantly it is a great reference point for developers to use to see the structure of the html behind the components and how to implement them. Personally, I have placed the whole Pattern Response project folder in the root folder of the site I have been working on and named it something like "style-guide" so it is easily referenced by anyone at anytime during the project.

As is usually the case, I am not saying this is the method you should use, it's just something I have had success with and has helped in the transition from fixed to responsive sites. I'd love to get feedback if it helps anyone else or if you have other ways of doing this. Also, I'm open to input and changes to the project on github (I'm not really a php programmer). I'm sure it needs some cleaning up.

Also, here are the slides from the talk I did on this at Web Directions, What Do You Know.

\ No newline at end of file