How Framer Enhanced My Prototyping Experience for our Flutter App project
In the world of development, finding a tool that streamlines your process can be a game-changer. This was especially true when I embarked on the redesign of a Flutter mobile application I built for Deutsche Bank. This experience not only sharpened my skills but also gave me a deep appreciation for the prototyping tool, Framer. I wanted to share a few takeaways from my own experience to help see how Framer can enhance the project planning process.
The Flow - Deutsche Bank app, was a digital complement to their print magazine, flow. With 4,000 active users gain in 18 months after the apps launch, the app's growth necessitated significant updates. These updates included new sections for whitepapers, videos, and podcasts, along with a branding overhaul to better align with their online version of flow. To ensure smooth development and clear communication with the client, prototyping was essential.
Familiarity with Framer
When we built the initial version of the app we had used Facebook's Origami prototyping application to create the interactive prototype that the client could view. My experience with Origami I found was not as intuitive as I had light, and felt that it required a few too many extra steps to present the final prototype to a client.
Framers user interface feels very familiar if you have already use sketch or Adobe XD. Where framer has a leg up on these former UX design tools is its ability to create layouts that mimic flex box type behaviour. It makes it very easy to lay out elements and position them horizontally or vertically while applying consistent spacing. Framers final shining moment is its ability to incorporate JavaScript, react code components and make external API requests to data sources which you can then use in your own prototype. Features and functionalities made this and no-brainer choice for this project.
Prototyping with Framer
Despite Framers recent shift in focus towards website creation, the tool's robust prototyping features remained intact. After a brief learning curve to navigate the updated interface, working alongside a UX designer we successfully created a prototype that showcased all of the requested features. When it came to sharing the final prototype with the client, as well as simply sharing a link with a client which they could view on the device, the standout feature was the responsiveness of Framer's art boards. This allowed clients to view the prototype on their own devices at the correct scale, ensuring an accurate representation of what the final product would look like.
Working closely with a UX designer who utilized the material design system, we were able to create a cohesive theme for the app. This common language between design and development teams proved crucial for the project's success, ensuring seamless communication and efficient workflow.
My experience with Framer during the Deutsche Bank project reinforced the importance of choosing the right prototyping tool. Framer's user-friendly interface, responsive design capabilities, and seamless integration with React components made it an invaluable asset. For developers looking to enhance their prototyping process, Framer is a tool worth considering. As I continue my journey as a full-stack developer, I'm excited to be able to add this to my toolbox for creating well designed and planned products.