How to Use Design Mockup Tools to Improve Your Project Workflows

Contributed by Alex Verdurmen, Managing Director Hifyre

Hifyre
Hifyre
4 min readJul 17, 2018

--

Every developer knows there is nothing more frustrating than completing a project only to have to revisit it when the interface designers change one little detail and force a major change to the code base. Flinto and other UX/UI design mockup tools make this frustration negligible, while optimizing the developer’s and designer’s time on the project.

So how does Flinto work?

It’s a way for designers and usability experts to easily mock up and demonstrate preliminary functions of an app. The designs created using Flinto can be very basic and wireframe based, or fully developed art. Either way, the tool easily allows companies to demonstrate interactions in the app beyond just the initial screens.

Operationally, we use our prototyping software early on in the development phase between planning and execution. It’s an excellent tool that gives life to all of the discovery, planning, and business objective mapping that’s gone into the early phase of developing a product. By approaching our projects this way, we quickly bring life to the application being built and validate assumptions we’ve made throughout the initial phases. Equally important as how it’s used, Flinto allows us to prototype a project without investing a significant amount of time in developing an actual product and ultimately wasting time and money in the long run going through a trial and error process. As a result of the utility of design mockup tools, we are gradually introducing this step into every one of our incoming projects.

How do design mockup tools make my job as a developer easier?

The biggest value to a tool like Flinto is that it makes things easier for everyone who’s involved in the product development process, from ideation to execution.

For the client, it allows us to sell in ideas that are tactile. They say a picture is worth 1000 words, and when we’re proposing functionality and specific user flows — having something to touch, feel, and actually interact with goes infinitely further then trying to discuss and demonstrate the idea through static screens.

For the design team, tools like Flinto allow them to flesh out ideas without having to invest significant time and effort into getting someone on the production team to build it. They can quickly test and validate an idea on their own, all while iterating or pivoting to new ideas during the preliminary ideation phase.

For the development team the mocked up design acts as a blueprint and helps eliminate a lot of the guesswork when it comes time to actually build the product. The initial designs give everyone an opportunity to see if the idea that was originally pitched gives a clear defined set of tasks for the developer. Assuming it does, the developer and designer can move forward in tandem versus waiting for back and forth decisions.

For the client and management team, it satisfies operational goals like driving efficiencies and ensuring the best ROI for our clients. When ambiguity is removed from the build process, and a defined plan is in place with a clear end result outlined, it allows for a smoother flow of execution which ultimately keeps development costs down, budgets in line, and everyone on the same page.

At a more general level, prototyping designs isn’t so much about the tool, but more about the process the tool facilitates. Using something like Flinto during our blueprinting phase goes a long way in meeting a number of operational objectives internally, and for our clients. It’s in the planning phase that we can properly establish a budget, clearly communicate the deliverables to our team, and ensure we build products that aren’t just what our clients want, but perform well and maximize ROI.

Is Flinto the ONLY tool out there like this?

Not by a long shot. Other tools like this exist as well. For example, some of the tools that we’ve come across are Sketch, Marvel, and Adobe In Design — and each has pros and cons.

--

--

Hifyre
Hifyre
Editor for

A digital product studio building the future.