How 3 Layers of Prototype Revolutionalise Digital UX: 4 Mindsets to Drive Them

Prototypes are part and parcel of how design teams work- and in my design leadership in e-commerce tech and finance industry- we work on these examples of prototypes and how I think best help in terms of impact.

I will also use that mindset metric below to clarify each example of prototype too:

Embrace Imperfection

Conduit To Extract Feedback (Stakeholder)

Improve Collaboration and Align

Experiment and Test (Customers)

1?? Low-Fidelity Paper Prototypes:

In Design Thinking- paper is king and my favourite form of prototyping. These are quick, hand-drawn representations of ideas.

It helps to work with stakeholders:

Visualise concept quickly

See the end-to-end big picture

Make?changes fast together

Discuss design issues all at once

Make more strategic decisions rather than design-specific

In OCBC, I used to have huge walls- to paste vast amounts of paper and join them side by side to discuss with my designers and stakeholders on UX, flow and structure. I realise that when screens are all shown clearly all at once, we pick on issues that are not visual design-related, especially if it is in sketches or low-fidelity. We collaborate better.

We don’t discuss questions like:

Can we make this button bigger?

Can we change that colour?

This image doesn’t fit our branding?

Is this from our design system?

We focus on UX and our customer journey.

However, although a good collab tool with stakeholders- the drawback on the paper prototype could be the lack of content, visual design integrity and may not be able to illicit good feedback for customers who are unable to "visualise well"- but the pure focus in more of the high-level thought process on the user flow.

Embrace Imperfection

? ? ? ? ?

Conduit To Extract Feedback (Stakeholder)

? ? ? ? ??

Improve Collaboration and Align

? ? ? ? ?

Experiment and Test (Customers)

? ? ?? ?? ??

_____________________________

___________________________

2?? Interactive Wireframes:

In Design Thinking- paper is king and my favourite form of prototyping. However, when it comes to testing with prototypes- the industry practice is to be as "real" and "close to experience" as possible.

Hence, interactive wireframes come into play.

I used to live by Balsamiq / Invision combo or MIRO / Invision combo - but more recently Sketch / Figma is the go-to for interactive wireframes. I am not talking about tools here- but I need to draw your attention to the mindset delivering wireframes.

Interactive wireframes, in essence, allow designers to create a navigable version of a website or application. This prototype taps on white boxes, lines, text lines and existing components that's pre-existing either from internal design system- and designer will join the wireframes interactively.

Customers can test these interactive wireframes just like they do on normal websites or mobile apps on a typical laptop or their own phones- illiciting feedback on close to real experience.

Typical interactive wireframes MUST-HAVES:

End of end interactive linked screen-flow

Defined information architecture and hierarchy

Defined screen layout structure

Clear call to action for every screen

Information and content essential for customer to make screen / product decisions

NICE-TO-HAVES or NOT NECESSARY (recommended):

Brand identity and colour schemes

Styling and visual effects

Animation effects

Images that do not allow customers to make any decisions

Components that are design-system ready

As a design leader, I really recommend designers DO NOT mix interactive wireframes with close-to-final design work- to show concept to stakeholders and test with customers. The drawback in my experience is that stakeholders and customers- seeing a "polished" and "near to final" prototype will be less inclined to challenge status quo and give feedback. Your objective for a prototype is gone, especially if you are getting structural or product-related feedback.

Interactive Wireframes mindset:

Embrace Imperfection

? ? ?? ?? ??

Conduit To Extract Feedback (Stakeholder)

? ? ? ?? ??

Improve Collaboration and Align

? ? ? ?? ??

Experiment and Test (Customers)

? ? ? ? ?

3?? Digital Prototypes:

Digital prototypes creates the "almost final" finish to the overall impression of the page and simulate the functionality of a product or system. These prototypes are interactive and can provide a realistic user experience. Tools like Adobe XD, Figma, and Sketch allow designers to create digital prototypes for websites and applications.

This type of prototype has a different level of feedback from stakeholders to illicit, usually at a design output and integrity level:

Does it support the project request requirements (PRD)?

What the clarity of branding and first impression?

How good are the visuals to support the design?

Is Tech able to understand and develop them?

How effective is this design component? Is there another variation?

Are the components design-system ready? If no, do we have resources to build them?

As a design leader in Lazada within my team- we built a LOT OF digital prototypes. There's a need for fast turnaround and and moving at pace without taking a step back at previous levels of prototyping.

Digital Prototypes mindset:

Embrace Imperfection

?? ?? ?? ?? ??

Conduit To Extract Feedback (Stakeholder)

? ? ? ? ?

Improve Collaboration and Align

? ? ?? ?? ??

Experiment and Test (Customers)

? ? ?? ?? ??

The downside to digital prototypes is level of feedback you will be getting is now really at the superficial design level- the text, visual style, layout and interaction- because the prototype is just too polished to feedback otherwise. It is fine if that’s your objective in the first place.

Conclusion:

Prototyping is a versatile and integral aspect of the Design Thinking process. Whether you're sketching on paper, creating interactive digital interfaces, or building physical models, the goal remains the same – to bring ideas to life, test them, and refine them based on user feedback.

By exploring various examples of prototypes, designers can choose the right method for the specific needs of their project, ultimately leading to more effective and user-centric solutions.

Last Words

I will be adding more articles on Design Thinking throughout the year. Articles of Empathize, Define, Ideate, Prototype and Test will be added periodically to give my readers a broader insights to Design Thinking.

Check out more articles via my blog:

https://www.emerge-creatives.com/blog-1

Follow me on social media:

Linkedin: www.dhirubhai.net/in/daniel-ling-designthinkersgroupdtv

Facebook: https://www.facebook.com/designthinkersgroupdtv

Instagram- @designthinkersgroupdtv

https://www.instagram.com/designthinkersgroupdtv?igsh=ajg2NGplbXJ1cWU4&utm_source=qr

About the Author

Daniel Ling is a regional Design Leader, and certified Design and Agile Coach with 15 years of experience in the financial and e-commerce tech space- who moulded himself to be a “designer in a business suit”- strong in the Design Thinking process and yet relevant to the industry. He is proficient in the digital and transformational space- in the area of design leadership and management, research, strategy planning and coaching.

How to sign up for his WSQ Certification Courses:

WSQ Design Thinking: https://www.emerge-creatives.com/wsq-design-thinking-certification-course

WSQ Entrepreneurship Business Planning: https://www.emerge-creatives.com/entrepreneurship-business-planning

Where to get Complete Design Thinking Guide for Successful Professionals?

Download PDF Digital Copy here: https://payhip.com/b/hM4U

Purchase from Amazon here: https://www.amazon.com/dp/1514202735

Download eBook from Apple Store here: https://itunes.apple.com/us/book/complete-design-thinking-guide/id1022432207?ls=1&mt=11