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:

  • The content: What will appear, from where it will come, and alternative options if there are any.
  • The Features: How users will reach it (user journey in details), What’s required, How users will be able to follow up, and the operational concept behind it.
  • The Navigation: Nothing special, it will be shown anyway through the validation session but may you need to answer questions like (how can I navigate directly to the page (X), how to take a step back) and so on.

Best Practises

  • keep linking the design decision with the research findings through your presentation.
  • Mention samples out of the light-demos which your team prepared through the ideation phase, it will help.
  • Highlight the user behavioral issues or actions needs to be validated later in the iteration phase.
  • Don’t panic. Validation means that you don’t have the most accurate solution and you want to make it more accurate.
  • Again, Ask lots of “Why?”.

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:

  • Keep consistency in both UI and UX even the micro-interactions.
  • An easier Development Handover, We all know the value of time, the time we waste in handover as well.
  • Save lots of time during the implementation phase, not only through components but also through solid design atoms.
  • An easier way of onboarding new designers, you are not going to share the link only of course, but at least he could take an overview and that will make your job much easier.

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:

  • Multimedia support.
  • Downloadable assets.
  • Code snippets.
  • Fixable / Advanced Search.
  • Fixable and clear navigation.

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

More Readings,

It is a form of qualitative research consisting of interviews in which a group of people are asked about their perceptions, opinions, beliefs, and attitudes towards a product, service, concept, advertisement, idea, or packaging. Gauging opinions...

A design charrette is a short, collaborative meeting during which members of a team quickly collaborate and sketch designs to explore and share a broad diversity of design ideas. Designers and non-designers—including project stakeholders, engi...

A series of steps (“flow”) that users complete for a specific task. It is a single flow completed similarly by all users for a specific action. Ex. Sign Up. Task flows have a singular flow, they don’t branch out. One of the different di...

Capturing the day-to-day context in which people engage with your product or service This captures what customers do, think, and use as they set out to achieve a goal that involves your product or service. It provides a framework that desig...

Think-aloud (or thinking aloud) protocol (also talk-aloud protocol) is a protocol used to gather data in usability testing in product design and development, in psychology and a range of social sciences (e.g., reading, writing, translation research, ...

A content inventory is a collection of data about your content. Unlike the content audit, which is qualitative, the inventory is quantitative. It's a comprehensive list – typically a spreadsheet – of all content assets, ideally across all content...