Case study: Building out a branding, design system and landing page for a surf company
By: Jeffrey Johnson
Tags: Case Study, Visual Design, UX, Design, Branding

Hello everyone, today we’re going to create a design system and deploy it for the purposes helping a surfing camp business get new clients on board. On board. Get it. Like, on board?

Ok, I see the jokes are not my specialty so let’s move on.

Open up Figma and join the party.

I’m creating this system in a way that you can follow along and copy what I do but pick out all your own assets and easily make it your own.

A little bit about the product.

Blue Wave Surf Co. is a lifestyle brand that offers a variety of surf related products. We are going create their branding and design system and deploy it to build them a landing page for their new 7 day surf camp in Maui, HI.

Our customers will primarily be males 16–35 who are interested in competitive surfing or at least extreme surfing enthusiasts. This is an expensive product with a low conversion rate.

Below is the final product just to give you a feel for what we’re going to be developing today.

Let’s get started, shall we!

A design system you say?

Correct. A design system is basically just a palette of well defined elements you can use globally across all the pages in a website, application, powerpoint presentation, business card, etc.

And why this design system?

Well, there’s numerous ways a design system will serve your processes but here are 4 of the core places it will bring value.

1. Brand Identity

Before you go making important design decisions it’s important to consolidate your brand identity. Logo. Colors. Typography. The visual attitude you need to strike. Imagine if some people were robbing a bank and the Green Lantern showed up but he was just wearing poorly fitted business casual attire.

They would be like “who is this guy,” and he would be like “Hi, I’m Alan Scott, I’m a railroad engineer who, after a railway crash, came into possession of a magic lantern which spoke to me and brought me great power to use to stop evildoers like you. But I’m still experimenting with different suit concepts. What do you guys think? I’m thinking maybe red and blue. But they’re so derivative. I mean Captain America, Spiderman, they’re so popular all ready. I’ll never be as cool as those guys. When do I get my own full length biopic feature film? I’m such a loser. I should have listened to my father despite his coldness and just learned to make decisions sometimes” by which point the bank robbers would have gotten away leaving Alan crying in a pool of his own professional and existential dread.

Not only would this be notable as the lamest comic ever written in the Marvel multiverse, but it also illustrates a very important albeit far too delayed point that it’s good to really create a well defined brand identity with crystal clarity upfront, this will seed all your design decisions to come.

2. Workflow Efficiency and global changes

Components can be quickly copied and pasted and changed globally so you don’t have deal with 40 pages if your client wants to make last second changes about something. Which they will.

3. Organizational Change and Scaling

Creating a library or “documenting” your designs will help preserve them and pass them on in case any of the design team members leave the organization. The larger a company becomes the more individuals or teams will work on a project and you need that uniformity and “reference point” in place.

4. Limiting Design Decisions

This one right here is my favorite. No one likes to overthink things, and we’ve all been there, when you stare at something too long. For me, I really like to strike while the iron is hot and finalize as many of my design decisions upfront. It makes the work process faster and more organized, your clients can give you the thumbs up, and frankly it’s more fun because you’ll be more creative.

It’s a little counterintuitive, but these parameters actually liberate you creatively, making your more decisive and grounded and bringing “order to the chaos.” You need themes, moodboards, and inspirations before going on your vision quest, then, and only then, will you find the falcon spirit.

Let’s start with brand identity.

Before you design anything think about who you are we as brand? Who are our customers? What demographics and culture do they represent? What needs are they seeking us to fulfill and what headspace are they in when they interact with our product and the digital marketing we create?

In this case today I’m helping a surf company called “Blue Wave Surfing Co” create a landing page for their brand to help get people to sign up for their surf camp program. Write down some ideas for yourself and join the fun.

It’s a pretty expensive program so we’re going to need to build conviction that it will help BWSC take their skills to the next level, but it’s also going to need to look hip, fun, and get them excited.

Boogie Woogie 🤙

So with all that in mind, let’s make the logo, font and color schemes for our brand.

Let me start with a quick confession, you don’t have to be a great logo designer to be a great UI designer. Needless to say, I’m still shockingly intimidated when I see the work of really good logo designers but I remind myself that for some people that’s their only job in life. Would you ask Shaquille O’Neil to shoot that last second 3 point shot?

Let’s just head over to the nounproject.com (this site is my go to! All free to use for your passion projects, so please don’t waste your time with the bait and switch of many of the other “free” icons sources on Google) just go here.

Your welcome 😎

ummmm. Let’s go with this guy.

Nice.

That was quick and easy. Do the same. Think of your own brand / client and grab a logo.

Now. Let’s change the color to something bright, aquatic and blue and add some text to our logo. I’m going to go with Futura, it’s fun, bold, and cool with the kids.

S imple. Easy. Cool.

I’m actually doing this as part of the 100 day UI challenge to Improve my UI, https://www.dailyui.co/. Futura will be a great font here because you can use it to create a lot of weight and wont have to spend as much time rounding corners and stylizing box shadows and blah blahh blah. Goal here is to demonstrate how easy and simple it is to whip something nice using limited design decisions seeded from a cohesive and thoughtful design system.

Ok. Now that we’re going to start selecting colors let’s get ahead and start our Figma file because it’s cool to be organized, just take it from MC Filing Cabinet and DJ Pizza.

So let’s go ahead and create 9 pages that will be used to contain and organize our design system and naming them as follows.

Colors Typography Buttons Icons Logos Navigation UI Elements Product Images Illustrations

Save this as a template you can use in the future. Let’s build our brand color palette.

Now, in the continued pursuit of making this as simple and easy as possible, I’m going to just grab a pre-made color palate on coolors.co

This one goes pretty good with our cool blue, beachy motif. 🏖️

Plus Aquaman really seems to like it.

Next, let’s build out the colors and fonts pages of our design system. I’m adding some dark and grayscale colors with a touch of bluish hue that we can use for text and mb just a little more weight if we need to add it to our elements.

Just name the colors after their HEX codes it’s good practice and makes developers lives easier.

Cool. That’s done. Now let’s add our text. Just copy this and save your mortal human thinking for other matters ;)

We’re going to do H1 H2 H3 H4 P1 & P2 in both medium and bold.

Heading 1–60px Heading 2–50px Heading 3- 40px Heading 4- 20px Heading 5- 16px Paragraph 1- 18px Paragraph Bold- 16px

Slap those on your text page and archive.

And since we’ve all ready created our branding let’s go ahead and throw that on our “logos” page. In this case I’m going to leave the header super basic, even though Blue Wave Surfing offers other products I don’t want to distract users who have landed here. Studies show that reducing options on or just getting rid of the nav bar all together leads to higher conversion rates.

Let’s go ahead and add the nav bar to our components library so our client has that on file to easily deploy and to new pages and make changes globally across their expansive digital empire.

And would you look at that! Ohhhh snap!

Since we worked ahead and created our component page sections waiting for us inside our Assets panel is a subcontainer filed “Navigation.”

How awesome are we right now you guys?

Selecting our Assets.

Next, we’re going to be adding our buttons, form fields, icons, content and other assets to our design library. Before doing that let’s sketch out a wireframe to get a clearer idea of what kind of components we need to include.

I like to begin this process by documenting an ordered list of the features. Before thinking about this in any visual way I map it in terms of a sales flow.

I.E. what content do I need and in what order should it be presented to craft the most compelling case and story of why the person reading it should buy the product.

Remember, we’re creating this to inspire someone to do something that will change their life not list out a bunch of product facts. That’s boring, don’t be boring. Ok.

In this case for the purposes of a brevity I created only one flow. If I was doing this for a client I would actually create and try to finalize two or even 3 for the purposes of A/B testing different sales techniques. Remember, this is good practice if and only if I test it, because my map is based off assumptions and I’m wrong sometimes. I know. Surprising

Using our map, let’s wireframe a template for our landing page feel free to scroll quickly through it.

Adding to our assets.

Cool. It’s all most time to start stylizing everything. I’m just going to run through a few more of the things that I did here and we can use them to build our own landing page.

UI Elements

We know how to add components to our pages and access them, it’s the same process for all the other pages. Let’s just quickly go over the process specifically for how to organize and store our UI Elements, because it’s a little different.

These elements are going to need to be dynamic and responsive, which means they will need to be able to adapt and conform to different sized screens. That’s where the magic of autolayout comes in. Do yourself a favor and watch some video tutorials if you haven’t seen it but the one of the main values of autolayout as it pertains to our component library is that it allows us to not have to recreate brand new UI Elements from scratch.

I recommend watching more about this because it’s easier to watch on Figma’s Youtube Channel, but let’s just do one really quick by selecting “Add Auto Layout” in the right click menu or selecting your group and holding SHIFT+A. In this case we will do it with these 3 components here (picture- header- subtext).

I’m just going to quickly show you how we can create 2 different UI elements using auto layout. 1 horizontal (for desktop) 1 vertical (for mobile).

Just take your element and autolayout the text portions first.

Then autolayout the whole group.

Then add it to your component library for the UI Elements page.

Now we can quickly turn this to a vertical element by clicking horizontal and center. (below). Which doesn’t seem that great until your working with 120 pages and your client decides to ask for them to be vertical at the last minute and you don’t have time to change them all 1 by 1 because you have a life.

Remember, there is a lot to learn about auto layout and there’s way more to it than this but I hope I explained the value.

And that’s about it.

Remember, I wanted to keep this project really lean and super simple. Didn’t even use an icon this time. Using Futura really allowed me to make a font forward stylization and gave the whole thing a very retro 1970’s editorial feel, so I didn’t need them for balancing visual hierarchy.

I got every one of my pictures from the UnsplashIt plug-in for Figma, which I highly recommend for anyone who wants to make high fidelity mockups for clients and personal projects without paying stock libraries or perusing the web all day.

And that’s about it folks. Here it is. Enjoy!

PS. Stay tuned till the end for closing notes on landing page sales technique!

Closing Notes on Landingpage Sales Strategy

I just wanted to add a few ideas about my sales flow. My H1 (The Maui 7 Day Intensive) and H2 (Ready to take your surfing to the next level? Then read on!) is designed to not beg the readers. It subtly says, “this may not be for you, but if your serious about your surfing then you should read on.” Which it totally is by the way because analytics companies have sold us data determined by countless hours of browsing habits, travel, and credit card purchases that confirm it is. So yeah.

We are going to continue by calling this the “challenge,” which in a way continues to dare the user saying “hey, you may not be up for the challenge, and if so that’s cool, your just a weakling, and that’s fine.” Which obviously, is going to motivate anyones inner hero to rise to the call to action.

Other than that I just relied on good solid pictures to get people emotionally involved and included credible testimonials and alumni stories to build trust and make it real. The goal is really to get people emotionally on board before they even think about the financial part so they’re willing to do whatever it takes to make it work.

Finally, I left out the sales packages page, but thought it would be interesting to put another email opt in with the “See Packages” button at the end. The button would be designed to take the user to the packages section with or without the email entered, but I would like to try one last push for the email so we can pitch people discounted packages or “new dates open” if they down buy within 1 or 2 weeks of visiting. If they bounced off at this point though I would design it differently.

Thanks so much for hanging. Enjoy!