Supercharging your product roadmap with AI-assisted prototyping

Client: PFM Intelligence

Deliverables: Installable prototype; Mobile app design

The challenge

To move fast, you need to build fast. With the possibility of coding your own prototype, the gap between idea and execution is infinitely smaller. But how do you ensure that internal prototyping delivers the ROI and products that contribute to your business growth without risking building the wrong thing? It looks right, but does it grow your business the way it needs to?

For PFM Intelligence Group, who specialize in footfall analytics and visitor counting for retail and commercial real estate, there was a need to develop a product that puts that exact data in their customer’s hands, rather than only visible on extensive desktop dashboards. Wasting no time, PFM coded their own first prototype of what this app should look like. But where to go from there? PFM teamed up with CLEVER°FRANKE to evolve this prototype to be much more: a cross-platform prototype that delivered its value by serving as a live testing environment to develop its products for its employees, and a pitchable product to PFM’s clients. In doing so, PFM and CLEVER°FRANKE focused the entire roadmap and accelerated development with a mature product in a fraction of the time it would normally take.

Value delivered

A self-built prototype using AI provides an app with a good look-and-feel, but it’s generic. Taking a combined tech and design approach, PFM and CLEVER°FRANKE built a highly usable prototype that is fit to serve the business needs. Pulse is a mobile app prototype that serves as a tool giving shopping center managers immediate and real-time access to footfall data and operational insights. The installable, cross-platform mobile application is sophisticated and mature enough to user test, discuss, and hand to stakeholders. This usability, achieved by bringing deep industry knowledge and design expertise together, makes Pulse a decision-making tool in its own right. With a flexible set-up and scalable architecture, the product vision is future-proof. What started as a short-term concept became the foundation for PFM’s product roadmap for the years ahead.

Background

Interviews within PFM, its clients and other stakeholders, combined with analysis of competitor products, led to the foundation of Pulse. Supported by PFM’s product team, we explored preliminary mobile concept designs, each moving in a different direction to evaluate interest, appetite and start thinking about the long term intention and possibilities.

Following that, we worked with PFM to create a unifying concept design that offers their users flexibility to customize. Throughout this process, design and build worked together continuously rather than in separate phases, accelerating the development. This resulted in a real product that PFM could install and test with before the final direction, within a fraction of the time it would take if a traditional approach was used.

Growingmaturitywithprototyping

Ensuring high fidelity from the start and incremental increase in maturity we paired our own design process with AI-assisted engineering, building the app at the same pace as the decisions behind it. Rather than waiting for the design to be fully done before starting to prototype, we combined human craft and expertise with AI technology to achieve faster outcomes of a high quality prototype.

The concept design we developed together didn’t have to wait for a fully-scoped engineering project to prove itself. PFM moved from an open question to a working, installable app that can be used immediately in colleague and client conversations.

Highlevelofdetailandcustomization

Pulse is designed with a level of detail that allows PFM to test it at an elevated level of maturity, including custom examples with its many different clients. Traditional prototypes are typically built to showcase a single, fixed dataset. To achieve a high level of maturity with intricate detail that goes beyond the typical prototype, we centralized responsive design and built a data panel behind the app so that PFM could swap content and data as needed, matching whichever client or data scenario the conversation might call for. Charts and numbers update dynamically, and client names are easily adapted.

Futureproofinterfacearchitecture

The Pulse app is built to support PFM’s vision and future of their platforms. The mobile experience is not just an extension of PFM’s existing comprehensive desktop dashboards, it provides significant value for in-person and on-the-floor conversations for the shopping mall managers with the mall’s shop owners. With clear and concise architecture and design, the Pulse app can grow with PFM’s products and business. The futureproof branding style and interface sets Pulse up for evolution and growth within PFM’s product roadmap.

Builtforflexibledata

The insights that Pulse needs to provide don’t just differ per user, but also vary with each moment of the day. In order to inform different customers with changing needs and timelines, the app needs to be built with flexible data-sets in mind. This means that modularity is a core design principle of the app, including components that can be adapted, and stretch to any configuration or setup.

Appdesign

The app is designed revolving around a three-screen concept. The Pulse screen leads with glanceability: a single number, understandable in under five seconds. Timeline adds context over absolutes: every figure is paired with a comparison, since footfall without a benchmark is meaningless. Building carries the modular system through, designed to grow and reflect each mall’s individual setup.

Pulse

A single number leads the screen using typography, hierarchy, and color to showcase the most important metric, with more detail just a tap away. Glanceability supports the users of the app, shopping mall or retail managers, at any given time of day via quick reassurance or with quick decision making — showing the right data, at the right time, at just a glance. This page also allows the Pulse users to customize the quick statistics to data that’s most important to them, increasing the speed at which they can make informed decisions.

Timeline

In the Timeline view every number comes with a delta, since footfall data needs benchmarking to be useful. Comparisons default to the most relevant match rather than a fixed calendar date, matching a Saturday to a Saturday or Good Friday to Good Friday instead of the same date a year apart. Color marks the moments that cross a set threshold, and an arrow on the main number signals how strong a change is rather than treating every small fluctuation as equally significant. Weather and manually-added notes sit alongside the data, providing users with extra context for a spike or dip without having to guess.

Building

The Building screen is designed to cater for flexibility and to suit all possible spaces any shopping mall might have. The modular design is made up of components that can stretch to any configuration or setup. This empowers PFM to keep working with the Pulse app, as more data becomes available to avoid needing a redesign later. It surfaces tenants, zones, and entrances by search or by list, with current visitor counts attached to each. A “present” mode strips the view down to a single screen built for tenant conversations: one number, one trend line, and one-tap to share it. As tenant mapping and richer data come available, the Building screen is where they'll be added, without changing how the rest of the app works.

Technology

Towards the end of the first sprint, we spent a few hours prototyping to answer a simple question: could we get close enough to a real mobile app to deliver with confidence? We learned we could, so we committed. All design was done by hand in Figma, which remained the source of truth throughout. Alongside it, we wrote specs in Obsidian: how a screen should behave, what a user needs from it, how they move through it. Markdown translates naturally into the context an AI agent can work with.

Using Claude Code we build the prototype out in React Native and Expo. We stayed in control of how everything was structured, still writing code ourselves. Claude took the mundane and repetitive parts off our plate, freeing us to focus on what required judgment. The initial setup we did entirely manually: knowing what runs under the hood matters, even when an agent is doing most of the building.

Technicalloop

In practice the loop looked like this: design in Figma, write the specs ourselves based on our design intent, give Claude instructions. Claude pulled directly from Figma via an MCP connection, combined that with our notes, and built our app feature by feature and screen by screen. Towards the end the lines between design and code started to blur. Sometimes it was faster to iterate in code and sync back to Figma later. These loops will continue to evolve as the tooling and processes mature.

Results

With Pulse, PFM now has a validated direction, a working app ready to test with real clients, and a scoped MVP roadmap with suggestions on product strategy for the coming years. This fast-paced implementation is made possible by AI-assisted engineering at the hands of experts that understand design and code. Combining the usually separate discovery and build phases within this approach, resulted in a much shorter timeline without sacrificing on design or implementation quality.

Pulse is more than an installable, polished and high-fidelity prototype. It gives PFM clarity and equips them to accelerate their product roadmap. PFM has now built and launched the production version of Pulse on iOS and Android, and is actively rolling it out to clients.

<-Back to work overview