Redesigning BULB: Creating a Design System for Early Stage Startups

In the middle of 2022, I joined BULB as the first designer. BULB is a Web3 blogging platform that rewards engagement, whether you're a consumer or a creator.

When I joined BULB there was no design system, which made new features incredibly time consuming to design and build. Aside from that it was inefficient to make UI changes when branding and design foundations had not been created either.

At the time I joined, BULB looked like this.

BULB home page when I joined

When improving design at BULB, I aimed to keep as much of the original platform the same so that users don't have to relearn how to use BULB and the team could make changes more efficiently.

After the redesign, BULB looks like this. It's structurally similar to the original, but new components have clean UI in mind and offer a comparable experience to other blogging sites such as Medium.

BULB home page after branding redesign and design system creation

One of my favourite things about product design - when users love it!

Deciding where to start with design improvements

The tricky thing for early stage products is that there is SO MANY areas for improvement. BULB UX when I joined was already pretty intuitive as it used patterns from popular social media sites, with weaknesses mainly being in UI. However, to make investing in a design system with a UI facelift worth it, we needed to first solidify branding and foundations like colour, logo and typography.

Realising I need help to redesign BULB in time for soft launch

Areas I needed to tackle for the redesign of BULB included:

• Branding
• Landing page / marketing sites
• The actual blogging platform on web and mobile (12+ pages)
• Social media assets with new branding

To squeeze this in the timeframe of 3 months for soft launch on a part time basis of 1-2 days a week was unachievable by myself alone. Thus, one of the most important and impactful decisions I made was to outsource branding and to who - balancing tradeoffs between pricing, level of experience and quality.

When I saw my friend Hannah announced her new design agency Flair, we knew that she would be awesome for the job and became one of her early clients.

From there, it was a cross functional effort between Alex (CMO / marketing), Johnson (CTO / engineering). Oliver (engineering) and myself (design) to convey our brand and product vision to Hannah. We went through multiple iterations of feedback before we settled on a final brand identity which makes up BULB today. I found that guiding someone else to deliver on a vision in your head is sometimes as tricky as creating it yourself. This process challenged my thinking on what Web3 design should look like, both entertaining and breaking away from the ‘norms’ of the highly graphic designs inspired by games. Hannah was excellent at understanding what our team wanted and delivering on each iteration.

The original BULB landing page from before I joined

Old landing page and visual identity

Some branding approaches we explored with Hannah @ Flair.

A typical Web3 look and feel - think Crypto Punks.

Something more usable than typical Web3 design with a touch of the 'Solana vibe'

Final branding and landing page

Final design - clean writing and reading + fun doodles

We ultimately made the decision to stay true to the writing and reading roots of BULB - the product needed to be clean for ease of use with elements of gamification for the earn aspect. We deliberately made BULB's design look more Web2 than Web3 to set us up for mainstream adoption one day.

• Main colours of black and white are used to create familiarity for users who currently read on other blogging or news platforms
• Sans serif font to create a modern feel
• Black outlines and illustrations to evoke a sense of the hand-drawn and hand-written feel in the craft of writing

Hannah applied this branding to our marketing landing pages, assets and iconography used across BULB.

View the landing page here.

Setting up the design system with 60+ base components

While branding was being created by Hannah, I translated our new brand identity into foundation elements and components that make up the BULB blogging platform. This was a team effort between our engineers Johnson and Oliver and design, myself as we fiddled with different colour shades, text sizes and spacing standards.

Using our new foundations, we built about 60 base components including cards, buttons, and filters. Here, we relied on open source component libraries where we could quickly reuse the structure and interactions but apply our own style to it. My favourite open source libraries:

• https://atlassian.design/ Atlassian
• https://baseweb.design/ Uber

Example of typography foundations at BULB

Example of article card and tag components

Old article card and tag components

New borderless article cards and tag components + loving loving more space

Efficiency and improved usability after creating the design system

Once we established the key components and ‘rules’ for combining components, our engineering team was left with some patterns they could use to implement features themselves. For features that were relatively straight forward, engineering would implement it and I would provide design feedback after. Doing the heavy lifting to do branding and design system at once was an important investment in improving development efficiency and quality of BULB.

P.S if you're a startup in need of design, I would recommend Flair.
https://www.designflair.co/