Hi-Fi IxD Prototyping Projects
- TJ Nelson
- Apr 4
- 3 min read
Updated: Apr 7
Overview
During my time at InMoment (2015-2019), I led a series of design initiatives centered on improving user experience through high-fidelity prototypes and motion design. Each project aimed to streamline critical workflows while demonstrating the power of thoughtful interaction design. I utilized a range of prototyping tools—Principle, Framer Classic, and Atomic—to visualize and validate these new flows.
Below is an overview of each initiative and the core improvements it introduced.
Updating Password Workflow
Users who entered incorrect login credentials often encountered a confusing and cumbersome password-reset process. Our goal was to create a more intuitive experience by providing clear guidance, animated feedback on password strength, and flexible reset options (via both email and phone).
Error States and Guidance: Immediately surface an error message for incorrect passwords and offer a prominent reset button.
Magic Link Reset: Give users the option to receive a “magic link” via text or email to seamlessly verify their identity.
Motion Design: Integrate a password-strength meter that animates dynamically as the user types, increasing clarity and motivation.
Tool: Created in Framer Classic, which made it easy to define rich interactions and quickly iterate on design ideas.
This flow reduced friction by guiding users step by step—instilling confidence through clear feedback and making the reset process faster and more transparent.
Onboarding Workflow
New users often needed a concise but engaging way to understand the key value propositions of the application. We needed an onboarding experience that was visually appealing, quick to walk through, and showcased the product’s main benefits.
Welcome Screens: Welcomed users with a friendly message and a short tour through top features.
Interactive Value Propositions: Used simple animations and transitions to illustrate how each feature could solve a specific user need.
Tool: Built in Framer Classic, leveraging its timeline-based animation features for smooth transitions and micro-interactions.
By demonstrating core features in a playful, interactive sequence, this onboarding flow boosted user engagement and improved first-time adoption rates.
Integrations Redesign
Our application offered numerous third-party integrations, but users struggled to locate the one they needed and understand how to connect it. The challenge was to bring clarity to the integrations library and streamline the connection flow.
Clear Organization and Filtering: Introduced robust filtering and search capabilities, making it simple to find the right integration quickly.
Integration Details: Created dedicated detail pages highlighting the integration’s key benefits and setup steps.
Connection Flow: Offered a guided, step-by-step process to authenticate and connect each integration, reducing confusion and errors.
The interface significantly decreased the time users spent searching for and activating the integrations they needed. It also cut down on support requests related to integration setup.
Reporting Filters
Users often needed customized dashboards and reports but lacked a simple way to create or reuse filters. The existing setup was clunky, requiring multiple steps to fine-tune search parameters.
Preset Filters: Allowed users to quickly select and apply frequently used filter sets.
Create & Edit Flow: Gave users the option to create new presets, add or remove filter criteria, and save them for future use.
Tool: Built in Atomic, utilizing interactive states to prototype how filters would be added, adjusted, and saved.
By streamlining the filter creation process, we enabled users to generate and manage sophisticated reporting dashboards in fewer clicks, boosting productivity and data-driven decision making.
Modern Survey Design
We wanted to redesign the survey experience so users could provide detailed feedback seamlessly. Many surveys were bland and uninspiring, resulting in low response rates and shallow feedback.
Dynamic Questioning: Based on each user’s written feedback (e.g., “It was good, but a few things were frustrating.”), the survey prompted additional clarifying questions to capture deeper insights.
Feedback Strength Meter: An animated strength indicator that increased as the user added more detail, encouraging richer responses.
File Upload Interaction: Allowed users to attach screenshots or other files for more context.
Tool: Prototyped in Framer Classic to showcase smooth micro-interactions and branching user flows.
By making the survey experience more interactive and responsive, we gathered higher-quality feedback. Users felt heard and were more inclined to share valuable insights and examples.
Conclusion
Each of these design projects underscores the value of combining strategic interaction design with polished motion prototypes. Whether simplifying a password-reset flow or creating a dynamic survey, high-fidelity motion design helps users quickly understand new concepts and feel confident navigating the product. Through Principle, Framer Classic, and Atomic, I was able to rapidly prototype and iterate on solutions, ensuring each redesign aligned with real user needs and delivered a frictionless experience.
These projects collectively demonstrate how thoughtful animations, clear user guidance, and tailored features can significantly elevate overall usability and satisfaction.
If you have any questions about these redesigns—or want to discuss the process in more depth—I’d be happy to dive deeper into any of these case studies.
Comentários