An easier way to wireframe, design & build digital products for clients
No doubt you know this: the lifecycle of building a digital product for your client can often be a difficult road.
Lets make it simpler. I’ll share with you an easier way to wireframe, design and build that sings to you and your clients!
The goal for any freelancer or agency is to accurately fulfill their client’s vision, with a reliable project lifecycle.
Wireframes, sitemaps, and photoshop designs are the normal go-to steps for many freelancers and agencies before starting a build.
At my agency, I’ve historically advocated and implemented the following 3 project phases: Blueprinting, Design, and then Development.
Of course we could go deeper, but for simplicity in this article, I’ve only included the top-level steps. 👍
- Blueprinting: Project Manager / UX Team
+ Business requirements
+ User stories
+ Feature list
+ Sitemap
+ Static wireframe
+ Amends / Sign-off - Design: Design Team
+ Photoshop
+ Amends / Sign-off - Development: Dev Team / Project Manager
+ Sign-off
+ Go-live
+ Plan the next iteration
These processes are imperative, to make sure the customer’s vision is crafted exactly as they dream. It works well and clearly ensures there’s no backpedalling on the project.
These phases are fantastic at ensuring the overall goal: guarantee the customer’s vision is fulfilled. It does this very well.
So, what’s wrong?
These phases and steps are accurate and identify everything the client requires of the digital product, giving them a visual static prototype.
But there’s a hidden pressure on our own team and the client… let’s take a gander!
Many entwined steps
The sitemap, wireframe and final flat design are what bring the final plan together before build.
Pressure is put on the client and Project Manager to imagine how these are linked together. A skilled Project Manager knows this and does successfully help the client visualize the product before build.
But there is this pressure and no two clients are the same.
Reducing pressure points throughout a project is what makes for a more encouraging experience for both the client and a freelancer or agency.
Static visuals
The visuals are indeed static. The plan is glued together with intangible links that cannot be seen until the Build phase.
For the most part, this has not been a barrier for my agency when creating digital products and our clients have always been blown away by the end result.
But come Build phase, there’s usually just 1 or 2 tweaks and hidden issues that pop up. They never warrant a complete new Blueprint or Design phase, partly I imagine because we’re incredibly detailed towards the start.
However, those 2 tweaks do extend the build timeline and you don’t want to be changing or tweaking the product during build when developers are writing code, as this is the most intense phase where changes have the biggest impact on time. Re-writing and refactoring code is usually the slowest action you can take.
Say hello to an Interactive, No-code Prototype
Come again?
This sounds like a lot of work and typically it would be: a coded prototype would mean you repeat all three phases twice.
But not here, read the title again! Let me explain.
We’re creating a no-code prototype, that can actually be absorbed into the Blueprint and Design phases. Wow.
This empowers the Client, Project Manager, and Design team and doesn’t require the most expensive input: coded development.
A no-code prototype is built using a visual editor. We’ll go into this shortly.
What other benefits are there?
The hugest win is you can show, not tell. There will be no ‘visualizing’ required for the client. They can literally see and interact for themselves how the product will work. “What happens if I click the gallery image item?” You can show them without words.
An interactive prototype can merge multiple steps: wireframe, sitemap and all of the Design phase.
An interactive, visual prototype means there is much less friction between the Design and Development teams once the Build phase is active. The developers can literally see even how animations are supposed to work from the prototype.
So, a visual prototype builder, that can do all this, actually exists?
Yes!
Sorry, that was probably expected — imagine if you read all this and I told you no.
There are many no-code prototype builders out there in the wild. A quick little Google revealed quite a few options:
The best of the bunch in my humble opinion at the time of writing is Framer.com as they have the easiest interface, heaps of interactive tutorials, and their builder comes with so many useful features:
- The easiest and most powerful interface I’ve found so far which encourages designers from a Photoshop background to think in an interactive mindset, without losing control.
- Animations can be prototyped by a Designer.
- Any device under the sun can be previewed with your prototype.
For those dubious few… I checked, but Framer sadly doesn’t have an affiliate program. In fact, none of these builders do! Point is, my review is genuine and not endorsed. 🚀
Conclusion
We’ve discovered that there is in fact a much easier way to wireframe, design and build digital products by leveraging No-Code Prototype Builders.
Many steps and phases typically required during a build lifecycle can be neatly tied together in one place that any stakeholder can understand.
How have you improved the lifecycle of your projects? Let me know in the comments!
Any feedback or questions are very welcome, please drop them in the comments!
Yours,
Spence 👋
