LiYuhan's blogs

Application Design II Final Project:  App Design  I I  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 ...

Sptail Design II Final Project:  Creative Installation Lab- Experiential Retail Design   From Anxiety to Immersion   When I first received this "multi-sensory retail space" assignment, I stared blankly at my sketchpad for three days—paralyzed by the challenge of breaking traditional store formats while seamlessly blending technology with humanistic warmth. Everything changed when I watched a documentary on Malaysian rainforests in the library. The scene of "cocoa beans fermenting in humus soil" struck me like lightning, and the phrase "Let the land's warmth reach the heart through touch and scent" became the master key unlocking my entire design logic.   The modeling phase was a painful metamorphosis:     In Blender, I revised the suspended cocoa pod lighting system 17 times just to perfect the three modes: heartbeat pulse/ember glow/constellation shimmer.     To replicate rainforest texture, I tested 23 flooring materials at ...

Application Design II Project 02: App Design  I I  Interaction Design Submission Crafting the Digital Fabric:Rebranding Brandy Melville with FlutterFlow In the advanced journey of Software Design II, I was assigned a fascinating task: to recreate the Brandy Melville online shopping app interface—meticulously designed in Figma last semester—using FlutterFlow, a visual development tool. This was more than just a tool migration exercise; it was a deep dive into infusing brand soul into the digital experience. HERE for the link to my PRE HERE for the link to my project When California Girl Aesthetic Meets FlutterFlow: Decoding the Brand DNA Brandy Melville’s core aesthetic is a striking fusion of laid-back Californian vibes and minimalist elegance. It champions naturalness, youthfulness, and "effortless chic," while its iconic "One Size Fits Most" philosophy radiates confidence and inclusivity. From the outset, I anchored my design around these keywords:   Minimalist Wh...

Sptail Design II Task 02:  User Research, Storytelling & Functional Art  Development (I) When User Journey Meets Regenerative Art: A Healing Experiment in a Chocolate Retail Space. This is a retail adventure in user research + art installation design. We focused on two groups of people: Gen Z cultural explorers like Florence, a 22-year-old university student in Kuala Lumpur, who is obsessed with the fusion of local culture and modern aesthetics, and is keen on choosing chocolates for special occasions; and Li Wei, a 30-year-old business traveler, who is in search of convenience and social sharing scenes. The research has developed a new style of "mall behavioral observation + mood board interviews" - observing the customers' movement in the chocolate store and listening to their "ideal shopping experience" with a collage of mood boards, which accurately captures **"the ideal shopping experience". The research captured the three core demands of  ...

Application Design II Task 02: App Design I Self-Evaluation & Reflection Around the brand tone and user experience, built a complete dynamic effect system:   1. Emotional entrance - homepage product promotional photo with text dynamic effect to create brand memory point.   2. Product display optimization - Hover to zoom + color change of category buttons to enhance browsing experience   3. Navigation Dynamics Upgrade - Parallax text sliding to enhance the operation pleasure.  4. Functional Micro-interaction - Smart Button Status Core value:  Through 200-500ms fine dynamic effect control, balance between luxury texture and shopping efficiency, and increase conversion rate by 12%.All animations strictly follow cascading priorities and standard jogging curves to ensure a smooth and unified user experience. 1. Emotional entrance kinetic effect (login page→homepage) Adopting the brand's iconic promotional photo as the background, the text slides in...

Games Studies Exercise 2 From the board game Scotland Yard to The Fifth Person - how the digital medium is reconfiguring hide-and-seek 1. Space mastery - Tabletop game Scotland Yard: players move abstractly through the board and transportation tickets, relying on paper-based reasoning to plan their routes.   - **Digital reconstruction of "The Fifth Person ": 3D madhouse map provides three-dimensional spatial interactions, such as flipping windows, smashing boards, and circling pillars, which transforms strategy from "calculation" to "intuitive reaction".   2. Information mismatch   - The board game "Scotland Yard ": the hunter (the regulator character) holds the whole map vision, and the fugitive can only speculate the hunter's position through limited clues.   - Digital Reconstruction of Fifth Person:      - Regulators have perspective skills (e.g. "Peeping Tom" props), but are limited by cooldowns;      - ...

Games Studies Exercise 1 The ultimate fusion of "heartbeat gaming" and "role-playing" to build a dynamic narrative playground. 1. The dramatic tension of asymmetric confrontationThe drama of asymmetric confrontation       - In 1v4 mode, regulators (hunters) and survivors (escapees) have very different abilities, perspectives, and goals, which naturally creates a sense of oppression and a need for collaboration.      - Example: When the supervisor uses skills to chase, the survivor needs to create "terrain differences" by turning windows and looping around the boarding area, so real-time strategy adjustments are as full of improvisation as a stage play.   2.Narrative-driven role-playing       - Each character comes with a dark fairy tale background (e.g., "The Gardener" takes down chairs for revenge, "The Clown" is a chainsaw thriller), and the player completes the pieces of the character's story through manipulation....

Sptail Design II Task 01: For this assignment I chose the Holliday's Ultra Time Travel Store and beryl's Chocolate Factory Store for my research. The biggest difficulty I encountered in doing my homework was finding a floor plan for the store. I had initially chosen to do the m&m Chocolate Bean Shanghai store instead of the Goodwill store, but I couldn't find a floor plan for the m&m store, so I switched to the Goodwill Time Travel store. Because of this assignment my friend and I also visited beryl's chocolate factory store and bought a lot of chocolate.It was really cleverly designed my friend and I raved about it. Click  HERE  for the Powerpoint of PROJECT 1 This assignment focuses on retail space design and analyzes the cases of Holliday's Time Travel Store and Beryl's Chocolate Factory Store to understand how to create brand differentiation and competitiveness through thematic narratives, multi-sensory experiences and technological integration. In p...

Application Design II Task 01: App Design I Self-Evaluation & Reflection 1、Write a reflection on the outcome of App Design I's work 2、Determine what should be changed and updated Reflection: In this Brandy Melville style shopping app interface design, I completed the interface prototype of a whole set of processes from user login, homepage browsing, product details to customer service. The overall design reflects the brand's girlish and minimalist style, but in the actual display, I also found some areas that can be improved. For example, the color scheme and button styles of some pages lacked uniformity, the user navigation process was slightly complicated, and the information in the help center was too densely arranged, which affected the overall readability and efficiency of use. Through this design, I realized that the consistency of the UI, the simplicity of user operation, and the visual expression of the content are very critical to improving the user experience. In ...