Meeps : Social Calendar app
Rebuilt a social calendar app from scratch and shipped its first design system.
Project Details
- Mobile app
- Social
- Client
- Meeps
- Role
- Product Designer
- Timeline
- November 2023 – March 2024
- Platform
- Mobile
- Industry
- Social / Community
Business Need
Meeps was a French social calendar startup operating without a design system or structured design process. Limited resources had produced an inconsistent UI different components, no visual rhythm, no token structure making the product look unfinished and slowing the dev team down every sprint.
Problem
The absence of a design system meant every screen was designed in isolation. Colours, typography, and spacing were inconsistent across the app. This created friction for users navigating the product, eroded brand trust, and made development expensive every new feature required individual back-and-forth between design and dev instead of pulling from a shared component library. The UI itself was outdated and didn't reflect the social-first product the team was building toward.
Goals
- Build a scalable design system in Figma tokens, components, and documentation usable by both design and development.
- Revamp the existing UI to align with the brand and raise the quality bar.
- Redesign key user flows (particularly search and discovery) to reduce friction and improve goal completion. Eliminate ambiguity in design-to-dev handoff.
Project Strategy
The core bet was to start with visual language before touching components. Typography scale, colour system (using Tailwind CSS conventions for predictability), spacing grid (8pt), and shadow tokens all defined first. This layer is the fastest to produce and has the highest leverage: it immediately changes how the product feels, gives developers a usable system right away, and provides the foundation for every component built after. Search and discovery were the highest-friction flows, so that's where the UI revamp started beyond the design system work.
Building the visual language first
Visual language typography, colour, spacing is the foundation of any design system. It produces faster than a full component library, but the impact on brand perception and product coherence is immediate. That was exactly what Meeps needed at this stage: something that could be shipped fast and actually used by engineers to build new UI at velocity, without waiting for every component to be designed.
Typography : The app was running on two font weights. No hierarchy, no structure headings and body text looked nearly identical. I introduced semi-bold and bold weights, creating clear distinctions between heading levels, body copy, and CTAs. The difference in readability was immediate.
Colour : Colour usage across the app was inconsistent same intent, different hex values on different screens. I implemented a Tailwind CSS convention (shades 50–900 per colour), giving the team a systematic, predictable approach that works for both design and code. Brand recognition improved and the UI stopped fighting itself.
Dark mode : Rather than bolt it on later, I chose base colour values that could support a dark theme from the start. This meant the engineering team could ship dark mode without requiring a design rework.
Spacing : No grid, no rhythm elements were cramped or floating arbitrarily depending on who built the screen. I introduced an 8pt grid as the single source of truth for all spacing decisions. Immediate visual improvement, and developers could stop guessing.
UI Revamp
With the system in place, the UI revamp was systematic rather than speculative. Every screen was rebuilt using the token layer — no one-off decisions, no manual values. The calendar and profile sections were the primary surfaces, both overhauled to reflect the new visual language.
Search & Discovery : Flow Redesign
Search was the highest-friction flow in the app. Users had no clear entry point for browsing, and no way to refine results meaningfully. I redesigned the search experience around two modes: targeted search (you know what you want) and discovery (you don't). The solution: a Discover grid of event categories as the default state, with a prominent search bar on top and layered filtering by date, location, event category, and subcategory.
The results page was rebuilt around typography and spacing clarity users could scan quickly and identify relevance without reading every detail.
Design system in action : Event Creation
The event creation screen shows the system doing its job. The old version had no hierarchy, ambiguous input fields, and no visual structure. The rebuilt screen uses system-defined components throughout:
- Form Text Input — standard body typography, border styles, and padding from the token system
- Primary Button ("Create Event") — brand colour (
#F87C56), rounded corners, H4 type scale - User Avatar — standardised sizing and shape, consistent across the entire app
The transformation of the event creation screen demonstrates the power of a well-structured design system. The old design (top) lacked visual hierarchy and clear input fields. In contrast, the redesigned screen (bottom) leverages system-defined components, spacing, and typography for a seamless user experience.
Component Name: Form Text Input
- System Tie-in: Employs standard typography (body text), border styles, and padding as defined in the design system.
Component Name: Primary Button ("Create Event")
- System Tie-in: Utilizes bold brand color (#F87C56), rounded corners, and H4 typography style as defined in the design system.
Component Name: User Avatar
- System Tie-in: Adheres to standard avatar sizing and circular shape, as defined in the design system.
- Solution-Focused: Maintains visual consistency in user representation across the app, enhancing familiarity.
Outcomes
The design system immediately changed how the team worked. Dev handoff went from constant back-and-forth to pulling directly from defined components. Developers could implement UI confidently and explore new patterns within the visual language without breaking consistency. The team reported doubling their development output after the system shipped.
Beyond efficiency: the product finally looked like it had been built intentionally. Brand coherence improved, and the UI stopped being a liability in user perception.
Prototype