[MUSIC]

Thank you.

>> [APPLAUSE] >> So

we just heard Joe talk a little bit about designing with science.

I'm gonna be talking about The Science Behind Modular Design Thinking.

And it's a little bit different in terms of the science that we're gonna be talking

about here.

But that's my Twitter, my website.

If I say something quotable, please tweet me and I'll take a look at it.

So hello, Future Insights Live.

Since I'm a rising star, I just wanted to thank Sarah Neely for

inviting me to give this talk here today.

And since I'm a rising star, you might not have seen my name or any of my work.

But I'm just going to give a little background as to me and where I've been.

So I'm currently an interface designer at Refinery29.

This is our office in New York City, I just started there in February.

And we've actually released a couple of really cool things.

Which I'm gonna show you a little of, later in the talk.

Before there, I was with a company called Say Media.

They're based in San Francisco.

And I was a visual designer for

their content management system that they call Tempest.

I will also be talking a little bit about that later.

But some notable sites that are running on Tempest right now are Biography.com,

ReadWrite.com, RachelRay.com, Fashionista.co.

And there's many more, which I'll touch on a little bit later.

Before I was working at Say Media, I was at Foot Locker.

I wasn't actually working in the retail store.

In that little 112 there, that's the entrance to their corporate office.

I worked for one of their subsidiary brands called CCS.

I was there for about three years.

And I was working as a senior web designer.

But before I was even working there, I was working for

this private SEO marketing and affiliate marketing company called creADivity.

I was there for about two years, doing landing pages and

really cranking out a lot of these sites.

And I was really grinding as a freelancer until they brought me on full time.

Even before that, I was here, this is Stony Brook University.

I actually was studying math and physics here.

So I actually have zero formal education in design.

And yet I've had this long career of doing design for all these companies.

And that's what I'm gonna talk to you guys a little bit about today.

Which is how my education in math and

physics has kind of guided me in my professional career as a designer.

And hopefully,

you can take some of the stuff that I talk about today into your own work.

Because I hear a lot of people nowadays saying that, I went to college for

one thing and now they're doing something completely different.

And they say they're not even using their degree.

I think that's not true at all.

Anything that you learn in college,

you could always apply to what whatever it is you're doing today.

So here, in this picture, this is the math and physics building.

These are the buildings that I spent most of my undergrad career at.

On the middle there is something called an Umbilic Torus.

And this was actually donated to the university by

a really rich mathematician named James Simons.

He actually runs a hedge fund company

out close to Stony Brook University called Renaissance Technologies.

And he actually uses algorithms to make predictions in the stock market.

And he's actually really rich because of that now.

And he's a really big philanthropist, so he donates a lot to the university.

And this Umbilic Torus is one of those things that he donated there.

And the thing you need to know about this object is, the university

describes it as a celebration of the fusion of mathematics and art.

And that's kind of what I'm gonna talk about today, is how I use mathematics and

physics in how I approach design and modular design.

So this is a quote that we see a lot sometimes.

And it's, design solves problems.

Wholeheartedly agree about that.

Some people may or may not agree with this statement, depending on who you talk to.

And this is something that nobody can argue with, that math and

science also solves problems.

So that's what I'm gonna talk about a little bit today.

Since math and science does solve problems, how do we apply that to our

design thinking and use that in our design thinking to also solve those problems?

I'm not trying to say you should slap a golden spiral or

use the golden ratio on anything that you use.

But I'm sure you've seen a similar diagram to this before.

When you use your science, engineering, and math thinking, and

you combine it with art and aesthetic design,

that's where you really see beautiful products start to come out.

And if we take a look at the traditional agency model that a lot of people have

been using in the past.

It's usually, you kind of develop a product, and

then at the end you kind of slap on design.

Or you go to an agency and say, here's our awesome product.

Let's work on a design, let's brand it, let's do all this other stuff.

But it usually comes after they develop the product.

And a lot of companies are now bringing design in-house.

And a lot of them usually adapt the agency model,

where they'll have an in-house team and they'll develop a product first.

And then they'll get their design team to come in later,

slap on the design afterwards.

But now we're getting these design-driven companies where they have their

in-house design team.

And the products originate with design.

They'll work on a design, and then they kinda pass it off to the development team.

They'll work on the development.

And then later on, design will come in for a little bit afterwords and make sure that

the development team actually implemented the design the way they wanted to.

Now ideally, both of these systems aren't really where you're going to get

the beautiful products coming out of.

So this is the ideal model,

companies wish they had designers who were also developers.

And they could just do everything themselves, both the development and

the design.

And that's how you'll get the amazing products.

But we all know that that's not really realistic.

So this is kind of what the realistic model is that that everybody's trying to

aim for, is to have a design team work in conjunction with the development team,

and push this product through the entire life cycle.

And get it out there with both of these teams working in perfect harmony.

So what is this kind of overlap like?

Who are these people in the organizations?

And it's really the designers who kind of know a little bit of front end dev.

They're interested in it, but they don't really do it, they do design.

And then this is also the development teams who have an eye for design.

They care about design and they're kind of interested in it,

but they're not experts in that field.

And this is kind of the area that you really wanna develop your people in.

This is a very important area, that you'll want designers interested in development

and to work with the developers who are interested in design.

And this little overlap is where you're gonna get the traction for your products.

So this is a perfect example of that, the new MacBook Pro.

It's a perfect marriage of how you could get your tech teams,

your engineering teams, to work with design.

To get all of this gadgetry,

all of this engineering stuff, crammed into this small, tiny, sleek machine.

And we can kind of use this as inspiration that we could,

this is where we're gonna get really beautiful products,

is when we get that perfect marriage of design and engineering.

So Silicon Valley is really paying attention to this.

They realize that design is really becoming important.

We even heard Jonathan Stark talk earlier today about how he uses the Domino's app,

because of the UX.

He hates the pizza, but he's using it because of the UX.

A lot of companies in Silicon Valley are realizing that design is becoming just as

important in the value of a product than just the engineering in it.

Everybody says that Moore's law is dead.

You can no longer just create

an awesome product just by stuffing a faster processor in it.

People actually are starting to care about design and user experience.

And that's really what's gonna start elevating good products to great products,

is design.

To not only have good technology, but also have good design.

So Google is actually taking note of this.

And this is why they released this spec called material design.

And they actually recently updated it last week at Google I/O.

This is actually from the old spec, but it actually represents it much better.

But if we actually take a look in the spec,

this is how they define what material design is.

They say, we challenged ourselves to create a visual language for

our users that synthesizes the classic principles of

good design with the innovation and possibility of technology and science.

So even Google realizes that they need to start combining design

with principles of science and technology, to really come up with something amazing.

But a lot of people are thinking, material design,

isn't that just another front end framework?

There are a bunch of these out there.

And it kind of is true, if you read through the spec.

It kind of is laying out a lot of things that are similar to what these front end

frameworks have tried to do in the past.

But something that you wouldn't realize is the common thing between all these

frameworks and Google material design,

is that it's really empowering developers to rapidly develop products.

And it's not really, well, I wouldn't say it's really good for designers.

Because it's kinda taking it out of their hands and saying,

all right developers, here is a really amazing front end framework.

You don't need a designer anymore.

Just use these, and just follow our rules, and you'll have a great design.

But coming from a company like Refinery29 that really values a distinct visual

character, they're not gonna acquiesce to one of these front end frameworks.

Because it's kind of just taking the character out of it.

It's just using material design to make it look like an Android product.

And a lot of companies now don't want that.

They want to define their own look and feel.

And we kind of have to look in a different way as designers to help fulfill that need

for companies to not wanna look like every other

company by using one of these front-end frameworks.

So that's where I'm going with modular design.

And it's that I've been using modular design without even going to one

of these frameworks, to help define a unique look and feel for

a website without taking away the power to developers to rapidly create new products.

So that's what I'm gonna talk a little bit about today.

And it's gonna be some of the things that I learned when I was studying

math and physics.

I've kind of use it in my design process to get to where I am now.

These are going to be some of the lesson that I learned in math and

physics, how I applied it, and how I ended up in these modular design strategies.

The first thing I am going to talk about is incubation.

This really has no direct correlation to modular design at all.

It's just something that I've kept with me from math and

physics to inspire me today in doing design.

And it's basically the idea that when you take

an intentional break from doing work that's when you're gonna

get an unconscious breakthrough in whatever it is you're working with.

And the most common example of this is Isaac Newton sitting underneath the tree.

And he's taking a break and an apple falls on his head, and

that's when he comes up with the Theory of Gravitation.

That's the commonly known one.

My favorite, my personal favorite story is that of Archimedes.

If you don't know the story, he basically is this ancient Greek philosopher, and

he was asked to figure out whether or not the king's crown is made of pure gold, but

he couldn't destroy the crown because the king definitely wanted to keep the crown.

And he was working days on end trying to figure out how he's going to

figure this out.

And his wife finally told him, just take a break, take a bath.

And when he decided to take a bath he stepped into the bath tub.

He saw the water rise and that's how he realized I

could just dump the crown into a tub of water, see how much it rose, and

calculate the density from that, and compare that to the density of gold.

And that's how I'm gonna figure out whether or

not this thing's made of pure gold without destroying the crown.

So the idea is that I do this all the time.

If I'm ever feeling creatively uninspired, I will take a break,

do something not design-related at all.

And maybe something might come to me.

I do a lot of running, and when I go out on my runs,

sometimes I come up with some awesome ideas.

So I highly encourage you guys to take breaks,

and whenever you're feeling uninspired, just take a break.

So I actually got the idea for this talk when I was taking a break.

Whenever I'm feeling uninspired I usually go to Barnes & Noble and

just take a look at the art section, or any other section and

just pick out a few books and just scan through them.

I recently bought a couple animes and

mangos just to look at the artwork through it inside.

But when I got the idea for

this talk I was actually walking through a Barnes & Nobles and I came across.

This, lego architecture set, and I thought you know this is cool,

I used to play with legos a lot when I was a little kid, so i decided to buy it.

And it's pretty cliché to talk about legos or to talk about modular design, but

this particular set is really interesting because it had this really thick book

inside, and it had a lot of these exercises that you could use.

They're based off of architecture, but they apply them to the legos.

And there's this one part in this book that had to do with modules, and

what it basically said was you should take a couple blocks, some basic blocks, and

you should use them repeatedly to design a basic structure.

And then you should go back to those blocks and replace them.

Use the same design of the box but use smaller pieces.

Then, with that, reconstruct that big structure.

When I saw this and I was reading this section on modular design in this book,

I thought this was very similar to the way I was doing work in math and physics.

The way we do proofs, the way we handle experiments.

This method is very similar.

So, you know, we start off with the little blocks; you start of with general ideas.

These are things we think we know based on our experience and

things that we've dealt with in the past.

And when we have an idea for a design we kind of in our minds try to construct

the general idea with these small general ideas.

And that's kind of like our hypothesis.

And then we go back and we refine our ideas.

We either prove them or we use experiments to verify that these ideas are actually

what we think we are, and then we use those ideas to reconstruct the big thing.

And maybe we'll come up with a discovery, maybe we won't.

Maybe we'll scrap it and then we'll try the process over again.

But this is kind of the process in which you handle modular design.

And this is kind of a process that I've adopted in the work that I've done.

So just to give an actual practical example of how this applies to

an actual proof in mathematics,

I'm just gonna go through a quick proof of the angles on theorem.

I actually really like geometric

proofs cuz they're a really good way to visualize what a proof is.

So the angle sum theorem I'm sure you learned this in grade school.

But it basically says the sum of all three angles equals 180 degrees.

So the first person who ever figured this out they kind of had an idea of all of

their math knowledge that maybe all these three angles equals 180 degrees.

So you start off with that hypothesis.

You actually start with the end goal and then you work your way backwards and

develop the smaller ideas to kind of prove that.

So, you kinda visualize the parallel line that's parallel to the side bc, and

then you realize that these two angles are actually alternate interior angles.

You fill those in, and then you realize that they're all on a straight line, so

therefore a + b + c must equal 180 degrees.

But it's all that idea you start with a hypothesis and

then you kind of explore the smaller details that make up that end goal.

And then that's how you come up with the proof and

if you don't come up with the proof you actually modify your hypothesis

then you go back and try to prove it again.

So I'm gonna talk a little bit about how that actual example manifested itself in

a project that I was working on with Tempest when I was working at Sane media.

So just to give a little background to what Tempest is, it's basically

the idea that we're building a code base and we're building a site on a code base.

And they wanted to scale that code base out,

using the same code base they wanted to Use that for other sites.

They want to use it for maybe beauty sites, fashion sites, science sites,

cooking sites, living sites, tech news sites.

But the idea was that it's one code base so

there's a lot of limitation you have in terms of design.

And this is actually

what the first site that we launched from Tempest looked like and it was XOVada.

This is a screenshot of what it looked like,

and I scanned through it really quickly, but it was basically built off of this

principle that the design itself is constructed off of a singular card type.

And all the cards are this one design.

The only thing that really differentiated the design of the cards were the photos.

So we really built the basis of the site using the photos because that's going

to really exhibit the character of the site so

when we started to scale it out to other sites.

This is is actually readwrite.com, looks exactly the same but

the photos are all techie.

It doesn't look like we decided it all because we're using tech images there.

That was kind of our MVP, our minimum viable product,

because we had to get something out there with the first version, but

we kind of went back and we looked at this card concept.

This was the one card we talked about before.

This is standard card.

We actually, later on, about one quarter later,

three months later, we went back and revisited this concept,

because all the sites started looking the same, a little bit.

The photos weren't doing enough, so we went back to the car design, and

we actually made three other different card types.

It's kinda taking that general idea and

then iterating on it, making a few other differentiations of it,

just like the Lego blocks, and then we re-implemented it back into the design.

This is a very quick process, that's all in one code-base.

This is what expand looks like right now with all the different card types.

It's a little more differentiated, and

then I'll show you a side-by-side of what it looks like with read gray.

So now, the editors have a little bit more control.

They get to choose per story what card type they're going to use and

now we have a little bit more differentiation in the design.

But it's that idea of you construct a general idea first and since this is

all modular, you go back and you make different iterations of that one module so

now you have different variations of it and

you can start differentiating the design a little bit more.

So now they have over 25 plus sites on Tempest here, just a couple of them.

Since I've left they've been iterating on the design more.

I kinda left a little bit early on in the process, so

they're still working on this currently to try and get more differentiation between

the sites without making any changes to the code base at all.

And if you wanna talk to me a little bit more about this, okay go.

A little bit into more detail about how we did this.

But just for the purpose of this example, it`s just showing that

we went from the single card and we developed the idea further down.

And had different card types and

made different designs just by doing that one little change alone.

So, that idea is to start big and then think smaller.

And that also is a trend that we see when we look at physics in like the in

the trend of discoveries over the past decade or even in the eternity of history.

Like basically in the evolution of physics they're always making discoveries that go

a little bit smaller, smaller, smaller.

You start with a big idea and

you start Looking a little bit more at the smaller ideas that make up that big idea.

So I'm gonna take a look at an example of that in the atom like they're trying

to discover within an atom, and this look at an atom in 1920 was the first

observed hadrons, these are like protons, electrons and neutrons.

I'm using a proton as an example here 40 years later, we see Partons,

which are Quarks, which are smaller, and they're actually inside of the Hadrons.

Inside of that, there are Gluons and Bosons, these are strong and weak forces.

This is even smaller than Parton.

Now, as of two years ago, they had the first discovery of the Hig's Boson,

the god particle, and this is actually a type of Boson.

So we see the trend in discoveries in physics is actually getting smaller and

smaller, just looking at the atom,

they're looking at things that are smaller and smaller.

But you know this idea is basically about the more you find out

about the smaller parts of an atom, the more you could see how it evolves and how.

They're saying that the Hig's Boson, the god particle,

could actually tell us how the entire universe was created.

This idea that the smaller you think,

you could actually create even bigger and amazing things.

Like this Hig's Boson thing could actually unlock

some ideas that we have about how our universe is created.

There are actually strategies out there,

like this is an atomic design that's been getting a lot of attraction lately,

that bases itself on the atom, which I just showed you.

And it's kind of how we can construct pieces of design,

like atoms, and this is kind of going the opposite way of the atom.

You start off with atoms, you have molecules,

which are a combination of design elements.

And then we have organisms which are slightly bigger combinations of

these molecules.

And then we have templates and this is basically a kind of strategy built off of

the idea of the atom and

how it's evolved to create things that are as big as the universe.

And this is created by Brad Frost and Dave Olsen and when I saw this I actually

realized you know this is actually a strategy that I've been using for

a really long time.

I actually use this method when I come into a new project, go onto a new site.

I kind of take a look at a site and do this site.

I kind of pick out what are the molecules of the site, or

what are the organisms of the site.

Within that, what's an atom, or what's an even smaller piece of that?

This is one of the things I did when I first came to Refinery.

I took a look at the site, and I said, these are kinda what those organisms are.

Going smaller,

this is a molecule that's actually a combination of small design elements.

Then you kinda look, oh, where else in this site did they put that?

They put that in these other little card types, and

then they put that in a collection page, which looks like the homepage, but

it's actually a different page in site.

So the idea here is like when I first came in here I kind of had that vision of like

breaking down the site seeing what are the smaller elements.

And this is actually one of the first projects that I started doing was to

actually take a look across the entire site of Refinery 29 and

see how articles were represented.

These are five different ways that they represented cards.

And we have actually begun a process of kind of unifying these styles,

you see they treat headlines a lot differently and all these other things,

but it's kind of breaking those cards down into these molecules and

making sure they're consistent.

So we are actually in the process of doing this refactoring right now where

we're gonna take things like that little author segment.

And use them and the other card types to unify that style so

our coders could use reasonable parts of their code to do other parts of the site.

So the idea there is you deduce, you learn, and then you build.

This is actually the approach that all scientists go through when they do.

When they approach either an experiment,

or something that they think to be true or a hypothesis,

is they look at the problem as a whole, they deduce it, they learn from it.

And they use that to build up new designs, or

they'll build up a new experiment to kinda prove whatever their hypothesis is.

I'm gonna go through an exercise that I did on the CMS of Tempest, and I

went through this process of establishing what are the atoms of the design.

So these are what you would consider the atoms of a design.

You have a primary font, secondary font.

Maybe a UI font, body font, and some designs for buttons,

drop-downs, inputs, and you kinda have primary or secondary color.

When you have one of these things, and

you're trying to establish pattern library, which a lot of companies do.

There is a little bit of miscommunication when it comes to giving it to developers.

They might make something crazy.

They'll put this over here, put this over there, wherever they need.

And it might create this messy, ugly kind of design.

We kind of have to go a little bit further than that.

A lot of companies make pattern libraries, but

they don't go that extra step further to kind of design a little bit more as to

what those blocks, those molecules, those organisms should be.

So we designed in a way modularly to basically to give them these

pre-constructed blocks to help our developers

quickly make new designs just by re-organizing these things.

And not having to decide for

themselves where should I put this input, where should we put this button?

Should I use the UI font inside the button, or

should I use the secondary font inside the button?

It's the way I've been designing, both in same media and also in Refinery,

in this way, is to develop these molecules and organisms for our developers.

So they could easily take blocks, more them into other places,

wherever they see fit, maybe new forms.

And this is a natural example of something that I worked with on Tempest.

This isn't the actual CMS, but

this is an exercise that I was doing before I left media.

I'm not sure whether or not they actually implemented it, but

I'll take you through it real quickly.

This is an example in the CMS of what article page would look like.

Scroll through it here, we have the body, and we have some meta data at the bottom.

So basically, these are those atoms that I initially designed for

that system, and then these are the molecules,

these are the pre-designed blocks, the organisms, and the molecules.

And I designed it in a way that you know, it's a single column and

you could easily interchange things the way you needed.

So that was just an edit article page but they could use this system to create

other sections at the back end that I might not know and

they won't have to contact me for it.

So just to show you an example they might have an idea for

this little image block to maybe add a feature for metadata there.

I don't know whether or not they actually did this, but we were talking about it,

and I wasn't sure if they actually went through with it.

But they could actually create this Edit Image Details page very easily with those

molecules that I gave them without even having to go to me and

say hey James, you know.

We're doing an Edit Image Details page.

Could you give us com for it?

They don't have to do that, because I've already designed those molecules and

those organisms, that they could easily construct this page with those things.

With that, we have efficiency and re-usability.

This is a very good advantage of modular design, is that,

whatever blocks that you do design, they're efficient and they're re-usable.

And this is actually a huge trend in science and tech.

And you can tell that this guy, he's making things very efficient and

very re-useable.

You know, with his cars making electricity efficient.

This is really like the cutting edge of science and technology now.

This is what separating really great technology from just good technology.

And I actually find this Falcon nine very impressive.

It's actually taking this concept of a rocket that they usually just let

burn up in the atmosphere and they're actually trying to save it and

land it back in a really tiny, little platform here.

This is actually a video that they actually are almost able to do this.

This is amazing science, this is like the cutting edge science and I always think,

you know, how could we take stuff like this and

apply it to our design theory and our design strategies?

So looking at that example before, those blocks, making reusable blocks,

it's making it very efficient for developers and

this is another example of how we do re-usability and efficiency.

And Rad or Bad is a new product that we actually just launched.

It was the first product that I launched when I was with Refinery29.

It was basically going off of this Tinder-like

interaction to create a really cool experience within our articles.

So we originally designed this for a client.

And this an article page on Refinery 29.

And [INAUDIBLE] get the video to play here.

So within this article we designed this little module

that they could drop in and it's called Rad or Bad.

They basically take a look at the images, and they say you know, yes I like this,

no I don't like this image, yes I like this image, no I don't like this image and

it gives them results.

So that's the music festival that you should go to based on the images that you

like, and this was constructed in the modular way that editors could decide,

oh, I want to make quiz and they could just use this embeddable object and

drop it into their story.

These are just some examples of other Rad or Bads that they've

constructed since then, and the idea was that we just constructed this one module,

and editors can now use this in any article that they publish.

We've seen awesome things with this, because it's a really reusable thing, and

it's a scalable thing.

We originally designed it for our client to help sell products cuz

we actually originally designed this not to get results like this.

They were to get results for a product and then click out to shop, but

we went back and we remodeled the module to be more generic so we could use it for

stuff like What mad men character are you?

What movie are you?

What brunch item should you get?

This is really fascinating, because we originally designed it for one idea, but

because it was modular, and we made it scalable and efficient.

Editors were coming up with these other ideas, like,

we don't want to push products, maybe we want to let them read another article, so

let's give them another result for an article.

Maybe you want to give them a result to eat at this place, so

let's link them out to Yelp or something.

The original concept was to have it shared to Facebook, but

we are currently developing this end-slate to do other things,

like send people to eat somewhere, to a restaurant, or

maybe purchase a shoe at a shop and make revenue off of that.

Since we launched, we launched this about two months ago, and right now,

we have 45 of them live.

Then we have 2,100,050 swipes.

This is amazing.

It's only been live for

not even two months, and we had crazy interaction on this thing, and

it's because It was a modular concept, we originally designed it for one thing.

Now it's out there for

45 different things, and it's driving all of this crazy engagement.

This is like an idea you should use as, what designs can be reused?

Then, maybe, you won't touch it later on, but somebody else is going to take it, and

let it evolve into something that's gonna grow,

and maybe drive some crazy engagement, crazy interactions.

And that's what happened with Rad or Bad.

So, that brings me to my next point, which is to plan for the unknown.

And this is kinda what modular design allows you to do.

When you design a module, you never know how people are gonna use it.

We saw people use Rad or Bad in crazy ways, and gave us new ideas.

[INAUDIBLE] And we revisited that concept, and

we were scaling it right now to do other things.

And we didn't know that when we originally designed it.

But because we were in this modular construct, and we made it scalable,

efficient, and reusable, things happened.

So, this is very common in math and science, you know?

When I was doing math and physics, I had a friend with me and

he's actually still doing it he's about to get his PhD.

And we usually get a cup of coffee once a week.

And he tells me he's working on his thesis, he's been working on it for

the past four years.

And his professor basically tells him that he should be publishing little bits and

pieces of his work into journals and stuff like that, and

he actually publishes about three or four papers to journals a year.

It's all because of this idea that,

you never know what piece of your work could be picked up and used by

another scientist to help them solve whatever it is that they're working on.

And this is kinda the concept that I use when I do modular design,

is I design modules to be scalable and I don't know when a developer is gonna take

one of those modules and use it for something else.

I had no idea that he may have used it in, and

this is also kind of an idea that I got when I was at Stonybrook.

This is how Metcalf,

he invited me when I was in my junior year to join his research group.

It was a wave and optics research group.

And it was basically a combination of undergrads, grads, and professors.

And they basically got together every Friday.

They got in a inner room and sat around a circular table and

they each went around describing whatever it was that they were working on.

Maybe it was in the early stages or not even complete yet, or

maybe they're very close to figuring out that last piece to get their thesis done.

And they went around the circle, all their projects are completely unrelated.

One person would be working on something with waves and optics,

somebody else would be working with nuclear atoms, or I don't know.

They were completely unrelated.

But they shared the strategies that they use in their research with each other, and

ask for ideas from other people.

And sometimes, out of those round table conversations,

you get somebody who's doing work on something completely different.

Say, hey, you know?

I was working on this piece for my experiment.

Maybe you could use this process for yours.

Believe it or not,

they actually unlocked some really cool things for these students.

And maybe made them think about things in a different way,

and it's the idea that you never know whatever it is you're working on,

could be used for somebody elses work.

That's kind of the advantage of working modular.

Is that when you design modules, you never know how they're going to be used.

They could be used to solve something else maybe, or working on CMS.

Maybe this module he designed could work on the front end for

a page you never even thought about.

That's the way you should design, is that you should plan for the unknown,

because you never know how it's going to be used.

So, [COUGH] I just want to show two examples of all of

these ideas coming together.

And actually, all came together very recently on these two projects

that I worked on for Refinery29.

And they're called Forever Forward and Her Brain On Digital.

So Forever Forward is basically this event that was held in New York.

It's basically for all of the big companies like Hulu, AOL, Yahoo.

Once a year they basically have a huge,

each company has their own huge event to basically show off to advertisers,

here's our upcoming video programming so you should buy ads into it.

So we had this huge event and they didn't realize until pretty much a week before

the event, that they needed a crazy, awesome HTML 5 landing page for

it, and they asked me if I could take a look at it.

So I basically said yeah I could do this because I'm gonna be using my

modular design approach, and I basically designed this page for them and.

I actually did it within two days because I was using this modular design.

This modular design and principle so that's occasionally was actually

responsive, and it only took me two days because I was basically using this idea

of this ideas that I'd be talking to you guys about today.

That's just an example of the website,

and it's basically built off of these three modules.

There's a hero, there's this one-column design,

and then there's two-column design.

It actually didn't matter whatever it was that I was stuffing into it.

I could choose different images, different text, I could easily swap the fonts out.

That design is based on these three modules.

All I had to do was design these three modules, and boom, I got this site, and

I did it within two days.

The next thing was HerBrain on Digital.

This actually isn't a picture from the event last year,

this is actually going on currently in San Francisco right now.

They're throwing a huge even at the office, and

this was another one of those things where they came to me,

and like two weeks before the event saying we need a splash page for this event.

So I did that within a week, I did this, I was working on this project last week I

literally started it last Tuesday and I finished it Friday before I came here.

And I did this entire interactive site based on this modular principles within

four or five days, and I didn't use a front-end framework, and

these modules could be easily iterated.

I actually finished design around Wednesday or Thursday,

and we got together at stakeholders, and they had a lot of feedback.

I actually went down into each of these modules, and

I worked on the idea further down, and the little interactions with the circle,

the bar graphs, and everything like that.

This site, I think they actually made it go live yesterday,

it's on herbrain.digital.com.

Yeah, it was basically built with all these principles that I'm talking

to you right now.

These were actually the modules that I designed.

There's a hero module, a chaptering module, photo module, two column set and

one column set.

I did this within a week.

So if you think about that, I was able to do that within a week.

If you're able to construct these types of systems and iterate on them.

And they say design is never done.

And you work on these and maybe make multiple modules.

Maybe it's not even a single column, maybe you could implement it with a grid system.

And you could make, you know, side-by-side modules.

And if you have a year, maybe you could develop a really organic

system that's just as good as material design, but just using your own modules.

And as designers that's something that people really look for.

How do you separate yourself from material design?

How do you not become a designer for material design, but

you become a designer for our company and our brand?

So just to recap these are those five principles of modular design.

And that's number one to use incubation for inspiration, two start big,

then focus on smaller ideas.

Three always deduce, then learn from it, then build, based on all that knowledge.

And so always think about for efficiency and reusability.

And the fifth one is when you're designing these modules, always plan for

the unknown, cuz you could never know where these things go, and

that's all I have for you so thank you.

>> [APPLAUSE].

[MUSIC].