Embracing Responsive Design and the Figma Learning Curve - Day 6

Today marked a significant turning point in this project, as I shifted focus and made a key decision about how to proceed with the wireframing process. Reflecting on Day 1, when this journey began with excitement and ambition, and Day 5, where I explored user-centred design through persona creation, I can see how each step has shaped the direction of this MVP. This iterative process has been filled with challenges, insights, and valuable lessons about the art of design.

The Hunt for the Right Template

The day began with an ambitious goal: to find a wireframe template that could elegantly cater to both web and mobile formats. I wanted something that mirrored the needs of real estate investors who juggle between laptops with multiple tabs open and phones on the go.

Despite exploring numerous free options on Figma, I kept running into a common roadblock. Most templates leaned heavily toward either desktop or mobile, rarely offering the flexibility to do both effectively. This struggle highlighted the need for a fresh approach.

Pivoting to Responsive Design

After some deliberation, I decided to embrace responsive design as the foundation for this project.

Why responsive design?
Responsive design allows a single website to adapt dynamically to any device, whether it’s a desktop browser or a smartphone screen. It ensures that users get a seamless experience regardless of their platform.

Here’s why this pivot made sense:

• Streamlined development: A single responsive website eliminates the need to build and maintain separate versions for web and mobile.
• Scalability: Responsive design simplifies adjustments and enhancements as the project evolves.
• Validation-friendly: By focusing on one platform that works everywhere, I can test and refine the MVP without dealing with app store submissions.

For this stage, responsive design feels like the right approach—providing flexibility, speed, and a user-centred experience.

Navigating Figma as a Beginner

Wireframing has always been something I’ve outsourced, so stepping into this role myself has been both intimidating and rewarding. Figma, the tool I chose for this project, has proven to be a powerful ally in this process.

Here’s what I’ve learned so far:

• Templates are invaluable: Figma’s free templates provide a great starting point. While I’m sticking to free options for now, I’ve encountered paid templates that are truly next-level. For anyone serious about design, they’re worth considering.
• A steep but manageable learning curve: As a beginner, every click feels like a small victory. Understanding Figma’s features, shortcuts, and workflows takes time, but the tool’s intuitive design has made the journey smoother.
• Efficiency through features: From its drag-and-drop simplicity to real-time collaboration, Figma has quickly become a trusted resource. The ability to iterate and experiment freely is a game-changer.

Lessons from Today

1. Adaptability is key: The pivot to responsive design wasn’t planned, but it’s clearly the best path forward. Sometimes the right answer emerges through trial and error.
2. The value of tools: While tools like Figma make design more accessible, they also highlight the importance of patience and persistence when learning new skills.
3. Focus on the user: Real estate investors will likely use this calculator on multiple devices. Creating a responsive design ensures their needs remain at the centre of this project.

Looking Ahead

Tomorrow, I’ll focus on developing the underlying structure of the MVP, building on the momentum from Day 1’s ambitious goals and Day 5’s user-centred design insights. My goal is to start building out the wireframe in earnest, balancing functionality with simplicity. This project has taught me that growth often comes from stepping outside your comfort zone, and I’m excited to see where this journey takes me.

Stay tuned as the process unfolds, and thank you for following along as I navigate these new challenges and opportunities.