Über
We have an existing mobile mockup (attached) that establishes the brand direction — orange/cream palette, black accents, bold typography. We need a designer to take this concept and produce a complete, polished screen set with all states, interactions, and responsive considerations documented.
This is a design-only engagement. You are not building the frontend. Our engineering team handles implementation.
What We're Building
This is a consumer product where hip-hop fans can:
1. Browse latest hip-hop news pulled from ~12 major hip-hop publications (RSS-driven, updated daily)
2. Ask questions and get sourced answers via an AI chatbot that produces Perplexity-style structured output — short factual bullets with inline numbered citations linking back to original sources
3. Explore trending topics based on cross-source coverage frequency and user engagement
4. Browse a curated source directory of hip-hop news sites with descriptions and direct links
The product is mobile-first (80%+ of traffic will be mobile
Screens Required
1. Home Screen (News Feed + Chat Entry)
The primary landing page. We have an existing mockup for this (attached) that you should refine and polish.
Elements:
- Header with logo, project selector dropdown, sign-in button
- "Latest Hip Hop News" feed showing recent headlines with source name and time ago. Headlines should be tappable — tapping a headline pre-loads it as a chat query
- Guest/subscriber status banner (context-dependent — see states below)
- Chat input bar with placeholder text and voice input icon
- Bottom navigation: (chat) | Trending | Sources
Key interaction: When the user taps the chat input box or begins typing, the news feed section collapses smoothly (slide up / fade) to give the chat experience full screen real estate. A small "Show News" toggle or pull-down gesture should allow users to bring the feed back. When a pre-loaded query arrives via ad link, the news feed should already be in collapsed state with the answer visible.
States to design:
- First-time visitor (from ad click with pre-loaded query): No gate, no login prompt. The news feed is already collapsed. The chat area shows a pre-loaded answer in Perplexity-style format. This is the highest-priority state — it's what paid traffic sees first
- First-time visitor (organic, no query): Home screen with news feed prominent, chat input ready. No login prompt on first visit
- Returning visitor (not subscribed): Soft gate after 5 questions prompting free newsletter subscription. Banner explains value: "Subscribe to our free weekly hip-hop newsletter — get 10 questions/day + a personalized digest every week"
- Free subscriber (logged in): 10 questions/day. Subtle upsell to paid tier in UI (not intrusive)
- Paid subscriber ($5/mo): Full access, no gates, personalized greeting
- News feed collapsed (chat active): The state after user taps the input or starts typing. News feed slides away, chat takes full screen. Small affordance to bring news back
2. Chat / Answer Screen
The core experience. User asks a question, gets a Perplexity-style structured answer.
Elements:
- Query displayed at top
- Answer formatted as: brief intro sentence → sectioned bullet points with inline numbered citations (1), (2), etc. → each bullet is 1–2 sentences max
- Citation badges: tapping a numbered citation opens a popup/drawer showing source title, publication name, date, - URL (clickable), and trust tier badge (A/B/C)
- Full reference list at bottom of answer with all sources numbered
- "Follow-up questions" section below the answer: 2–3 suggested related questions as tappable chips
- Share button (generates a branded card of the answer for social sharing)
- New question input at bottom
Key interaction: As the user focuses the chat input from this screen, the previous answer scrolls up naturally and the new answer streams in below it. The experience should feel like a conversation thread, not page reloads.
Reference for output format: Study Perplexity AI's mobile answer layout for structural reference. Our version adds trust tier badges on citations and a more prominent source click-through experience.
3. Trending Screen
Accessible via the bottom nav "Trending" tab. Shows what's hot in hip-hop based on two signals: cross-source coverage (stories appearing across multiple publications) and user engagement (most-queried topics on the platform).
Elements:
- Section header: "Trending in Hip Hop" with a time filter (Today | This Week | This Month)
- Top Stories section: Stories ranked by cross-source coverage. Each card shows: headline/topic, number of sources covering it (e.g., "Covered by 8 sources"), and a tappable action that pre-loads the topic as a chat query ("Ask about this")
- Most Asked section: Topics ranked by user query volume. Each card shows: topic/question text, query count (e.g., "Asked 340 times this week"), a trend indicator (rising/falling/new), and a tappable action to ask the same question
- Visual distinction between the two sections (different card styles or a tabbed toggle within the screen)
- Tapping any trending item should navigate to the chat screen with the topic pre-loaded as a query
Design consideration: This screen doubles as a discovery engine. Users who don't know what to ask can browse trending topics and tap into conversations. The cards should feel like invitations to explore, not static lists.
4. Newsletter Subscription Gate
A modal or bottom sheet that appears when a returning unsubscribed user hits the question limit.
Elements:
- Clear headline: "Get more from Ask.HipHop"
- Value proposition in 2–3 short lines: free weekly newsletter, 10 questions/day, personalized digest
- Email input field with "Subscribe Free" button
- Small print: "Free. Unsubscribe anytime. We'll send your first newsletter this week."
- Dismiss option ("Maybe later") — don't trap users
- Visual preview of what the newsletter looks like (a small thumbnail or snippet)
5. Paid Tier Upsell
A modal, bottom sheet, or dedicated screen shown to free subscribers when they encounter a paid-tier feature or via the settings/profile area.
Elements:
- Comparison layout: Free tier vs. Paid ($5/mo) — what each includes
- Key paid features highlighted: Unlimited questions, early newsletter access (48hr lead), deep-dive answers, saved history, artist/topic alerts
- CTA: "Upgrade for $5/month"
- Social proof if available (subscriber count, testimonial)
- Dismiss option
6. Profile / Settings Screen
Elements:
- User name/email
- Subscription status (Free / Paid) with manage/upgrade option
- Notification preferences (artist alerts, newsletter frequency)
- Saved conversation history (paid tier)
- Sign out
- Link to newsletter preferences
Technical Context (For Your Reference)
Our dev team will implement your designs in the following stack. You don't need to know this deeply, but it helps to understand the constraints:
- Frontend: React 19 + TypeScript + Vite 7.2 + Tailwind CSS 4.1 + React Router DOM 7.11
- UI approach: Component-based React SPA. Tailwind utility classes for styling. No component library (custom components throughout)
- Responsive: Mobile-first. The app is a progressive web app accessed via mobile browser — not a native iOS/Android app
- Chat rendering: Answers render as markdown with custom citation components. Streaming responses via Server-Sent Events (text appears incrementally)
- Current brand elements: Orange/cream/black palette. Bold sans-serif typography. The attached mockup shows the current brand direction
Please design with Tailwind-friendly patterns in mind — clean spacing, consistent sizing scales, utility-class-friendly layouts. Avoid complex custom illustrations or gradients that would be difficult to reproduce in Tailwind.
Deliverables
1. Figma file with all screens listed above, organized by screen type
2. All states for each screen (empty, loading, populated, error, gated) — not just the happy path
3. Mobile designs as the primary deliverable (375px width / standard iPhone viewport)
4. Desktop layouts for all screens (1440px width) — can be simpler/wider versions of mobile
5. Component library in Figma: buttons, cards, badges, citation popups, navigation, input fields, modals — all reusable and consistent
6. Interaction annotations: Document key interactions (news feed collapse on chat focus, citation popup behavior, gate trigger points, pre-loaded query landing state) with notes or simple prototyping
7. Design tokens: Document the color palette, typography scale, spacing system, and any icon set used so our dev team can map them directly to Tailwind config
Timeline & Budget
- Timeline: 2–3 weeks for full delivery. We'd like to review initial concepts (home screen + chat screen) within the first week
- Budget: Open to proposals. Please quote based on the scope above. This is a fixed-price project, not hourly
- Availability: We need someone who can start within one week of hiring
How to Apply
Please include:
1. 2–3 relevant portfolio pieces (mobile-first web apps, chat UIs, or content products)
2. Your estimated timeline and fixed price for the full scope
3. A brief note on how you'd approach the news feed → chat transition interaction (the collapse behavior when a user taps the chat input)
4. Your availability to start
Contract duration of 1 to 3 months. with 30 hours per week.
Mandatory skills: Figma, User Interface Design, Prototyping, Mockup, User Experience Design
Sprachkenntnisse
- English
Hinweis für Nutzer
Dieses Stellenangebot stammt von einer Partnerplattform von TieTalent. Klicken Sie auf „Jetzt Bewerben“, um Ihre Bewerbung direkt auf deren Website einzureichen.