Role: Product Designer
Timeline: 3 hours
Goal: Encourage developers to build cool things with Lunch Money
Constraints: Very limited time budget
Deliverables: Interactive prototype (Figma)
Overview
Lunch Money is a bootstrapped personal finance SaaS product with a strong developer community and a powerful public API. The goal of this project was to design a high-converting landing page that would encourage developers to explore the API and build integrations with Lunch Money.
I was tasked with designing a dedicated developer API landing page that would clearly communicate the API’s value, answer developers’ key questions, and guide them toward taking the next step, whether that meant reading the documentation, joining the developer community, or starting a project.
My Role
Product Designer (Freelance)
I was responsible for:
- Structuring the landing page information architecture
- Designing the page layout and visual hierarchy
- Designing reusable UI components
- Optimizing the page for developer engagement and conversion
- Aligning the design with Lunch Money’s brand and product ecosystem
The Challenge
Developer audiences have different expectations than typical SaaS customers. They are highly goal-oriented and want to quickly answer questions such as:
- What can this API do?
- How easy is it to use?
- What can I build with it?
- Where do I start?
If these questions are not answered immediately and clearly, developers will leave the page and move on.
The challenge was to design a landing page that communicated technical capability while remaining approachable, scannable, and motivating.
Design Approach
Understanding the Developer Mindset
Having worked as a front-end developer myself, I approached this project from a developer’s perspective. I began by asking:
This helped guide both the content structure and visual hierarchy.
Structuring the Information Hierarchy
My primary goal was to ensure the page answered the most important questions first, in order to remove as much friction as possible and get developers working with Lunch Money’s API as quickly as possible.
I structured the page to follow a logical progression:
- Clear value proposition
- What developers can build with the API
- Code examples to demonstrate usability
- Links to documentation
- Community entry points
This approach reduces friction and allows developers to quickly determine whether the API is worth exploring further.
Consulting the API Directly
To design effectively, I explored the API documentation to understand its capabilities and intended use cases.
This helped me to:
- Identify the most compelling features to highlight
- Use accurate terminology
- Ensure the landing page aligned with the actual developer experience
This step was essential to designing a credible and effective developer-focused page.
Using Code to Increase Engagement
One of the most important components I included was a code block element.
Code examples serve multiple purposes:
- They demonstrate real functionality
- They make the API feel tangible
- They help developers quickly visualize how they would use it
Code blocks are one of the most effective ways to engage developer audiences because they reduce abstraction and increase confidence.
Encouraging Community Engagement
I also emphasized pathways into the developer community, including promoting the Lunch Money Discord server.
This serves an important strategic function:
- Developers who join the community are more likely to stay engaged
- Community participation increases the likelihood of integrations being built
- It strengthens the overall developer ecosystem
Designing clear entry points into the community was an important part of the conversion strategy.
Designing for Scalability and Brand Consistency
I explored the idea of using a dark mode interface, as developers often prefer darker environments.
However, I ultimately chose a light mode design to ensure:
- Better consistency with the rest of the Lunch Money product
- Greater flexibility for reusing components elsewhere
- Easier integration into the existing design system
This decision balanced developer preferences with long-term product scalability.
Key Design Decisions
Prioritizing clarity over visual complexity
The design emphasizes:
- Clear visual hierarchy
- Scannable sections
- Focused messaging
This helps developers quickly extract relevant information.
Using familiar patterns to reduce friction
Developers are accustomed to certain interface patterns, including:
- Code blocks
- Documentation links
- Feature highlights
Using familiar patterns makes the page easier to navigate and understand.
Designing reusable components
The components created for this page can be reused across:
- Documentation pages
- Future developer resources
- Marketing pages
This improves design system consistency and efficiency.
Outcome
The final landing page successfully:
- Clearly communicates the value of the Lunch Money API
- Makes it easy for developers to understand what they can build
- Provides clear next steps into documentation and community
- Aligns with Lunch Money’s product and brand ecosystem
The page serves as a scalable foundation for Lunch Money’s growing developer platform.
Reflections
This project reinforced the importance of designing with a specific audience in mind. Developer audiences have distinct needs and expectations, and designing for them requires clarity, credibility, and respect for their time.
If I were to iterate further, I would explore:
- More distinctive iconography aligned with Lunch Money’s brand
- Interactive elements such as a dark mode toggle
- Additional examples demonstrating real-world integrations