[Case 03]
FoodCLUB App Design
Social Media / Consumer App
FoodCLUB App Design
A creator-first food mobile app for sharing, learning, and discovering new recipes.
[Project Overview]
FoodCLUB is a creator-first food mobile app built around short-form video, designed to help creators share content quickly and keep audiences engaged. During the MVP phase, the team focused on shaping a simple creation experience that feels fun to use and easy to publish from.
[Challenge]
My challenge was to [[ bring clarity and consistency to the creation journey]] by defining the main flow, designing reusable UI assets, and [[ refining key screens into a cohesive, shippable experience. ]]
[Industry]
Social Media / Consumer App
[My Role]
UI/UX Design Intern
[Platforms]
Mobile (Android / IOS)
[Timeline]
December 2023 - May 2024
[Process]
User flow diagram used to validate core journeys and find gaps across the app
User flow diagram used to validate core journeys and find gaps across the app
[User Flow Diagram]
I mapped the current end to end experience so the team could [[ see the full app journey at a glance. ]] This helped validate [[key flows, surface missing states and broken handoffs, and pinpoint where interactions needed refinement. ]] It also made it easier to align on priorities before moving into design changes.
[User Flow Diagram]
I mapped the current end to end experience so the team could [[ see the full app journey at a glance. ]] This helped validate [[key flows, surface missing states and broken handoffs, and pinpoint where interactions needed refinement. ]] It also made it easier to align on priorities before moving into design changes.
[User Flow Diagram]
I mapped the current end to end experience so the team could [[ see the full app journey at a glance. ]] This helped validate [[key flows, surface missing states and broken handoffs, and pinpoint where interactions needed refinement. ]] It also made it easier to align on priorities before moving into design changes.
Loading components exploration + final upload screen proposal
Loading components exploration + final upload screen proposal
[Loading Animation Exploration]
I explored a range of simple loading animation concepts by building them through figma components and testing different progress and feedback patterns. The final proposal [[ used the FoodCLUB logo as the loader, starting grey at 0% and gradually filling with colour ]] as the upload or loading progresses, with a percentage indicator underneath. After refining the logo as a clean vector, I [[ mocked it into the upload screens ]] and shared the proposal with the design team leader for approval.
[Loading Animation Exploration]
I explored a range of simple loading animation concepts by building them through figma components and testing different progress and feedback patterns. The final proposal [[ used the FoodCLUB logo as the loader, starting grey at 0% and gradually filling with colour ]] as the upload or loading progresses, with a percentage indicator underneath. After refining the logo as a clean vector, I [[ mocked it into the upload screens ]] and shared the proposal with the design team leader for approval.
[Loading Animation Exploration]
I explored a range of simple loading animation concepts by building them through figma components and testing different progress and feedback patterns. The final proposal [[ used the FoodCLUB logo as the loader, starting grey at 0% and gradually filling with colour ]] as the upload or loading progresses, with a percentage indicator underneath. After refining the logo as a clean vector, I [[ mocked it into the upload screens ]] and shared the proposal with the design team leader for approval.
Static & Interactive sticker concepts with supporting screens
Static & Interactive sticker concepts with supporting screens
[Sticker System Exploration]
I designed a range of sticker concepts to [[ help creators add context, personality, and interaction ]] to their videos and pictures. I explored new sticker behaviours and interaction moments that encourage audience participation. To make this shippable, I [[created the components and documented key flows across creation, posting, and viewing ]] so decisions could be made quickly.
[Sticker System Exploration]
I designed a range of sticker concepts to [[ help creators add context, personality, and interaction ]] to their videos and pictures. I explored new sticker behaviours and interaction moments that encourage audience participation. To make this shippable, I [[created the components and documented key flows across creation, posting, and viewing ]] so decisions could be made quickly.
[Sticker System Exploration]
I designed a range of sticker concepts to [[ help creators add context, personality, and interaction ]] to their videos and pictures. I explored new sticker behaviours and interaction moments that encourage audience participation. To make this shippable, I [[created the components and documented key flows across creation, posting, and viewing ]] so decisions could be made quickly.
End-to-end editor flow showing tool navigation, and editing interaction
End-to-end editor flow showing tool navigation, and editing interaction
[In-App Video Editing Journey]
I mapped and designed the [[ end-to-end in-app video editing journey]], defining the core editing steps, tool navigation, and key states. This made the editor easier to understand and build by [[ clarifying interactions, dependencies, and how each filters behaves across the flow. ]]
[In-App Video Editing Journey]
I mapped and designed the [[ end-to-end in-app video editing journey]], defining the core editing steps, tool navigation, and key states. This made the editor easier to understand and build by [[ clarifying interactions, dependencies, and how each filters behaves across the flow. ]]
[In-App Video Editing Journey]
I mapped and designed the [[ end-to-end in-app video editing journey]], defining the core editing steps, tool navigation, and key states. This made the editor easier to understand and build by [[ clarifying interactions, dependencies, and how each filters behaves across the flow. ]]
Overview of MVP Screens
Overview of MVP Screens
[MVP Screen Audit]
I pulled together an MVP-wide screen overview to audit the experience end-to-end and tighten consistency before shipping. I [[standardised core UI patterns like buttons, spacing, typography, and hierarchy, ]] and refined key states such as [[error handling, success feedback, loading and empty states, and premission prompts. ]] This made the flow feel more cohesive and helped the team spot gaps and improve interactions.
[MVP Screen Audit]
I pulled together an MVP-wide screen overview to audit the experience end-to-end and tighten consistency before shipping. I [[standardised core UI patterns like buttons, spacing, typography, and hierarchy, ]] and refined key states such as [[error handling, success feedback, loading and empty states, and premission prompts. ]] This made the flow feel more cohesive and helped the team spot gaps and improve interactions.
[MVP Screen Audit]
I pulled together an MVP-wide screen overview to audit the experience end-to-end and tighten consistency before shipping. I [[standardised core UI patterns like buttons, spacing, typography, and hierarchy, ]] and refined key states such as [[error handling, success feedback, loading and empty states, and premission prompts. ]] This made the flow feel more cohesive and helped the team spot gaps and improve interactions.
[Key Skills]
User Flows
Journey Mapping
Interaction Design
UI Design
Design System Thinking
Figma Components
Micro-interactions
Graphic Design
Figma Components
Micro-interactions
Graphic Design
Figma Components
Micro-interactions
Graphic Design
[Outcome]