Early branding for early startups
Guidelines to co-create design standards to boost a seed-stage product’s success.
Designing any product’s brand is no easy process. Simple in theory, hard to execute, and challenging to implement uniformly. And yet, it is one of the most important considerations to keep in mind when launching any new product to market.
Where to start?
As a creative and product designer with experience working in-house and as a contractor for seed-stage companies, agile teams, and lean startups, one of the first things I ask leaders and design teams alike: How do you feel about the startup’s visual brand and design guidelines?
Some clients tend to pause and then share that they have a logo but are unsure what else they need. Some proudly share the colors they most use or like within their team. While others are unfamiliar with what visual brands or design systems are altogether. While there is no right or wrong approach, whatever your current approach is it is often reflective of the companies’ values and design budgets — all of which come into play when creating a brand from scratch.
As Tom Suiter, former Director of Creative Services at Apple Computers, and co-founder of Enjoy reminds us: “When you are a startup you’ve got to have a good story, you’ve gotta tell people what you stand for (…) being a startup is about getting your story straight and telling it in a compelling way.”
So like any change or improvement of current processes, over the years I have gathered it is best to start iteratively and through an incremental approach discover the best solution for each project.
Therefore the standards outlined below are envisioned as guidelines to help designers, startup leaders, and clients co-create a product visual brand while simultaneously building a strong design foundation. Let’s get started!
Name
It all starts with selecting a name. Next, choose a flexible slogan that can both present the immediate value proposition and the long-term vision of your company’s product.
As you embark on this process, doing quick searches or URL comparisons (with some market analysis filters) can be beneficial to check competitors and similarly-named products during this naming stage. As you narrow the top naming options, you will encounter and flag already-existing companies right away and get closer to a unique naming that makes sense for your product.
Many founders and creatives have overcome some of the obstacles in choosing naming conventions by following some or a combination of the following strategies: Start searching on the app store or Google Search for broad results and survey of industry keywords as a first gauge to see how the hypothetical name appears in search results. Being creative with the domain selection with URLs that include ‘.io’ ‘.co’ or simply a full word that’s relevant to the business. Another strategy when the naming is too conventional is adding words beforehand like ‘we are’, ‘with,’ or ‘get,’ or afterward like ‘lab’, ‘company,’ or ‘app.’ like some of the following examples: withuddle, browsercompany, and getmatterapp.
During this first step, you can create a strategic nomenclature to withstand comparisons and stand out as the unique product you aspire to create.
Typography
Compelling and legible typography across the logo, the main header, body, and footer fonts are essential. As easy as it might sound to implement the first cool-looking font across your website, this area is particularly challenging because it needs to be readable and communicate to your audience what the company is hoping to offer them. As you define such foundations across the type ramp hierarchy of one or various fonts (with respective headers, sub-headers, and bodies) it’s time to start thinking of a wordmark and a logomark as key components to cross-reference in how the type puzzle comes together.
Industry and custom sources are wide-ranging, yet common foundries like Google Fonts and Adobe Fonts are easy to use and have a wide array of accessible (and affordable!) typographies. For further inspiration, fonts in context and more bespoke applications can be found with foundries like Grilli Type, Colophon Foundry and Typewolf, as these can be of great help to find inspiration and get unstuck even if you aren’t going to use them.
Visual Design
Thanks to a compelling visual design the product’s voice and the image will shine. If you pay close attention to how the product comes across through marketing websites, digital and physical collaterals, social media channels, and newsletters you can build trust with existing and new users to achieve a higher degree of retention and conversion metrics.
The first step is to review design consultancies like Pentagram, This is Collins, and Sagmeister & Walsh to establish a foundation on how to better understand where the brand’s sensibility lies and use it as a launching point to move forward. Next, you can check established brands we all know of and interact with, like Airbnb, Apple, MoMa, Headspace, or the New York Times. While doing so, take a closer look at how their product is presented across apps and marketing channels to get a sense of how a product behaves when engaged by millions of users in the wild.
Last, it can be beneficial to see contemporary examples from studios like Earthrise Studio, Porto Rocha, Franklin Till, or individuals like Jack Butcher, Pawel Norbert, and Pablo Rochat for further inspiration and experimentation.
Color Palette
Take a look at your brand’s color palette and complementary tones to continue bringing cohesiveness and innovation to the product. Instead of referring to screenshots, old records, and examples in CMYK or RGB, grab the HEX colors to use the same swatches across different software, communicate with developers, and be consistent across social media channels.
Tools like Coolors and ColorHunt can be of great help to ease the selection process as you present to colleagues, stakeholders, and leadership, while simultaneously helping you envision the entire color swatches all at once.
Accessibility
Alongside the typography selection, visual design, and color palette, the next step is to bring all these elements together through component-based design ready for design development and marketing use cases. During this practice, referring to accessibility and usability reviews ensures that any asset and its corresponding color choices adhere to WCAG (Web Content Accessibility Guidelines) standards for users accessing the product and website.
This important step can be aided with tools like Web Accessibility in Mind’s Contrast Checker or plug-ins like Figma’s A11y Color Contrast Checker which can be handy to ensure compliance, readability, and meeting a minimal standard of accessibility for your product.
Iconography
A product’s iconography is a keyspace where the product’s name, typography, visual design colors, and accessibility come together to demonstrate that your brand is creative and innovative. Libraries like Noun Project can be helpful to get a glance of the aesthetic directions your brand can take, while directly having access to work with templates by talented illustrators. When it comes to design implementations for iterative work and design implementations, Figma Plug-ins like Heroicons or Simple Icons with SVG files at great for components-based design and scaling your design systems.
To highlight a brand’s savviness, many products choose varied strategies for their app icon. Some choose to incorporate their entire name within the branded logomark, like Lyft and Hulu. Some abbreviate their name to just the first letter and do not showcase any extra wording, with examples like Hinge and Eventbrite. While others simply have an illustration like Google Maps and Twitter. Repositories like Mobbin Design can serve as a glance of industry comparisons and standards across patterns like onboardings, check-outs, feeds, and more.
Photography
Investing in a product’s photography assets from the beginning often pays positive dividends. Similar to planning a company’s domain purchase and logistics, figuring out email hosting services, and registering an LLC, you should plan out and execute the photography that you will display on the landing page, the pitch deck, and social media as early as possible.
As you create a cohesive color palette, remember to choose a diverse range of skin colors, and intentional demographics to ensure well-thought (and received!) results in any small or big campaign.
Additionally, during this early stage, you can look to hire interdisciplinary individuals, visual artists, and design-oriented peers that are also being entrepreneurial in their practices to ensure you co-create the best possible work at a reasonable budget, especially given you will likely be changing these assets every 6–12 months.
Repositories like Adobe Stock can also be a valuable source to select assets to incorporate into the user experience both in print and digital media across the product.
Content
Similar to the holistic approach required when creating a graphic design language, last, bespoke content (and its creation) has increasingly become more important for a product’s success when creating any go-to-market launch. As this area of the product ecosystem often remains in the hands of marketers, sales groups, and social media experts, it’s key to address the importance of alignment between product & marketing to build the right type of design assets for audience growth and support for customer acquisition.
As Andrea Bosoni shares “content marketing is still the best way to grow a startup (…) Ideally, you should start working on it 6–12 months before launch.”
This in turn, kindly remind us that while we might aspire to write an entire book from start to finish in a cabin in the woods (and then hope it sells!) — it will probably be best to write a chapter, share it with others, and get feedback first, and repeat all over again as you go. All while developing an iterative release process in conjunction with users to create your next big book (aka product!).
At last, the content category is a reminder that in competitive markets, existing and future users can find themselves in a unique position of choice. Today, users can expect to find content in the social platforms they are already engaging with, so therefore new products have the challenge to appear in this space while simultaneously providing value and incentives (and sometimes even community!).
Some examples of products that are taking content creation seriously include Hello Playbook (on TikTok), Somewhere Good (on Twitter), and O-p-e-n (on Instagram) to name a few.
Design from end-to-end
As leaders, designers, and staff members complete the brand identity foundations, it is important to continue practicing consistency in the implementation of the product’s brand. This often can look like following through with quality assurance and quality control when practicing design development handoff, as well as when onboarding any new members, consultants, and media partners that will be using your brand assets by sharing the brand guidelines.
As digital creative Marissa Scipione reminds us, “candidly this a challenge for most startups because while marketers will remind us ‘everyone owns the brand!’ in the startup-world it rings even more true — everyone does own the brand because everyone is wearing multiple hats.”
Designers understand designs touch everything in their day-to-day, yet as organizations organize and scale, designing a product brand becomes the vehicle to blend user needs with business goals to build successful products that help users achieve their fullest potential.
At last, it can be expected that by implementing some, many, or all of the highlighted steps in creating a product’s visual brand from scratch you can value the importance of starting preemptively, creating standards, and staying consistent as it will go a long way to make a unique first impression.
Acknowledgments
All illustrations were created by Marissa Scipione specifically for this article.
Big thanks to Jordan Jones and Caryn Tan for your contributions as part of the community at Foster, founded by Dan Hunt and Stew Fortier.
This article was inspired by UX Collective’s yearly publications series titled The State of UX.
Remarks
This article is not a finite resource, nor employs a top-down hierarchy of curated, recommended, or prescriptive interests.
Thanks for reading if you made it all the way here! I’m open to hearing any feedback or thoughts you have about this article or answering any questions. Please feel free to leave a response below or shoot me an email directly to francescostumpog@gmail.com.
About the Author
Francesco is a product designer working at the intersection of community and betterment to help users reach their fullest potential. Currently, at Copper Books, an early-stage startup building a platform for authors & readers; and launching Incremental Colab, a design studio connecting ideas, people, and organizations, to co-create impactful solutions. Visit francescostumpo.com to learn more.
References
- Tom Suiter’s “Branding for Start-Ups: 1980s to 2010s” at the 2016 AIGA Design Conference, Filmed on October 18, 2016: https://www.aiga.org/inspiration/talks/tom-suiter-branding-for-start-ups-1980s-to-2010s
- Google Fonts: https://fonts.google.com/
- Adobe Fonts: https://fonts.adobe.com/
- Grilli Type: https://www.grillitype.com/
- Colophon Foundry: https://www.colophon-foundry.org/
- Typewolf Foundry: https://www.typewolf.com/
- Typographica Report: Type Foundries Today by Ruxandra Duru, Published in 2013: http://census.typographica.org/
- HEX, Web Colors: https://en.wikipedia.org/wiki/Web_colors
- Coolors: https://coolors.co/
- Color Hunt: https://colorhunt.co/
- Web Accessibility in Mind’s Contrast Checker: https://webaim.org/resources/contrastchecker/
- Figma Plug-ins like A11y Color Contrast Checker: https://www.figma.com/community/plugin/733159460536249875/A11y---Color-Contrast-Checker
- Noun Project: https://thenounproject.com/
- Hero Icons: https://heroicons.com
- Simple Icons: https://simpleicons.org/
- Mobbin Design: https://mobbin.design/browse/ios/apps
- On content marketing by Andrea Bosoni: https://twitter.com/theandreboso/status/1504778856263266321?s=20&t=EB9h9ZV8ssPpdLCLu5iqLw
- Adobe Stock: https://stock.adobe.com/
