Description
Project Overview
The Goodies project was a UI design for a mobile marketplace app for iOS, similar to Facebook Marketplace or Wallapop. The app enables users to post items for sale with up to 10 photos, add detailed descriptions, set prices, and assign categories for easy browsing. To support transactions, Goodies also includes an inbox and direct messaging system, making buyer-seller communication seamless within the app. Alongside the app design, I developed a mini design system to establish a consistent visual identity with reusable components, typography, and color guidelines.
My Role and Duration
I worked as the UI Designer over the course of four weeks, managing the design process from early ideation to high-fidelity prototypes. My responsibilities included:
Sketching initial ideas and producing low-fidelity wireframes for five core screens.
Creating a color palette, typography system, and reusable components for consistency.
Designing high-fidelity prototypes in Figma, ensuring all screens were fully interactive and visually aligned.
Building a mini design system to guide future scalability and branding.
The is the finial ready for dev mode
The Problem
At the start of the project, the client lacked a clear vision for the app’s look and feel, making it difficult to define direction. Key uncertainties included:
What categories should be available to organize listings.
Which color palette and visual style would communicate trust and usability.
To overcome this, I conducted competitive research on existing marketplace apps and user-focused exploration to identify expectations around browsing, posting, and messaging. This research informed design decisions, clarified visual direction, and established a foundation for a user-friendly app.
Goals
The project centered around designing five core screens to create a functional marketplace flow:
Feed – A main page with a searchable list of items.
Ad Page – A detailed listing page with images, description, category, and price.
Inbox – An overview of all user messages.
DM Screen – A dedicated chat screen for buyer-seller conversations.
User Profile – A page where users can view and manage their posted items.
Here the Lo-fi sketch of the project.
Design Process
1. Lo-Fi Wireframes
Sketched ideas for all five required screens.
Created wireframes in FigJam, organized on a clearly labeled page within the Figma file.
2. High-Fidelity Prototypes
Translated wireframes into polished screens using a defined color palette, typography styles, and components.
Designed clickable flows for posting items, browsing the feed, and messaging.
3. Mini Design System
Built a style guide featuring brand colors, typography hierarchy, and key UI components (cards, buttons, navigation).
Applied the system consistently across all screens to maintain coherence.
4. Documentation
Compiled the color palette, typography, and component library into a clear design documentation page to ensure scalability and reference for future iterations.
Color Palette | Typography | Components | App Name & Branding
As a busy user looking to declutter and make quick cash, I want a simple and fast way to post items for sale, so I can reach buyers without hassle.
The Components and Variants Control Setting
These research-driven choices ensure the app isn’t just visually polished, but also purposefully designed to meet real user expectations and behaviors.