Troc is an app that allows people to swap goods with each other without using cash.
There are three methods of swapping:
• trading one product for another
• using Trocs as payment method
• making donations
• trading one product for another
• using Trocs as payment method
• making donations
Design process:
1. Problem identify
2. Branding
3. User flow
4. Low quality prototype
5. High quality prototype
6. Design kit
2. Branding
3. User flow
4. Low quality prototype
5. High quality prototype
6. Design kit
1. PROBLEM IDENTIFY
2. BRANDING
3. USER FLOW
Explore the site map to see the user flow that shaped the app from the beginning. This flow was created at the start of the process to define the app's structure and guide key interactions, forming the foundation of the overall architecture.
4. LOW QUALITY PROTOTYPE
The low quality prototype was created to quickly define the app's layout and overall structure. At this stage, the focus was on placing core elements, testing basic interactions and visualizing the main screens without spending time on details or styling. This first prototype helped validate ideas early, identify usability issues and set a clear direction before moving into higher fidelity design.
5. HIGH QUALITY PROTOTYPE
The high quality version refines the app's visual language and interactions while expanding on the initial structure. At this stage, polished layouts, consistent branding and detailed components were introduced. This prototype provides a realistic experience of the app, making it easier to test usability, present the concept clearly and validate the design decisions.
6. DESIGN KIT
The design kit brings together all the core elements needed to keep the app consistent and scalable. It includes the color palette, typography, icons, buttons, components and layout guidelines, along with usage rules for spacing and states. This kit serves as a single source of truth, making it easier to design new screens, maintain visual coherence and hand off the design smoothly for further development.
