A semester-long project into the full product cycle. From initial ideation and user research to mastering Figma for high-fidelity execution. This project refined my design craftsmanship, enabling me to translate complex concepts into a polished, production-ready digital product.
Topic:
A Deep Dive into Design Craftsmanship
From Concept to Craft: Translating User Research into Polished Experiences
I conducted a discovery phase to surface friction points before they reached production. By mapping real-world behaviors through field notes and contextual inquiries, I translated raw user needs into a validated Affinity Bull’s Eye and product logic. This roadmap moved from wireframes to rapid prototypes, using iterative usability and desirability testing to architect a production-ready blueprint.
- Discovery: Contextual Inquiry, Field Notes, Heuristic Evaluation
- Synthesis: Affinity Bull’s Eye, Scenarios, Stakeholder Mapping
- Execution: Storyboarding, Wireframing, Rapid Prototyping
- Validation: Usability & Desirability Testing
Creating interaction that feels intuitive, considered, and emotionally aligned
With the research solidified, I used Figma to build a high-fidelity system focused on instantaneous feedback and technical precision. This meant more than just aesthetics, I structured the information architecture to handle complex data rows within a minimalist framework. By moving through three tiers of modular templates, I refined the "grit" and polish of the UI across every sprint, ensuring the final prototype felt like a production-ready product rather than just a concept.
Balancing order and creativity for expressive user interfaces
This project was about more than just a fresh coat of paint, it was about building a foundation that scales. By turning raw research into a structured system, I was able to transition from fuzzy ideation to a sharp high-fidelity prototype reaching three main goals:
1. Workflow Efficiency: I built a modular design system that cut the time between initial concept and a clickable prototype.
2. Data Hierarchy: I leveraged Figma’s advanced features to organize dense storefront data into a clean, readable layout.
3. Implementation Ready: I closed the gap between "design" and "build" by delivering a blueprint that was technically ready for a developer to pick up.