Stories, updates and ideas from Jellypepper

Blog

As part of our recent rebrand from Erudito → Jellypepper, we also redesigned and rebuilt our website from ground up to better reflect our mission, values and focus.

Part of the reason for this total overhaul were the case studies. While we've had success in the past publishing simple and beautiful case studies with our Prismic and Gatsby stack, but they were pretty simple. We defined our schema with a couple of fixed areas: the hero, cover photo, main content then a footer.

The problem with that approach is that the "main content" we brushed over is the heart of the case study. We wanted to showcase things like conversations, features, image galleries, brand identity styleguides and a behind-the-scenes logo process which just weren't possible with the existing setup.

We also wanted each case study to do more than talk about the designs we created, the code we wrote and the videos we made. We want them to reflect the vibe of the company — to feel properly immersive when you're reading them — without conflicting with the rest of our site.

The Jellypepper brand, while headlining a bold coral, is designed for simplicity to sit well with all of our clients brands just like we work — fitting comfortably within the client's existing architecture.

This is where Prismic Content Slices come into play. Slices are a unique feature in Prismic that allow you to define a collection of reusable ‘chunks’ of content in a special section of a content type. These slices can be added, reordered, and removed when writing your page, essentially bringing the modular design ethos to content modelling.

What this means is that we can create rich, art-directed case study pages for every client that simply wouldn’t be possible in a traditional CMS. And we can do it without coding new custom pages or resorting to a fragile WYSIWYG website builder setup.

All the content in our case studies is now composed entirely of slices. To model this in Prismic we defined a few standard fields that all case studies share, like project name, hero and thumbnail images, project URL, completion date, and brand colour (we’ll touch on this soon). The body of the case study is a slice zone, with a large library of slices for everything from simple rich text sections, to image carousels, colour palettes, user personas, website mockups, and more.

Writing a new case study is then just a matter of adding slices and arranging how we want.

Every slice we defined in Prismic has a corresponding React component in Gatsby, with the content fields in the slice mapping to props in React. This extends the modular content of our new case studies to the naturally modular design of React and Gatsby, and allows us to compose deeply rich pages.

import React from 'react';

/**
 * Image component
 * Full width image callout with caption
 * @property {string} src
 * @property {string} caption
 */
export default function Image({ src = '', caption = '', className, ...attrs }) {
  return (
    <div className={className || ''} {...attrs}>
      <img src={src} alt={caption} />
      <p>{caption}</p>
    </div>
  );
}

Make sure you serialise rich text fields with prismic-reactjs to render them in React.

Once we have our slices mapped to React components, we have to query for them in our Gatsby case study template. This is done using GraphQL fragments to fetch each slice’s data conditionally, since any case study could use any number of different slices.

Slices are available on the body field of your content type, and each has a primary (single items) and fields (repeatable items) section.

prismic {
  case_study(uid: $uid, lang: "en-us") {
    body {
      ... on PRISMIC_Case_studyBodyContent {
        primary {
          content_copy
        }
      }
      ... on PRISMIC_Case_studyBodyImage {
        primary {
          image_src
          image_caption
        }
      ... on PRISMIC_Case_studyBodyCarousel {
        fields {
          carousel_image
        }
      }
    }
  }
}

The easiest way to put together complex queries like this is with Gatsby’s bundled GraphiQL runtime, accessible at /__graphql on your development site.

With our Prismic slices, React components, and GraphQL queries all setup, we can now put together a highly dynamic, art-directed case study template. We iterate over the fields of body, and use a switch statement to conditionally render each slice in our template based on its Prismic __typename. Then it’s just a matter of passing the appropriate data fields to the matching React component.

{
  data.body.map(({ __typename, primary, fields }, i) => {
    switch (__typename) {
      case 'PRISMIC_Case_studyBodyContent':
        return <RichText render={primary.content_copy} key={i} />;
      case 'PRISMIC_Case_studyBodyImage':
        return (
          <Image
            src={primary.image_src}
            caption={primary.image_caption}
            key={i}
          />
        );
      default:
        return null;
    }
  });
}

Make sure you give each slice a unique key for React. The result is a page that renders our own custom React components with the content from our Prismic slices, in the same order they are written in our case study on Prismic.

Since slices are just React components in Gatsby, we can do some really neat things with them to further brand and differentiate our case studies.

Each of our case studies has a brand colour field in Prismic, which we use to customise the case study even further for our client’s brand. We leverage CSS Custom Properties in Gatsby to do this, falling back to our own Jellypepper brand colour.

We use React’s useEffect hook to update a --project-color CSS property once the case study has rendered. This variable is then used throughout our case study components for branding touches.

useEffect(() => {
    document.documentElement.style.setProperty(
        '--project-color': (data && data.colour) || 'var(--color-jellyepper)'
    );
}, [])

CSS Custom Properties are only supported in evergreen browsers, so make sure you either include a polyfill for IE11 or a fallback in your stylesheets.

Another way we further art direct our case studies at Jellypepper is by defining a background colour on every slice in Prismic. These background colours are then used as CSS backgrounds on sections in our Gatsby case study template, allowing us to emphasise whole sections of content on the page.

Prismic’s slices, when combined with the power of React and Gatsby, allow you to create deeply rich and dynamic content that wasn’t previously possible - the sky is the limit!

A glimpse into our case study builder that uses Prismic slices and Gatsby to create on-brand customer success stories.

How to create branded case studies with Prismic slices

Writing a brief can feel a lot like regurgitating facts to fill out a form; a routine part of birthing any project. Everyone has a different format, but all creative briefs pretty much do the same thing—they align everyone on the same vision. The success of the final product pretty much hangs on the strength of this alignment. Don’t believe it? Behold what can happen when nobody is on the same page about a chainsaw:

There are many more jokes on creative briefs, and it all stems from the fact that it’s often hard to articulate what you want in a design. In the case of a website redesign, there’s going to be a lot of hands on the pot, each wanting their own personal flavour on the sauce. What a good creative brief can do is tie objectives with design decisions together so tightly that nothing arbitrary can find its way into the final product.

The creative brief is a godly document that answers all questions before anyone even thinks them. (Just kidding, that’s impossible.)

At the very least, a creative brief can pull everyone involved into the same headspace. But first, there are essential questions your brief needs to answer before you approach a developer. It doesn’t have to be perfect, but it should provide some realistic parameters to your project. Here are the seven mysteries you need to think about:

It goes without saying that your company’s identity figures into the redesign strategy — but don’t go thinking you can get away with a bare-bones list of products and services.

The most important thing to capture is your big idea and vision. Not all design ideas can be implemented on the website, and the ones that make it past the cutting board should serve your company’s big purpose.

Twitter’s redesign, for example, made the platform easier to navigate especially for new and casual users. According to its co-founder Biz Stone, the purpose of Twitter is to “serve the public conversation,” so the design update rolled out Explore on the menu panel and advanced filters for Search. The idea is to make it easier for users to find and interact with the communities and personalities that interest them the most.

If Twitter’s redesign was for people engaged in public conversations, who is your redesign for? Whose problems are you solving? Look for that sweet spot between your company’s goals and your customer’s needs — that’s the piece you need right at the top of your brief.

Ideally, your redesign objective is not all aesthetic.

There are many botched facelifts in the world of redesign and rushing in for a new look empty of meaning will get you cursed with the same fate.

At the core of a website redesign is the objective to make the exploration experience easier for the user. Design is problem solving. In fact, only a burning pain point should power a redesign project. Without it, the money, manpower, and the three to six-month labor needed for the complex project won’t be worth it.

When Mailchimp redesigned their website, the update came with huge brand changes. The email platform has evolved into a marketing all-rounder and the old identity didn’t quite embody the new features anymore. But beyond brand consistency, they also identified an insight Mailchimp’s users are perpetual students of marketing — much like the company. Hence, Mailchimp revamped their resources and support channels, and capitalized on friendly illustrations to express accessibility.

Do you have issues with your current design or is there something you want to achieve with the redesign?

3. What should your website look and feel like?

When building a house, you don’t start with the design of your tiles or the color of your kitchen cupboards. You start with a blueprint, and from there determine what kind of tiles and cupboards would accommodate the design and use of the building.

In much the same way, a website should start with a sitemap. This is where the project begins to take shape in a tangible draft. The sitemap is a primary point of reference from which you can project a realistic budget and timeline.

Having data on how visitors navigate your site is ideal here. You’re improving the navigation of your website (on both desktop and mobile) and the findability of your content for visitors. Making it easy for them to engage with your content can boost accessibility and SEO.

But be warned: Changing your IA or information architecture too much can cause your high-ranking pages to get disconnected from search engines. This is one of the reasons some developers consider redesigns harder than building a site from scratch — they have to work with the existing IA.

Speaking of accessibility, the visual choices you make has everything to do with it. Randomness isn’t a known element of good design. For example, the World Wide Web Consortium (W3C) recommends a minimum contrast ratio of 3:1 for large texts, otherwise it would be hard to read for folks with low vision. Guidelines like this can be challenging for designers because color choices can easily fall outside a brand’s palette. To solve this very problem, the web design vanguard Stripe actually had to devise a color system for their own website.

If you’re really having trouble with the design, it could be that your company's brand isn't versatile enough. Aligning your web development with a brand update might be your best bet.

You’ve likely encountered a number of websites that looked good and felt good to navigate. This is the perfect time to comb through them and analyze their content, features, and integrations. The key is to bookmark and take notes — this will be useful when you want to describe ideas for your new website.

Note down things you dislike too, for additional perspective on which possibilities are good and which ones are off-limits.

4. What are the functionalities of your new website?

Not only is it open 24/7, your website can also handle multiple functions. But only if you will it. A good design is wasted on a website that only functions as a digital brochure. That’s why blogs for content marketing and landing pages geared for SEM and PPC are now staples in any online real estate.

When thinking of features, you have to consider your tech stack — the softwares and integrations that support and power your website’s capabilities. The more features your website has, the more complex the tech stack.

For example, we wanted branded case studies for the Jellypepper website. The idea to visually express the unique personality of each case study can’t be executed with a traditional content management system like WordPress. We needed something that allows for more flexibility with art direction. Enter the headless CMS platform Prismic, with its customisable components (a.k.a. content slices).

That’s just one idea for content management. Another is to cross-publish on Medium using canonical URLs so you don’t have to worry about duplicate content issues.

Similar considerations will need to be made for your tracking method (Google Analytics with a dash of Facebook Pixel?) and email marketing (Mailchimp or Intercom?), just to name a couple.

Redesigning is one thing, producing content for your website is another. If your website has been around for some time, you might even have a store of content ready for migration. The ones with rank must retain their positions in Google, of course.

Salvage what you can from the old website, but also consider that  you might want them to be updated. A refresh usually requires new copy and imagery. Organize these in an intuitive filing system and your developers will thank you.

Time and cost overruns are all too easy if all of the previous items aren’t discussed in realistic terms. Give your developers an idea of what they’re working with, and be prepared to make adjustments based on the expectations outlined in the brief.

Future-proofing anything tech is tricky. Nobody knows what will be in or out in the next few months — not even Google. Still, you have to try. Discussing what your plans are post-release can only bring positives to your project. If money is tight, you can dole out releases based on your budget, or your developer can create crucial adjustment space needed for future plans.

Your website redesign brief doesn’t have to be perfect, but it does need to be thorough. It also needs to carry a spark. It’s easy to fall into the beat of BAUs and fill out project briefs with cold hard facts; but sometimes it’s only the spark of a vision that can lead to something truly inspired.

A few tips to create the perfect brief for your website redesign that captures the essentials and your objectives.

The 7 questions your creative brief should answer

Sometimes, the strength of a business idea is enough to convince its founder that a name is insignificant in comparison. This thought can croak. Anyone who’s heard of Fashism, or the stories surrounding Bodega, know that deciding on a name is whatever the opposite of “easy, breezy, beautiful” is.

Every other part of a startup can be evolved, re-developed, scrapped and built over and over again after release—except for the name. It’s something you have to get right, ideally the first time. If you’re only starting out, a bad name might signal a lack of self-awareness and diligence to investors. It is the first thing you’re bound to say about your startup. On the other hand, a good name should function as a pod containing your idea, seamlessly carrying it from one conversation to another.

If it sounds hard, that’s because it is. There’s no scientific method for coming up with a good name—our own naming journey took us from Lightsaber to Erudito, before landing us on Jellypepper. So based on our own [branding experience" src="services/branding), here are some best practices for putting together a solid list and narrowing it down /to the best choice" layout="responsive" width={} height={} />

The dictionary can’t possibly have met the naming demands of the hundreds of millions of companies in the world right now. That’s why these naming conventions have been developed throughout the years:

1. Eponymous names strongly embody the vision and values of their founders. Disney is strongly associated with pioneering in the field of animation, while Armani is synonymous with red-carpet fashion.

2. Descriptive names put into words exactly what the company does. Anyone can tell what The Home Depot and Toys R Us are selling just by their names.

3. Acronymic names like KFC for Kentucky Fried Chicken are acronyms of descriptive or eponymous names. Slack actually stands for Searchable Log of All Conversation and Knowledge. That said, unless your startup’s acronym has an interesting double meaning like Slack, this naming convention is generally considered old-school and unimaginative.

4. Suggestive names use dictionary words that evoke characteristics of the brand or service. Uber means outstanding—a nod to its vision on transforming transportation. Facebook, on the other hand, is a composite while Instagram is a coined term born from fusing “instant telegram” into one word.

5. Associative names make use of words as symbols to connect a brand with certain imagery. Amazon is both the world’s largest river and the world’s largest online marketplace.

6. Non-english names are usually callbacks to a brand’s country of origin. Lego is an abbreviation of the Danish words “leg godt” which means “play well”.

7. Abstract names have no intrinsic meaning. Rolex is an onomatopoeia for the sound of a watch being wound, while Kodak is the sound a shutter makes when a camera is clicked.

8. Misspelled names attempt to add character to a common word or secure a URL. The early 2000s saw a dropped-vowel trend with brands like Flickr and Tumblr, but the most successful name in this category was founded in 1998. Google is a misspelling of “googol,” the mathematical term for the number 1 followed by a hundred zeros.

9. Location names take after any place on the map—usually the birthplace of a company. Although it’s been shortened to HSBC, the bank used to be officially known as the Hongkong and Shanghai Banking Corporation. Naming it after a country limited its reach, so it was turned it into an acronym to make the name sound universal and give it a better shot at global expansion.

You might’ve noticed that some names combine two or three conventions. Do take ideas from the list, but don’t be restricted by any particular item. If you’re still stuck, try a name generator.

Meaning and differentiation are the key ingredients at this stage of the process—what do you want your name to say about you? It’s easiest to create something descriptive, but your name should really stand for the big idea of your startup. Try dipping into suggestive and associative territories for the best results.

Associative names means thinking ahead in terms of the stories you will connect with your name. Nike is named after the Greek goddess of victory, but it took many, many campaigns to actually connect the name with sporting excellence. Nobody starts with a fully-formed brand. Years of good storytelling is required for a brand name to acquire meaning and connect emotionally with its audience. It all starts with a name that has a nice ring to it.

Step 2: Narrow it down to memorable names

The elimination process can begin once your list is complete. Though there’s a gut-feel element to naming, there are also tried-and-tested approaches to an unforgettable moniker:

Naturally, shorter names are better because they’re easier to commit to memory. But this also want to think ahead to when you’re securing a domain for your startup. The easier for it to be typed on the address bar, the better. That’s why misspelling names is a tricky branding trend. On one hand, it might be easier to secure a domain; on the other, people will misspell your name on the address bar and they might miss your startup altogether.

There’s actually a psychology to unforgettable names and it has to do with phonetics. The name should be easy to pronounce and must sound good when said out loud. Go ahead and ask friends to enunciate your startup name. If you really want to get ahead on phonetics, select an alliterative name. Coca-Cola is a good example; so is M&Ms. Alliteration and repetitive sounds can make something sound almost rhythmic and that’s a really good quality to have. Traditional oral stories have survived for so long because matching sounds link one word to the next. Circle anything with rhythm on your list.

One of the names we considered for Jellypepper, Erudito, didn’t make the cut because people could neither say nor spell it. Try your name on for size by getting other folks to say it out loud and asking them how it’s spelled. If it doesn’t come to them instinctively, crossing it out now is easier than waiting after you’ve already bought a domain. Thank you for your service, erudi.to.

Selecting based on presence and memorability is the name of the game for step two and there’s one last challenge to complete this portion: turn on your cultural sensitivity sensor. Bodega touched the wrong nerve because its name (and from that, its concept) appropriated a beloved Hispanic convention. You want to trend and be unforgettable—but not because your name provoked a salvo of 🤬 on Twitter.

Eventually becoming part of everyday language is the highest achievement a company name can attain. Just like how “google” has been entered in actual dictionaries as a verb for “searching online”. For this to even begin to happen, you have to start by gaining ownership of every touchpoint people have with your brand name:

There are online tools—our go-to is Domainr—for checking the availability of the domain name you want. Naturally, the .com should be your priority as it’s the one most associated with credibility. Your domain name is an investment, so we recommend going out of your way to acquire that .com or .co address rather than settling for alternatives. The exceptions to that rule are .io and .ai if you’re in tech. Try to resist the temptation of using an alternative extension as part of the name. Something like del.icio.us is incredibly hard to spell and explain to people. There’s also a slight SEO disadvantage to this domain hack because search engines don’t look at extensions as part of the name.

While on the subject of domains, here’s another tip: For names with multiple words, make sure it isn’t spelled anything else when the words are together. There was once an unfortunate website called I.T. Scrap that had to learn this lesson the hard way. 💩

Should you get stuck at this stage, try checking for name ideas similar to your initial one at Lean Domain Search.

Your website isn’t the only place people can access you from. They will expect you to have the same handle on social media, so it would be great to secure those online real estates as well. And while you’re already online, enter your potential name on Google Trends. This is to check if any similar name is getting hits so you can gauge what you’re up against.

It’s not over-the-top to think of securing exclusive rights to your name at the very beginning. Anything that isn’t protected by the law is fair game. The first step is to check for availability at the company registration office. It’s going to be a problem when you try to register your business only to find that there’s already something similar in the books. For trademark protection, try checking Trademarkia or the US Patent and Trademark Office if you live in the United States.

All of this is a lot of ground to cover. Startups already have their work cut out for them on the technical side of things and to add naming on top of all that is a pretty tall order. If it’s too tall, you may consider hiring an agency to do the work for you... like Jellypepper.

The power of a good name should never be underestimated. Here's our three-step guide to brainstorming the perfect business name.

What you need to know before naming your startup

Deciding to rebrand is one of the most critical decisions you can make as a business. When executed well, it can lead to exponential growth and increased brand awareness for your business. If managed poorly, it can have an enduring impact on your public perception and legacy.

How to create branded case studies with Prismic slices

The 7 questions your creative brief should answer

What you need to know before naming your startup

Rebranding Your Business: The 5-Step Strategy for Success