Time-based UI's are occasionally overlooked in UX design strategy, but stopwatch-styled timers are common features in exercise, cooking, and productivity apps. Consider the apps you use that include a temporal aspect of tasks and how you might incorporate a stopwatch timer into the app prototypes you are designing.

allows designers to create functioning stopwatch timers by using formulas, detect functions, and variables. With these powerful tools, ProtoPie is able to read and react to changes in data. While it may seem complicated, exploring these skills will prove that ProtoPie is a powerful tool for your data (and time) oriented designs!

Automate the centiseconds using a variable

Increase the second using detect and condition

Increase the minute using detect and condition

In the end, you’ll be able to make something like this!

In the assets, you'll notice that the interactions for the 

 have already been created. This is made with the 

 feature. If you want to learn how to make a button based on Condition, please check 

How to Make a Toggle Button with Condition

1. Automate the centiseconds using a variable

　1. You are going to start working on the last two digits (centiseconds) and making them start and stop with the button. Create a new 

. Leave the variable's defaults so it will remain as a number and starting at 

. Drag out your debugger onto your preview screen so you can test your work.

 variable. Testing your start and stop button in the preview, you'll notice the numbers do continuously go up and will stop with the button.

. To do this, add a new trigger and select 

　5. Create a condition, that reads when the 

. It is very hard to notice this delay, but it is important for later on. Using your debugger, you can see that the value goes to 99 and then restarts at 0.

　6. Now, we want to assign this value to the text. Under the detect trigger, add a 

. This formula ensures that there are two digits in the centiseconds by inserting a 0 with single-digit numbers.

 Left-pad a text with another text, to a specific length.

2. Increase the seconds based on the centiseconds

　1. When the centiseconds reach 99, we want the seconds to increase by 1. To do this, add a variable and rename it 

. Drag the debugger onto your preview scene.

 under the Condition we just created and link it to the 

, the seconds will increase by 1. Change the start delay to 0.01. Do not make this repeat.

　3. Assign the variable to the text by adding a 

 and will add a 0 to all single-digit numbers.

　4. Make sure to change the start delay to 0.01 and that the Text response for the 

 response. The order of the interaction pieces is also important. Make sure that the 

 response. You do this because you want ProtoPie to trigger the 

3. Increase the minutes based on the seconds

This means that when the seconds reach 59, it will delay by 1 second before restarting to 0.

　3. Along with resetting the variable, you need to reset the text. Add another 

　4. To link the minute variable to text, create a variable and rename it "

 response and link it to the minute variable you just created. The formula will be 

 response under the assign, link it to the 

　6. In the preview window, when the seconds reach 

 response linked to the centisecond variable.

 (centisecond, second, minute) followed by 

 reset responses each linked to these three variables. Create 

 reset responses each linked to the text of these three variables.

　3. You also need to reset the start/stop button's to their original state. Select the 

 layer and create a reset response. Then, create a reset response with the 

Congratulations! Your stopwatch timer is ready

You explored many advanced techniques in this tutorial including using 

! Now that you've learned these techniques, consider how you can incorporate other strategies to make stopwatch timers for your unique designs!

Ready to bring your ideas to life? Download ProtoPie now to start building your next prototype, and don’t forget to share your amazing work on LinkedIn, X, or Instagram with #MadeWithProtoPie. We can't wait to see what you create!

In this advanced tutorial, you'll prototype a stopwatch-styled timer while exploring how formulas, detect functions, and variables can manipulate data.

Create a Stopwatch Timer using Formulas and Variables

Not all prototypes are created equal. Take low-fidelity versus high-fidelity prototypes, for example. While they’re both useful in their own ways, that doesn’t mean to say that they look or feel the same—or that they’re both equally valuable throughout all stages of the product development process.

In this post, we will explore the concept of fidelity in prototyping, highlighting the main differences between low-fidelity and high-fidelity prototypes and discussing when to use each type.

In prototyping, "fidelity" refers to the level of detail, accuracy, and realism of a prototype compared to the final product. Fidelity typically varies across three main levels: 

Often sketched or created with basic tools (e.g., wireframes).

Focus on basic structure and functionality, avoiding design details.

Useful for early-stage feedback and brainstorming.

Includes more accurate layouts, some interactivity, and basic UI elements.

Often created with digital prototyping tools, allowing for limited interaction.

Balances realism with flexibility, allowing quick iterations.

Useful for testing user flows and gaining feedback on specific interactions.

Highly detailed, with realistic UI elements, content, and interaction.

Mimics the final product as closely as possible, sometimes including animations and transitions.

Allows for accurate user testing and demonstration of final design.

Useful for validating design, usability, and functionality before development.

The choice of fidelity level depends on the design stage, feedback goals, and available resources. Low-fidelity prototypes are typically faster to create and more flexible, while high-fidelity prototypes are more similar to the final product but require more time and resources. In this article, we will explore the differences between these two types of prototypes.

Low-fidelity prototyping is a quick, simple way of evolving an initial idea or concept into a somewhat more tangible representation of your final product. The goal of a low-fidelity prototype is simply to outline the flow and to check the usefulness and usability of your proposed functionality. Lo-fi prototypes can either be made digitally or on paper. Examples include:

The key benefits of low-fidelity prototypes are that they are fast, easy, and affordable to create. It’s easy to make changes and test new iterations; anyone can produce them, and they encourage design thinking since the prototypes are clearly not finalized.

The downsides of low-fidelity prototypes are that they have limited interactivity, lack realism, are hard to use for user feedback, are sometimes too basic to reflect the user experience of the finished product, and can oversimplify complex issues. Most crucially, they require users to make their own assumptions when imagining how they would use the product (and what this experience will feel like.)

You want to quickly learn the scale of your project;

You want to test the idea first before you start development;

You keep the idea within the product team.

Let’s briefly examine the two main types of lo-fi prototypes: paper and click-through.

Paper prototypes might be the easiest, simplest way to create a lo-fi prototype—but that doesn’t mean to say that they aren’t valuable. Paper prototypes are great for fleshing out concepts while they’re still in their infancy. You can quickly scribble down a few sketches, see how they look, and get feedback. If something needs to be changed, you can literally go back to the drawing board.

Paper prototypes are quick to create and inexpensive, and some designers might even feel more creative when using pencil and paper. They’re also pretty rough and ready—meaning you can generally elicit more honest feedback from people who might otherwise feel hesitant about criticizing a fully formed digital prototype.

That said, paper prototypes aren’t suitable for the later stages of development. You can’t accurately recreate the digital experience on paper—so it certainly has its limitations. Plus, for many design teams, paper prototypes might just feel slightly unnecessary. If you’re going to be creating a digital prototype anyway, why even bother making a paper version?

Click-through prototypes take paper prototypes to the next level, allowing users to test the user flow in greater detail. In short, click-through prototyping tools let you upload photographs of paper prototypes—or digitally recreate them using interactive software widgets—into a UX design application.

For each screen the user sees, you can create multiple hotspots to redirect them to other screens. Imagine your first screen is a log-in page, but you want to demonstrate what happens once a user logs in. By clicking on the ‘login now’ button, the click-through prototype will take you to the next logical step/screen that the user would see.

Of course, click-through prototypes are still a long way off the final product. However, they do make up for one of the major drawbacks of paper prototyping: not being able to experience the user flow. They are, therefore, another useful lo-fi prototyping model that can be used in the early stages of product design.

If you want to make your own click-through prototypes, check out tools like 

High-fidelity prototypes are more advanced, with their aesthetics and functions far closer to that of the final product. You’ll typically create high-fidelity prototypes further along in the process once a team has a firm grasp of what they want the finished product to embody, using a tool like 

 to help you bring your vision to life. High-fidelity prototypes are generally used for 

 with real users or to get final design approval from stakeholders. Examples of high-fidelity prototypes include

The key benefits of high-fidelity prototypes are that they provide greater insight into what the end product will look like, are instrumental in testing and validating individual design decisions, and are great for getting buy-in from clients and stakeholders.

The downsides of high-fidelity prototypes are that they take longer to create, are costlier, and users may mistake the prototype for the finished product and form biases.

You want to start development before you decide on the “final” design;

You have a lo-fi that is tested and acceptable;

You want to take your lo-fi prototype to the next level;

You want to pitch the idea to a non-technical audience.

Let’s now dive into digital and coded prototypes in further detail.

If you’re creating a digital product/experience, then you’re eventually going to have to create a digital prototype. There are no two ways to do it. That’s where digital prototyping software, such as 

, comes in. It allows designers to recreate the end product in detail, producing aesthetically pleasing, interactive prototypes that are close representations of the final user interface.

Designers can demonstrate what their experience will look like and how it will feel, which provides product teams with invaluable feedback before they go ahead and launch their final product. However, they also take a fair amount of time and energy to create. So, for that reason, many product teams prefer quicker and easier alternatives (such as paper prototyping) earlier on throughout the design process.

Coded prototypes are the closest version to the final product that designers will produce, both in terms of how they look and behave. This means they’re great if you want to gather any last-user feedback before bringing a product to market.

However, not everybody can produce coded prototypes. To do so, you first need to code—which means that many designers cannot create these hi-fi, complex prototypes without asking for engineering help.

Making a hi-fi prototype isn’t as complicated as you might think. In fact, these days, you don’t even need to know how to code.

 that empowers designers to build highly interactive prototypes for all digital products. It integrates seamlessly with popular design tools like 

, allowing you to import all existing designs in just a few clicks.

With a smooth design workflow and a unique conceptual model that harnesses powerful 

, ProtoPie opens up limitless possibilities for crafting beautiful, functional prototypes—regardless of your skill level or experience.

, our free learning platform, and gain access to a wealth of resources crafted to elevate your prototyping skills.

ProtoPie offers high-fidelity prototyping with a low barrier to entry. Ready to get started? 

Explore the key differences between low-fidelity and high-fidelity prototypes to determine which best suits your design needs.

Low-Fidelity vs. High-Fidelity Prototyping: Key Differences Explained

The holiday season is here, and so are our best deals of the year! Whether you're new or a loyal ProtoPie user, this Black Friday, you can save big with our

 exclusive discounts of up to 40% on yearly plans.

New subscriber: up to 40% off on yearly plans!

If you’re new to ProtoPie, we’re offering 

 on our yearly plans. Here’s what you need to know:

 at checkout to get 20% off our yearly Basic plan.

If you’re on a monthly plan and want to switch to a yearly plan, you can enjoy this discount too! Simply upgrade to a yearly plan—pay full price at checkout, and we’ll 

give you a cashback equivalent to the discount within 5 working days

. Once applied, it will take another few working days until you receive the cashback.

Black Friday only comes once a year, and these deals are available for a 

—until November 30th. Are you ready to start creating interactive prototypes with ProtoPie? Now’s your chance to grab these offers!

Save big this Black Friday with our exclusive discounts of up to 40% on yearly plans.

ProtoPie’s 2024 Black Friday Guide

Granstudio: A pioneer in automotive design

Granstudio’s approach to HMI design: Blending physical and digital expertise

Innovating the future of HMI design with ProtoPie

In today’s rapidly evolving automotive landscape, the demand for seamless human-machine interface (HMI) experiences has never been more pressing. 

, an international creative consultancy headquartered in Italy, is at the forefront of this revolution, harnessing the power of XR (extended reality) prototyping to create intuitive and cutting-edge automotive designs.

Granstudio’s HMI Team members Lukasz Czekanowski, Granstudio Junior Partner, and Klaudia Warmus, Software Developer & Project Team Member, shared Granstudio’s insights during our 

 on “Transforming HMI: XR Prototyping to Design Complete & Seamless Car Experiences.”

This article takes an in-depth look at Granstudio’s approach to HMI design, the tools it utilizes, how 

 fits into its whole process, and how Granstudio’s team's innovative methods are reshaping the future of automotive experiences.

 is a diverse team of over 65 experts spanning multiple disciplines in mobility design. Located in the heart of the Italian automotive industry, with an additional branch in Belgium, the company combines physical and digital expertise to offer comprehensive design solutions. Their projects range from designing cars and trucks to more forward-thinking mobility concepts, all driven by their commitment to creating human-centric, context-aware experiences.

In the livestream, Lukasz highlighted the breadth of Granstudio’s design spectrum, emphasizing the seamless integration of physical and digital design elements in their workflow. Granstudio’s unique transdisciplinary approach allows them to connect different aspects of mobility design, offering a holistic experience that goes beyond traditional automotive design boundaries.

Granstudio has a unique approach to creating seamless and intuitive Human-Machine Interaction (HMI). Their work is structured around three main design disciplines centered on a design-driven methodology:

This layered process allows the design team to simulate, test, and refine interactions, ensuring that the HMI aligns perfectly with the vehicle’s overall design.

Crafting multi-dimensional car experiences

At the heart of Granstudio's interaction design process is a transdisciplinary approach that allows them to create multi-dimensional car experiences. Their UX-driven methodology covers the entire design process, from initial user research to the final stages of development, adapting to the specific needs of each project. This flexibility enables them to deliver HMI systems that are functional and unique, ensuring that each project stands out in its own right.

One of Granstudio’s key strengths lies in their ability to merge physical and digital expertise, also known as the ‘phygital’ approach. This is especially evident in their prototyping process, combining physical prototypes with digital tools to create a comprehensive design experience. Although digital methods have not always been the go-to in automotive design, Granstudio is reimagining these techniques to fit their needs, particularly in prototyping.

One of the standout innovations Granstudio has developed is their proprietary mixed reality tool, 

. Powered by over 25 different engines, DigiPHY integrates physical and digital elements into an immersive design platform, capable of adapting to any vehicle layout—from cars and buses to trucks and agricultural vehicles.

According to Lukasz, DigiPHY provides an unparalleled foundation for testing high-resolution prototypes, aligning virtual simulations with physical models. The tool allows designers to experience and interact with a digital representation of the vehicle in real time, providing instant feedback on design elements.

This fusion of digital and physical design is a key differentiator for Granstudio. It allows their team to explore the full potential of HMI design, blending the best of both worlds to create seamless, context-aware experiences for drivers and passengers alike.

Granstudio's HMI workflow is built on three main components: physical prototypes, interactive VR, and digital prototypes. ProtoPie plays a significant role in the digital prototyping stage, allowing the team to refine user interactions and test behaviors in a real-time environment.

Physical prototypes are used to simulate and verify ergonomics, ensuring that every interaction feels natural. ProtoPie aids in this by supporting real-time interactions, so Granstudio can create prototypes that closely mimic the final experience. This allows them to assess key user interface sections, including material configurations, embedded lighting, and overall feel, ensuring that digital design aligns with physical elements.

2. Interactive VR for context-aware design

Interactive VR is essential for evaluating the user experience in various contexts. With ProtoPie, Granstudio can simulate how users interact with HMI systems in different scenarios, such as traffic conditions, weather changes, or different times of the day. This context-aware design approach ensures that Granstudio’s prototypes are robust, flexible, and tested in various environments.

3. Digital prototyping and dynamic interactions

ProtoPie truly shines when it comes to digital prototyping. Granstudio uses ProtoPie to build adaptive, responsive interfaces that adjust to various user inputs and settings. For instance, ProtoPie allows them to design interactions that adjust based on the active user profile, making the experience more personalized and reducing potential distractions for drivers. This flexibility is key in their HMI design process, ensuring their prototypes are dynamic and user-friendly.

ProtoPie provides several features that have transformed Granstudio’s design workflow, making it more efficient and powerful.

1. Triggers and responses for interaction design

 are two of the most frequently used functions in ProtoPie. They allow the team to create interactive elements easily, simulating how users interact with the interface.

2. Formulas and variables for enhanced realism

, on the other hand, allow Granstudio to track and adapt to real-time data. These features make it possible to create dynamic prototypes that adapt to users' needs and behaviors, ensuring that the HMI design is intuitive and functional.

As voice technology becomes more critical in modern vehicles, ProtoPie allows Granstudio to simulate 

 in their prototypes. This feature is essential for testing hands-free interactions, helping to improve both driver safety and convenience. The ability to prototype voice interactions gives Granstudio a valuable edge in designing forward-thinking HMI systems.

4. ProtoPie Cloud for sharing & collaboration

ProtoPie’s cloud-based features make collaboration seamless within the Granstudio team. Using 

, they can share prototypes effortlessly, gather feedback in real time, and ensure alignment across various stakeholders. The team can quickly iterate on feedback, improving the overall workflow speed and efficiency.

, which allows the team to test prototypes on actual devices without extensive hardware. They can check the feel of interactions, adjust timing and animations, and ensure that everything runs smoothly across various devices. This functionality is especially useful when Granstudio connects multiple screens or integrates physical components, ensuring every element syncs.

6. ProtoPie Connect for integration with external devices

ProtoPie’s ability to connect with external devices is another crucial feature for Granstudio. 

 allows the team to integrate microcontrollers and other hardware components into their prototypes, testing physical interactions alongside digital interfaces. This enables them to simulate real-world conditions and ensure their prototypes accurately represent how users interact with the vehicle's systems.

For example, Granstudio can use ProtoPie to move widgets between the dashboard’s display and other in-car screens, ensuring that all devices are synchronized. This level of connectivity and testing allows the team to simulate real-world interactions and refine the HMI design in a comprehensive, integrated environment.

Granstudio’s HMI design process blends physical and digital tools to enable real-time testing and refinement. Tools like ProtoPie, DigiPHY, and interactive VR simulations are central to this workflow, allowing the team to iterate at every stage of the design process.

ProtoPie plays a key role in prototyping and refining HMI designs. It provides the flexibility and efficiency to create seamless, intuitive user experiences while enabling real-time testing and interaction.

ProtoPie also allows Granstudio’s team to work seamlessly across various tools like 

. This adaptability makes ProtoPie an essential part of Granstudio’s toolkit, enabling the team to quickly transition from concept to prototype.

Granstudio’s approach to HMI design blends physical and digital elements to push the boundaries of 

. Using tools like ProtoPie and XR prototyping, they create intuitive, context-aware interfaces that balance functionality and aesthetics.

By focusing on user-centered design and constantly refining their process, Granstudio consistently delivers HMI systems that enhance the driving experience, making it more immersive and intuitive for both drivers and passengers.

Q: Can you talk about the challenges of linking all these prototype environments and technologies together?

Yes, that was the biggest challenges—merging everything together. In our studio, we gathered together designers and software developers to tackle this. It’s about overlaps and how different disciplines work together. The major challenge was how to combine these elements and create a unified environment.

ProtoPie made this process much easier with its connectivity, which helped us to integrate it with VR environments. We had already developed digital simulations within our team, but what was missing was the interface integration—how everything could communicate and influence each other. ProtoPie helped us solve that issue, enabling seamless interaction between different elements.

Now, we use this system for demos and user testing, and it's efficient enough to provide valuable insights throughout the design process. So, ProtoPie's connectivity was crucial in making this integration possible.

Q: What are the major trends you're seeing in the future of HMI and XR prototyping for the automotive industry?

From a design perspective, one of the main trends we see in XR prototyping for HMI design is integrating various tools into a single environment. This enables designers to experience their designs as close to reality as possible, recreating a full in-cabin experience and truly immersing themselves in the design process.

This approach helps reduce costs and time to market by allowing multiple iterative design loops, testing, and prototyping. Designers are moving beyond testing on just two screens; the future involves integrating virtual and physical environments. This allows designers to experience their work firsthand, which is a major shift we’re working on here at Granstudio.

Q: Have you ever tried to use real signals from a car with a native Android automotive system?

Actually, no, we haven’t done that yet, but we know it’s possible. For our prototyping, we don’t use real vehicle signals because we have our own platform that simulates everything. Our approach focuses on simulation, which also allows us to compare different cars during benchmarking.

We’re aware of the capability, and we aren’t ruling out the possibility of using real signals in the future. For now, we primarily use ProtoPie for simulations.

Q: Do you see the web technology becoming stronger and more important for in-car HMI development?

Yes, web technologies are becoming more important in in-car HMI development due to their cross-platform compatibility, ease of updates, cloud integration, and faster development time. They also offer a more familiar user experience for drivers, making them increasingly relevant for future systems. Additionally, web-based HMIs allow for seamless over-the-air updates, which can enhance safety and keep interfaces current without needing hardware changes. As vehicles become more connected, leveraging these technologies will be key to providing personalized, real-time services.

Q: Do you see the possibility to bridge the gap between prototyping to development in the next years? There are tools that are code-free and already compile to the target.

Of course, we are exploring the possibilities of integrating development solutions as well. We are fully aware of the tools available on the design and development market, including those that can compile directly to the target platform. However, for greater flexibility and fewer creative constraints, we prefer to first prototype original and unique designs, which we then hand over to our developers to transform into the final product. Depending on the specific needs, we choose the best tools for development, although we find code-free solutions for final HMI to be more limited and constrained in many aspects.

Q: In the context of transitioning to automotive HMI design, is it necessary to learn about the engineering aspects and ergonomic science?

The ergonomic aspects are important because HMI design is about the relation between human and interfaces. Designers must prioritize driver safety and minimize distrractions. Ergonomic principles guides the placement of controls, and the overall layout of the visuals elements to ensure that drivers can interact with the system safetly. Besides, engineering knowledge can be useful, because HMI designers need to be aware of the contraints imposed by hardware and software. This knowledge ensures that designs are feasible.

Q: Are there any starting points to start learning HMI design? from other disciplines?

HMI is a transdisciplinary field and there are several important starting points to build a solid competence in this field, like for example principles of UX Design, Graphic Design (e.g. composition, typography and color theory), Human Factors and Cognitive Psychology.

Q: How do you transition from being a UI/UX designer to an HMI designer?

I don’t think it’s that far of a transition. First, it's important to note that you don’t necessarily need to be a UI or UX designer to move into HMI design. You could come from various design backgrounds. However, what’s crucial is your approach. HMI design still focuses on the human user and interaction, and you’ll work a lot with hierarchies and interconnections between different elements.

In our studio, we don’t view HMI as just content on a screen. It’s a broader, more immersive interface that surrounds the user and even extends beyond the car in automotive HMI design. While UX and UI are good foundations, you also need an understanding of ergonomics, visual hierarchy, and readability, much like in other design disciplines.

However, automotive HMI introduces a more dynamic context. The main design principles shift to focus on safety and minimizing driver distraction, which are different from designing for personal devices. So, transitioning requires learning the specific context in which HMI interfaces operate, but overall, the shift isn’t too drastic, just different in some aspects.

ProtoPie is pivotal in Granstudio’s design process, offering a powerful and flexible platform for creating dynamic, responsive HMI prototypes. By enabling real-time interaction testing, integrating with external devices, and supporting advanced features like voice commands, ProtoPie fits seamlessly into Granstudio’s workflow.

With ProtoPie, Granstudio can push the boundaries of automotive HMI design, creating the seamless car experiences of the future.

Learn how Granstudio, a pioneer in automotive design, uses ProtoPie for HMI & XR prototyping.

Granstudio Transforms Automotive HMI with XR Prototyping

Dropdown menus are an essential selector element because they condense lists into a menu that can easily expand and contract. When the menu is activated with a click, a "drop-down" displays the list of values until the user selects their choice, and the menu returns to show that single item.

Retail sites often use dropdown menus to organize lists like calendar dates or size selections to deliver a clean interface and easy usability for users.

 will help you achieve a faster workflow for creating dropdown menus using 

 that reduce repetitive tasks. ProtoPie also uses Send and Receive functions to seamlessly share information between inputs. Have fun!

Step 3. Display the selected value in the text field using Send and Receive

Step 4. Enable the menu to expand and collapse by setting up a conditional interaction

Step 5. Make the menu disappear on selection

In the end, you’ll be able to make something like this👇

1. To start, delete list items two and three because you are going to be creating and using 

. Components are saved layers and interactions that you can reuse. They save you from doing repetitive work and accelerate your prototyping.

 remaining, select and convert it to a component. The layer's icon will turn from a grey container icon into an aqua-colored component icon.

ProtoPie Blog

ProtoPie’s 2024 Black Friday Guide

Latest posts

Create a Stopwatch Timer using Formulas and Variables

Low-Fidelity vs. High-Fidelity Prototyping: Key Differences Explained

Granstudio Transforms Automotive HMI with XR Prototyping

How to Prototype a Dropdown Menu with Components

ProtoPie vs. Figma: Which Tool is Better for Advanced Prototyping?

How to Use QR Code Interactions in Your Prototypes

What’s New in ProtoPie Genie 2.0? Camera, Voice, Web Embeds, and More

How to Build Interactive Design Systems with ProtoPie and Figma

Lesson 2: How to Use the Handoff Feature

Dynamic Prototyping with ProtoPie Connect: Features, Use Cases, and More

What’s New? Optimized Cloud Storage Experience

ProtoPie Wins 2024 UX Design Award in Product Category

How to Create a Looping Scroll Carousel for Web

How to Design a Circular Slider with Conditionals