Hala, 🤩

As a reminder, you are reading this article as a part of the 4I’s series:

  1. Whatever The Approach, It’s a 4I’s!.
  2. The 4I’s – Introduction to Inspiration.
  3. The 4I’s – Introduction to Ideation.
  4. The 4I’s – Introduction to Implementation.
  5. The 4I’s – Introduction to Iteration.

Wow, our journey is almost finished. at the implementation phase, we are building the solution based on the required quality and the next phase chosen feedback circle. Here we already have the ideas and basic concepts, but we need to figure out the best possible quality based on the time and the circles of feedback and how we are going to run the validation sessions and with whom. it could be just screen-flow, early sketches and it could be a Hi-Fi prototype with micro-interactions. options are unlimited, please don’t wast your time. next, we are going to explore the circles of feedback concept, the different design qualities, tools, and methods.

Early Validation Always Better!

What’s the best prototype life cycle you would implement? by rising this question you will define the shape you work, your implementation stages and circles of feedback as well for each stage or substage of the implementation stage. Before we validate even the Lo-Fi Prototype, it will be much better if you validate the Flowchart (here I’m not talking about the actual screen flow, but I’m talking about well-written features on the flow itself). to describe each screen and what’s inside it and the links between a page or screen and another. validating such a bit amount of work will save your time and keeps you on the right track always. the idea behind it is to only expect smooth changes at each sub-stage, so it saves somehow time, project budget as well.

For me, in best scenarios I would work like this:

  1. Flowchart: To validate Features, screen content and navigation with the stakeholders and internally.
  2. Sketches: To validate the content placement and early visual imagination internally.
  3. Lo-Fi: To validate with the stakeholders.
  4. Hi-Fi: To validate the visual direction & final layout with the stakeholders.
  5. Interactive: To show the animations and micro-interactions.
  6. Design System: To be delivered to the Development Team besides the Hi-Fi Screens and interactive demos.

Digital Product Prototype – The Full guide

A few months ago, I wrote an article which was published on UX-Planet. through that article, I covered almost everything about digital product prototype Technical side (Hi-Fi, Interactive, Lo-Fi, Sketches) and soft skills and some core concepts. You Could Read The Article, and then come back and continue reading about the Implementation Phase.

Digital Product Prototype – The Full Guide

Now, Let’s talk about the missing sub-stages which are Screen-flow and Design System.


The Flowchart saves the project resources (time, budget) since you are able to validate and start wider discussions about the conceptual foundations such as the information architecture, features, navigation. by validating those basic design elements, doing a quick iteration you will find that you will do only minor changes when you reach the Lo-Fi stage.

How to build it?

Two simple options, use a template (there are many options, just google it) – or build it from scratch, and I recommend using a template to save you time, there are no special talents here.

How to validate it?

You, Your team members and Stakeholders – and just start using your presentation skills. take them through a detailed journey through the entire thing, and care about those points:

Best Practises

Remember, it’s not about the tools you use, it’s about owning this kind of crafting and creation skills.

Now let’s move to the next part, Design System. How & Why we build it?

Design System

Let’s agree, that it’s so hard to put a definition for Design System. It’s not something totally new, the concept had been there for a long time till we prioritized it during the past couple of years. but let’s see what is the basic components and goals stand behind digital product design systems:

  1. Interaction Models: First, we need to define the models of interactions we use in this product & we should leave some references about each one for other contributors.
  2. Basic Component Of The Visual Direction: Atoms. Such as fonts, icons, colors, typography, a modular grid system with whitespace and sizing rules.
  3. Reusable Elements: The production of the implementation of the Basic component of visual design direction and rules with the aim of building basic elements such as buttons, badges, form elements and so on.
  4. Reusable Component: By merging the reusable elements together, we build components which are more dedicated design blocks such as (profile card, image gallery, blog post, prices tables, sliders, featured area, item card, etc). we should ensure also that we still stick to our Visual Design Direction.
  5. IA Structure: It’s very important to define the IA Structure templates – Example of IA Structure Template is a page content follow this structure(Top Nav, Breadcrumb, Featured Headline, Main content, Footer) – Navigation Behavior standers, Core Principles, and Design Language.
  6. Interactions: We aim to keep the consistency between different interactions flow, feedback, etc. it’s important to set a guideline for interactions starts from the micro-interactions (ex. hover or click on a button) and ends with its large scale (ex. navigate, submit, etc).
  7. Linguistic Standards: Here we not only define the voice and tone, but also the standers of the web copywriting.
  8. UX Principles: UX Design always stands on a group of principles, if you break those principles, you break the experience. UX Principles controls the output in many cases and to keep the UX consistency – since there is a potential of scaling up – we should set those UX principles & guidelines.

For a better understanding of Design System, Here are some references:

Why Design System?

Usually, in mega projects you work with different types of designers and developers, design system helps to unify your work, and it keeps the project consistency forever. and here is a list of what could be the key benefits of a design system:

For me, those were the problems which were solved by the design system already. it depends also on the project nature and it might change from a team to another.

How to build a Design System?

There are two cases, when you are establishing a new product or when you already have an up & running product. and here the best practices out of my experience for both of cases.

New Product:

Within a new product, you don’t have any assets or even guidelines, may you have the brand guideline but it is not enough yet, I would encourage you to go with some something, by achieving at least 5 screens, you will be able to define core atoms such as typefaces, spacing, and modular grid system, buttons, basic components & it’s a good start, you can publish those things, and then keep updating the system with the new elements, principles, components, etc. and also update it with the latest changes if there are any.

Existing Product:

Okay, First you should review the entire product design to know what you would like to keep and what you may change in the future, try to extract the atoms of the design, then start to publish something, and keep using those things in your next designs updates. but if there is a major change in the design direction, i would recommend that you should not publish a design system at this stage, since a major change on the design direction might duplicate your work in many cases, for example, if the brand itself (colors, fonts) are going to be changed soon.


Whatever you wanna use, use it. but keep in your mind it must be usable for those cases:

At least a design system platform should give you the ability to manage your design system content and information architecture in an efficient way. and the most important part for your collages would be the search abilities and intelligence.

Now, by achieving the last part of the third phase introduction, you are ready to continue reading about the last stage in our design approach and it’s iteration phase where we usually discover the design problems and slove it.

Ready to take the next step?

Next, Introduction to Iteration

By Desigeers, For Designers ✍️

The 4i.Design Meant to serve the vaiarity of designers and problem solvers around the world, this make us in a need for more and more content to be added on daily baises.

Take a step & support others by contributing and sharing helpful content as well.

Share Something

Trending 🔥

Few topics are on fire!

centered,lean,Thinking,sprint,design sprint,Design thinking,SIT,design,lean ux,design sprint foundations,centered design,methodology,ui,interaction