Application design 2 [Final Project]

Application Design II

Final Project: App Design II Interaction Design Submission

Crafting the Digital Fabric:

Rebranding Brandy Melville with FlutterFlow

  Building upon the initial high-fidelity prototype developed in FlutterFlow for Brandy Melville’s e-commerce interface (originally designed in Figma), this second iteration focused on  systematically enhancing visual contrast to improve usability while maintaining brand integrity. The objective was functional refinement rather than aesthetic overhaul.  

HERE for the link to my PRE

HERE for the link to my project

Key Design Refinements:

Animation on the primary payment button

To further optimize the checkout flow, I introduced a subtle scaling animation on the primary payment button ("Proceed to Payment").  

Implementation:  

  Applied a FlutterFlow animation trigger upon the button entering the viewport. The button smoothly scales from 95% to 100% size over 300ms with an `ease-in-out` curve.  

Design Rationale:  

 1. Guided Focus: The gentle growth creates natural visual momentum toward this critical conversion point without disruptive motion.  

 2. Perceived Responsiveness:** The micro-interaction provides immediate feedback, reinforcing the interface’s interactivity.  

 3. Balanced Emphasis: Retains the button’s existing color/layout while enhancing discoverability. Animation magnitude was calibrated to avoid overwhelming users.  

Functional Impact: 

  - Reduces "action blindness" in long product pages  

  - Aligns with e-commerce best practices for guiding users toward conversion  

  - Maintains Brandy Melville’s minimalist ethos through restrained execution  

This refinement complements previous contrast upgrades by applying behavioral design principles to critical junctures in the user journey. 

Text Hierarchy Reinforcement 

    - Identified Issue: Critical information (product titles, prices, navigation labels, CTAs) used light taupe-gray (#9E9E9E range), reducing legibility against white backgrounds and impairing information scanning efficiency.  

   - Solution:Strategically replaced text colors with **dark brown (#333333) and pure black (#000000)** for priority elements based on content hierarchy.  

   -Outcome:Achieved measurable improvements in readability and accessibility. Established a clear visual information structure, reducing cognitive load during user interactions.  

 Product Image Enhancement 

    - Identified Issue: Original product images displayed subdued contrast, diminishing texture visibility (e.g., fabric details, prints) and weakening visual impact against minimalist backgrounds.  

    - Solution: Implemented global contrast enhancement for primary product imagery through adjusted brightness/levels.  

   - Outcome: Optimized images exhibit stronger visual prominence ("pop effect"), accurately conveying material qualities. This directly supports core e-commerce requirements: enabling efficient product evaluation and purchase decisions.  

Design Rationale & Value: 

- Functionality-Driven Approach: Contrast adjustments prioritized usability and task efficiency. Text contrast optimizations ensure frictionless information access; image enhancements facilitate accurate product assessment. Both align with conversion-oriented design principles.  

- Brand Consistency: All modifications adhere strictly to Brandy Melville’s established design language. Deeper neutrals and richer imagery intensify focus on products without introducing new colors or compromising the minimalist foundation (white space, desaturated pink accents). This strengthens the brand’s "California minimalism" through amplified clarity.  

- Precision Execution: Contrast elevation was selectively applied to high-priority elements. Restraint prevented visual clutter while preserving the interface’s signature lightness—demonstrating disciplined application of "less is more" philosophy.