Social media made us watch. DOWN makes us go.
Actual product screens · sample-data preview
Founder-led, working or prototype project built by Malachi Mafo.
Overview
Availability and intent are scattered across conversations. DOWN brings three decisions together: find something to do, understand a Plan and choose to join. The short description is the proposition, not a measured claim about user behaviour.
My contribution is the product concept, creative direction and the design/build direction of the React application. The existing source implements discovery, Plan details, availability and joining. These screens were captured from that actual application in its labelled sample-data mode; they are not evidence of real attendance or user numbers.
The existing identity uses Manrope for interface text, Barlow Condensed for emphatic activity headings and acid lime against near-black for the primary action. Direct phrases such as ‘I’m down’ turn a technical RSVP into familiar social language. Availability is a time-bound signal, not an instruction to keep scrolling.
Discover offers an activity and its time. Plan details bring location state, capacity and participants together. Joining produces a confirmation with the next action. The three frames show this real preview flow with synthetic participants; the connected service is linked separately.
The proposed campaign extends the app’s own type and lime accent into a launch poster, an invitation and a coordinated three-piece social series. A three-screen composition explains the product. These are new portfolio explorations, not previously published advertising.
The key design lesson is that a strong invitation still needs precise details: when a Plan starts, what joining confirms and whether a meeting point is agreed. The next step is to observe people using the flow and test comprehension, accessibility and the transition from preview to connected use.
Final work / New explorations
New portfolio exploration · 7 October 2026. HTML/CSS composition and browser export using existing project assets. Original typography and interface captures are retained. Not commissioned, published or user-tested.
Translate the product proposition into a proposed launch poster.
The existing Barlow Condensed type and lime accent shift the reading from watching to doing.
Produced with HTML/CSS layout and browser export. Existing project assets are used as supplied.
Review before presenting: Confirm the campaign voice and personally refine the spacing; this has not been published or tested.
Turn the product name into an open invitation.
The existing lime colour becomes the field, with large Barlow Condensed type and one outlined final word. A short question carries the composition.
Produced with HTML/CSS layout and browser export. Existing project assets are used as supplied.
Review before presenting: Choose whether the tone matches your intended audience, adjust the line rhythm yourself and test legibility at social-feed size.
Explain the product through a complete three-screen sequence.
Equal device frames contain actual application captures. Sample participants and the preview state stay disclosed.
Produced with HTML/CSS layout and browser export. Existing project assets are used as supplied.
Review before presenting: Walk through the live preview yourself and explain what joining confirms; no user numbers or live attendance are implied.
Introduce the first decision in a coordinated three-part campaign.
A near-black field, condensed heading and fully contained Discover capture establish the series. The participants and activity are sample data.
Produced with HTML/CSS layout and browser export. Existing project assets are used as supplied.
Review before presenting: Review the invitation line and choose the intended publishing format. No campaign has run and no engagement results are claimed.
Move from possibility to a specific time and place.
The lime field continues the same grid and type while displaying the real Plan-details screen. It explains a plan, not a fabricated creation screen.
Produced with HTML/CSS layout and browser export. Existing project assets are used as supplied.
Review before presenting: Be explicit that this is Plan details, not the plan-creation interface. Capture and test the creation flow separately before presenting that functionality.
End the campaign sequence with a clear response.
A light tonal field and the genuine device-only join confirmation complete the series. The same phone scale and baseline link all three pieces.
Produced with HTML/CSS layout and browser export. Existing project assets are used as supplied.
Review before presenting: Explain the confirmation limits: no real booking or invitation was sent. Review what a user should do immediately after joining.
Live experience
Open DOWN
