As a reminder, you are reading this article as a part of the 4Iâ€™s series:
- Whatever The Approach, ItĂ˘Â€Â™s a 4IĂ˘Â€Â™s!.
- The 4IĂ˘Â€Â™s Ă˘Â€Â“ Introduction to Inspiration.
- The 4Iâ€™s â€“ Introduction to Ideation.
- The 4Iâ€™s â€“ Introduction to Implementation.
- 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:
- Flowchart: To validate Features, screen content and navigation with the stakeholders and internally.
- Sketches: To validate the content placement and early visual imagination internally.
- Lo-Fi: To validate with the stakeholders.
- Hi-Fi: To validateĂ‚Â the visual direction & final layout with the stakeholders.
- Interactive: To show the animations and micro-interactions.
- 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.
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.
- 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?
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:
- 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.
- Basic Component Of The Visual Direction:Ă‚Â Atoms. Such as fonts, icons, colors, typography, a modular grid system with whitespace and sizing rules.
- 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.
- 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.
- 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.
- 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).
- Linguistic Standards: Here we not only define the voice and tone, but also the standers of the web copywriting.
- 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:
- What is a Design System?Ă‚Â By. Courtney Clark.
- Design Systems: Building for the FutureĂ‚Â By. Ara Abcarians.
- GEĂ˘Â€Â™s Predix Design SystemĂ‚Â By.Ă‚Â Jeff Crossman.
- In Search of a Living Design System By. Jina Anne.
- CREATING A DESIGN SYSTEM LANGUAGEĂ‚Â By. Alan Power.
- Design Systems, wtf? By. Marcos Peebles.
- Design Systems, Style Guides, and Pattern Libraries: Oh My! By.Ă‚Â Ste Grainer.
- Selling a Design System before asking for buy-in By.Ă‚Â Ryan Rumsey.
- Design Systems FAQ: CVI and Styleguides By. Alberto Vitullo.
- How to construct a design system By. Colm Tuite.
- InstacartĂ˘Â€Â™s Lead Product Designer on Creating A Design System By.Kim-Mai Cutler
- Design Systems vs. Pattern Libraries vs. Style Guides Ă˘Â€Â“ WhatĂ˘Â€Â™s the Difference? By. Zack Rutherford
- Google for more.
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.
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.
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.