For each new feature, I followed a consistent approach to ensure the deliverables were unbiased and the process ran smoothly.
Research & Define
• Competitor analysis
• User research
At the agency, we rely on AMP's internal team to prioritize features based on user needs. Our process begins with a brief from the product management (PM) team, where we clarify the problem, conduct competitive research, and gather insights, often consulting friends with relevant workout preferences. Collaborating with PM, we refine and define the feature list.
We also helped shape the art direction for visually-driven features, including photography, iconography, and data visualization, ensuring alignment with AMP’s brand tone of elegance, innovation, and precision.
Design
• Visual design
• Prototype
I collaborated with my mentor to design user flows for key features, such as enabling users to build workouts. This involved supporting actions like creating workouts from the movement library, editing by reordering movements, adjusting sets/reps, and swapping exercises. I outlined flows, defined entry points, and created prototypes to test and present intuitive designs.
For more visual tasks, I shared ideas using references or mockups in After Effects or Principle. After gathering team feedback, I iterated designs and developed high-fidelity prototypes for testing, which guided user experience research (UXR).
Iteration & Validation
• Usability Testing
• User testing
• Discuss the timeline and define the priority
• Developer meeting
I share multiple design options internally to gather feedback and narrow down ideas efficiently before official user experience research (UXR). This approach provides fresh perspectives and improves my designs.
I then work with my manager and the team researcher to plan UXR, preparing high-fidelity prototypes and aligning on the interview script for a smooth process.
We had in-depth discussions with the PM and development team at AMP, prioritizing tickets and addressing implementation details, such as motion output (e.g., coding or video assets).
To ensure feasibility and address technical limitations, we shared our designs with the development team before kickoff. For instance, for a vector animation, we clarified whether it would be easier to build using code, export as a JSON file, or use a looping video.
Deliver
• Update design system
This step involves cleaning up design files to streamline collaboration with developers and the design team.
For developers, I organize the final flow in Figma, export video assets, and document UI transitions with video examples and transition code based on the motion timeline.
For the design team, I componentize reusable UI assets and publish them in the design system, linking flows to public components for easy iteration. I also enhance efficiency by setting up Figma variables, such as linking library colors to themes (e.g., light and dark modes).
To reduce errors and maintain clarity, I separate color tokens (raw values like #0C0C0C = Black 2) from semantic colors (e.g., Text Primary = Black 2), ensuring a robust, adaptable design system aligned with development needs.