Collaborative Design Practice
From User Flow to Brand Experience: My Design Practice in the PetEase Project
This article documents my main contributions to the PetEase pet-service application project: the early planning of the Merchant Management User Flow, the creation of the final high-fidelity application mockup and 3D presentation animation, and the production of the complete brand mockup system.
My work did not begin with a single interface. Instead, it developed through a connected sequence: logical structure, visual interface, motion presentation, and brand application. This process helped PetEase become more than a set of screens. It became a coherent experience that could remain consistent across both digital and physical media.
Early-Stage Work: Merchant Management User Flow
During the early stage of the project, I was mainly responsible for designing the Merchant Management User Flow. Unlike the customer-facing booking journey, the merchant side needed to support several management tasks at the same time, including service listings, booking status, reviews, earnings, analytics, and account settings. The main challenge was therefore not simply to add more features, but to organise them into a clear hierarchy with well-defined task boundaries.
I first grouped the merchant's main responsibilities into three high-frequency areas: service management, booking management, and review access. Earnings, analytics, and profile settings were then placed at a secondary level. This prevented the dashboard from becoming overloaded while preserving direct access to the most important daily operations.
Core Decisions Behind the Flow
01 / Task Grouping
Service editing, price updates, and image uploads were placed within one management module, allowing merchants to complete related actions around the same service item.
02 / Status Management
Bookings required more than simple viewing. The flow therefore included accepting, rejecting, updating status, and completing a service, making the booking process dynamic rather than static.
03 / Hierarchy Control
High-frequency tasks remained directly accessible from the dashboard, while analytics and settings were placed deeper in the structure to reduce unnecessary information density.
04 / Predictable Navigation
Each entry point represented a clearly defined task. This reduced repeated actions across multiple pages and helped users anticipate what would happen after each selection.
The purpose of this stage was to establish the structural foundation of the product. Once the relationships between merchant tasks were clear, buttons, navigation elements, cards, and status indicators in the later interface design could be based on a reliable logic.
High-Fidelity Prototype: From Interface Completion to Presentation Quality
After the final high-fidelity prototype was completed, I became responsible for the application mockup presentation. The aim was not merely to place interface screenshots inside a phone frame. The interface, icons, device perspective, lighting, and branded background had to work together as one visual narrative.
The PetEase high-fidelity interface used orange as the main accent colour, supported by white, warm neutral tones, and dark brown. In the mockup presentation, I preserved a consistent visual language across buttons, selected states, icons, and information cards. As a result, screens such as service details, date and time selection, pet selection, and payment could be presented continuously without appearing disconnected from one another.
Blender 3D Phone Application Presentation Animation
To present the final interface with greater spatial depth, I created a 3D phone application animation in Blender. The phone model served as the main object, while subtle rotation and framing changes revealed the thickness of the device and the content displayed on the screen. The background continued the orange and warm red visual direction of the PetEase brand.
Using UV Coordinate Offsets to Switch Between Screens
The main screen-transition technique did not rely on replacing the material with a separate image for every page. Instead, I first combined several interface screens into a single horizontal texture atlas. I then animated the UV coordinate offset of the phone screen material so that different pages moved into the visible screen area in sequence.
This method works in a similar way to moving a viewing window across an extra-wide canvas. As the UV coordinates shift horizontally, the next interface appears on the device, producing a transition that resembles a real application being swiped from one page to another.
01 / Texture Atlas
Multiple high-fidelity screens were arranged at a consistent size inside one texture, ensuring that every page maintained the same scale within the phone display.
02 / UV Mapping
The UV coordinates of the phone screen were aligned with one page area, allowing the material to display only one interface at a time.
03 / Offset Keyframes
Keyframes were added to the horizontal coordinate of the Mapping node. Each fixed offset moved the next screen into the visible region.
04 / Motion Timing
Different timings were used for screen pauses and transitions, while smooth interpolation created movement that remained clear without feeling abrupt.
Compared with moving multiple screen planes separately, UV offset animation kept every interface attached to the same screen material. This reduced the risk of overlapping geometry, clipping, or alignment errors, and it also made the transition speed easier to control consistently.
The final animation presented several important interface states, including service details, date and time selection, payment, and pet selection. This allowed the main visual experience of the application to be communicated within a short motion sequence.
Video: https://drive.google.com/file/d/1PlsARsMI771oEIB6D2VUZulXKg2HfA_W/view?usp=drive_link
Brand Mockups: Building Consistency Between Digital and Physical Applications
In addition to the application presentation, I completed the full collection of PetEase brand mockups. The purpose of this work was to test whether the logo, colour palette, and typography could remain effective across different sizes, materials, and contexts. The task was therefore more than repeatedly placing the logo onto a selection of objects.
The mockup range covered digital interfaces, packaging, everyday objects, and pet-related products. These applications made it possible to evaluate logo visibility on both light and dark backgrounds, while also testing how orange, dark brown, and neutral colours behaved when used at different scales.
| Mockup Category | Main Applications | Design Purpose |
|---|---|---|
| Digital Product | Application icon, phone interface presentation, and 3D device animation | To evaluate brand recognition and interface consistency on digital screens |
| Packaging and Containers | Shopping bags, bottles, cups, pet food packaging, and related containers | To test logo placement, spacing, and colour adaptation across different structures |
| Printed Materials | Cards, labels, and combinations of brand graphics | To establish repeatable layouts and a clear information hierarchy |
| Pet Products | Collars, pet bowls, bone-shaped objects, and related applications | To create a direct relationship between the visual identity and the pet-service theme |
| Lifestyle Applications | Cushions, fabric-based items, and environmental presentations | To examine the brand system on flexible materials and larger visual surfaces |
| Social Media | Content templates combining pet photography, brand colours, and information layouts | To extend the brand into promotional and online communication contexts |
The purpose of a brand mockup is not to create the illusion that a product has already been manufactured, but to test whether the visual system can function convincingly in realistic media and contexts.
Project Reflection and Conclusion
Looking back at the project, my work developed through four connected levels. I first defined the task logic of the merchant side through the Merchant Management User Flow. I then organised the final high-fidelity screens into a presentable application system. After that, I used Blender and UV coordinate offsets to transform static interfaces into a dynamic presentation. Finally, I tested the visual identity across a complete collection of brand mockups.
Logic Before Decoration
A clear flow determines why interface elements exist and defines the steps users must follow in order to complete a task.
Presentation Is Also Design
Once the high-fidelity prototype is complete, the way the product is explained through mockups, framing, and animation still has a major effect on the final result.
Technology Should Support Experience
UV offset animation was not used to create unnecessary technical complexity. It provided a more stable and controllable method for producing continuous screen transitions.
A Brand Must Be Tested Across Media
A visual system only becomes genuinely flexible when it can adapt to interfaces, packaging, products, and promotional content without losing consistency.
Conclusion
The PetEase project allowed me to connect user-experience structure, interface presentation, 3D motion design, and brand application within one continuous design process. The final outcome did not only show what a pet-service application looked like. It also explained how it could be used, how it could be presented, and how it could remain visually consistent across a wider range of contexts. This was the most important practical outcome of my work on the project.
评论
发表评论