Paper to pixels – taking an app from a low- to high-fidelity prototype
Creating an app from start to finish is no easy task. It requires thoughtful planning, strategic decisions, and a deep understanding of both the app’s structure and the needs of its audience—well before any screens are designed. That’s exactly the process I followed over the past several weeks as I worked to develop a companion app for Newtown, CT’s municipal website.
The groundwork—detailed in previous blog posts and in the linked documentation—laid the foundation for what this app needed to be. My research into user behavior, municipal service needs, and best practices in app architecture allowed me to define a clear direction. Using a low-fidelity prototype as my starting point, and iterating based on feedback from early user testing, I transitioned into creating a high-fidelity prototype using Figma.
There are a number of prototyping tools available, including Adobe XD and InVision, but I chose Figma for both practical and professional reasons. Not only is it the tool I’m most comfortable working in, but it’s also widely adopted as the industry standard for UI/UX design. Its component-based system supports consistency throughout the interface and streamlines the workflow, especially when iterating across multiple screens and user flows.
When comparing the low-fidelity wireframes to the high-fidelity ones, the overall structure remains largely the same. That said, the updated version reflects several crucial refinements based on user testing. These changes weren’t simply cosmetic—they represent deeper insights into how real users might interact with the app and what features they actually prioritize.
For instance, one important addition was expanded functionality for tax payments. During user testing, I realized that some of the flows I had initially designed didn’t align with what residents would naturally want to do within the app. By enhancing the payment process and simplifying the navigation to those pages, I brought the app closer to solving a real, everyday need.
Tax payment user flow as seen in the high-fidelity prototype.
Another significant change came to the “Happenings” section of the app. Initially, I focused this around a static “things to do” list. But based on feedback and reflection, I knew the experience had to be more dynamic. I redesigned this section to include an interactive calendar, making it easier for users to explore local events and plan ahead in an engaging, accessible way.
Ultimately, I believe the high-fidelity prototype I created brings real value to the residents of Newtown. It provides them with a centralized, easy-to-use hub for accessing important information—whether they’re at home, at work, or on the go. I would be excited to test the app on a larger scale and explore further development opportunities to bring it closer to a fully realized public resource.
This project reinforced just how essential the ideation, prototyping, and testing phases are in the design thinking process. Taking the time to understand your users, build thoughtful flows, and revise as needed can be the difference between a good app and a great one. Design isn't just about aesthetics—it’s about functionality, empathy, and problem-solving. And that's what this app was built to do.
I encourage you to take a look at the prototype and the full process document below. Additionally, I created a video walking you through the app which can be viewed at the top of the page.
Hi! My name is Peyton McKenzie.
I am a professional graphic designer, photographer and content creator.
I encourage you to explore my portfolio to get a better idea of the work I create. If you are interested in working with me or have inquiries of any kind, don’t hesitate to reach out over email.
