Overlay

overlay.market

0-1 brand and design

Role: Head of Design

Results:

ongoing

Role and Responsibility

At Overlay, I served as COO, Co-Founder, and Head of Design, leading the development of a decentralized exchange for niche and exotic data markets—a product the world had never seen before. My responsibility was creating an intuitive user experience for a highly complex product while also managing fundraising and funds, hiring and firing, team dynamics, and operations.

In terms of design, I was responsible for:

Defining the overall product and UX strategy, ensuring that we built an interface that could cater to native DeFi traders as well as onboard future users new to DeFi.

Managing the end-to-end design process, from early wireframing to final implementation.

Navigating the need for trust and simplicity in a highly technical product, where our users needed to feel secure, while also understanding the complexities of the protocol.

While my primary aim was to create a user-friendly interface, my COO responsibilities and the nature of startup life meant I had to be highly resourceful in leading the design. I prioritized the most urgent tasks, often scaling back design work to meet tight deadlines.

Collaboration

Throughout most of Overlay’s development, I didn’t have a formal design team as resourcing didn’t allow it. However, in the later stages, I was able to wrap in a couple ad-hoc contract designers who I worked closely with.

I provided direction based on balancing the technical limitations of our development team with the need for user-friendly experiences.

I directed my reports to deliver on specific tasks such as helping me manage components for our design system, converting desktop designs to be responsive (our user base was on desktop, which we learned from primary user research), and implementing UI designs for UX flows which I directed through wireframes and specs.

As I coached them on the designs and their skills and knowledge base grew, I handed off larger and larger projects. For the most part these hand offs went well.

I came to really love the role of design manager. I find that being highly aligned and loosely coupled provides high autonomy to individuals to solve problems, something I cherish in my own IC work.

I did my best to implement autonomy and self motivation in everyone I worked with and managed at Overlay, though sometimes “Founder Mode” was required when details were not being considered.

Documenting user flows along with hi-fidelity mocks for the referral program

One such project was the referral program (yet to launch).


After discussions with the core team, stakeholders, and reviewing other similar projects, it became apparent that our referral program needed to be built sooner than later.


I met with product and dev to scope out the feature and wrote a PRD for the team.


I queried stakeholders (vc’s, community/users, and our internal team) on what they thought the best live referral programs were and studied those designs for reference.


I then handed off the designs to one of my designers thinking the scope was clear.


The designs came back pretty well suited to the scope, however when the team reviewed, confusion set in. Digging in, it became apparent that our internal team couldn’t keep the three types of users straight. This had little to do with design and mostly had to do with internal misunderstandings.


Instead of continued confusion, I collaborated with the designer to build user flows with heavy documentation so everyone could clearly understand every step of the feature.


This resulted in near-zero misunderstandings from that point on as the user flows served as the source of truth for the team.


Demos win debates.

Process

The design process at Overlay was shaped by heavy resource constraints.

Though my ideal process would have involved discovery, thorough research, wireframing, and testing and iterations, the reality was that I often had to move fast and make decisions on the fly. Here’s a breakdown of how I managed the design process:

  1. Discovery and Research:

  • Due to the fast pace and limited team resources, I leaned on precedent analysis, team decisions, and my own instincts when making design decisions. I would typically look at 4-5 precedent designs from other DeFi platforms and then quickly adapt ideas for Overlay’s interface.

  • I relied on community feedback on production design to understand user pain points.

  1. Design Strategy:

  • I developed and wrote a simple design ethos to balance Overlay’s highly technical nature with a playful, meme-driven brand identity.

  • This aligned minimalism as the predominant language on the UI which allowed me the freedom to move quickly on features when time was of the essence.

  • Additionally, pixelated / 80’s style interfaces were popular at the time I started designing for Overlay.

    Therefore, I made the decision that a minimal, flat, paired-down interface would be best.

The first iteration - yikes.

  1. Execution

  • I built a design system on the fly that would simplify future design and development while maintaining consistency across the user experience.

    This system was designed to accommodate developer limitations while ensuring a smooth user experience.

The community played a crucial role in guiding the design. Much of the early user feedback came through Discord, where I engaged directly with our user base. I responded to complaints and gathered insights that helped me adjust the user experience iteratively, even though we didn’t have formal UX testing resources at the time.

Critical Design Decisions

To elevate the product and reduce user friction, there were several key decisions I made throughout my time building Overlay that highlight the types of decisions I made and the work I did.

  1. Focus on the product

The design ethos and stakeholders drove an early decision to have users first touch point be a market page (in web2 terms, this would be akin to landing on the purchase page for a product from anywhere).

While initially I felt like this made sense in context to our domain, I quickly realized that there needed to be a step before to differentiate Overlay (aka, what it is).

Landing on the product, to...

Landing on the product, to...

Landing on the product, to...

➡️

➡️

➡️

...landing on a list of products.

...landing on a list of products.

...landing on a list of products.

  1. Highlight visual language

We received feedback from prospective vc’s that they felt like the UI was too simple, given the novelty of the project. This was a pretty fair point. While I had considered this, it was not something I felt like we ever had time to explore properly. I felt that Overlay had to be truly unique. I now know that in putting the best design possible off for the future, minimalism became a more permanent fixture when it should have just been a short stopover to something more wonderful.


So, I started leaning into our tech. I defined the art direction of the visual language and choosing images that will eventually represent positions as NFT’s, I helped steer the direction towards the visual language becoming the product.

Ascetic minimalism to...

...visuals become the product.

Art Direction

I sought out, hired and partnered a brand design firm to upgrade the branding and logo from it’s original form, inherited from the first founder drawing on a napkin.

We worked closely together to synthesize the mission and vision of Overlay, and after several weeks, I presented the proposed revision to the team. Upon approval, I spearheaded the rolling out of the new brand across our socials and partners.


This branding included color pallet, voice, and a visual language which is still in use today.

➡️

Taking the brand from 0 to 1

Additionally, I utilized AI (GPT 4o and Midjourney) to aid in the creation of artwork that was used for NFTs to incentivize the community.


I presented a number of different

In retrospect, Overlay is still missing a consistent graphical language to root in. My other responsibilities took precedent over the development and maintenance of a consistent language, and at the same time, the language kept evolving to match the directive of the project. Below is a sample of some of the art I produced while exploring what Overlay could be (mostly created in Photoshop, Illustrator, Figma, or with the aid of AI).

I also engaged with the community who are seemingly always willing and eager to create content based on the Overlay brand. I had less control over this, of course, but I helped users from all around the world with no formal training create memes, videos, artwork, stickers, and general content for the protocol. Here are a few samples:

Internally, I also collaborated with the marketing and communications leads, giving them flexibility to execute on branding and community outreach based on our initial design ethos. While I had the final say on major design decisions, I had to allow some aspects of the brand and user interface to evolve independently due to my other operational duties. For example, I had a say in delineating the cat as our meme, but it was our head of comms who came up with our pepe-cat cartoon mascot.

Challenges and Trade-offs

The biggest challenge I faced was balancing product complexity with user simplicity. Overlay’s backend was incredibly technical, which resulted in user confusion—particularly around understanding why their returns or PnL didn’t align with their expectations.

In the beginning, I prioritized documentation over making the interface more explanatory. Given my operational duties as COO, I didn’t have the bandwidth to hire and onboard a full-time designer to tackle these issues, so I worked with a technical writer to develop extensive documentation. However, looking back, while documentation was critical, I would have preferred to integrate more of that information directly into the UI with in-line explanations or visual aids to reduce friction for users.

Additionally, resource limitations meant I had to make snap decisions.

Designs that would have typically taken me two weeks were done in a matter of hours. This compressed design process led to less iteration and refinement than I would have liked. In hindsight, this created a disjointed user experience as the platform grew more complex, and I wish I had been able to take a more holistic approach.

Results

Despite the challenges, the product achieved several milestones:

  • Raised $4M in seed funding, with $750K coming from my direct efforts during a market downturn.

  • Launched a test environment that attracted thousands of users, allowing us to gather critical feedback for future iterations.

  • Grew a thriving community with 100K Twitter followers and 80K Discord members, driven by the balance between our technical rigor and playful branding.

  • Began pivoting to a more information-dense interface based on feedback from both VCs and the community, who felt the initial interface was too simple. Early designs have been well received by the community, who appreciated the more transparent presentation of complex market data.

Outcome

My time at Overlay was a crash course in balancing visionary design with the realities of startup life. The compressed timelines and resource constraints forced me to prioritize quick wins over deeper iteration, but the experience taught me invaluable lessons in trade-offs, prioritization, and community-driven design.


Looking back, I recognize the importance of in-line user guidance for highly technical products like Overlay. While our early target audience was native DeFi traders, many users still needed more hand-holding than I anticipated. As we enter a redesign phase, I’m incorporating more data-driven elements and visual aids to better meet users’ needs while staying true to the technical complexity of the product.


Ultimately, Overlay taught me how to balance multiple roles, lead a product in a rapidly evolving space, and drive innovation while maintaining a clear focus on both UX design and business goals.

© Copyright 2024, Wesley Kay

© Copyright 2024, Wesley Kay

© Copyright 2024, Wesley Kay