Getting ready for the UX-driven World with Rapid Design Prototyping

Don't Make Me Think: A Commonsense Approach to Web Usability author Steve Krug rightly states that, "If you want a great site, you've got to test it." As a designer, you would know that the excellent execution of a bad idea can be a massive waste of time, money, and other resources. Therefore, to distinguish a good from a bad idea initially, you need to test your designs using prototypes. Prototypes are working models of your final product. They help emulate the functionality, look, and feel of the product you're designing. By the time these high-fidelity models are introduced into the process, you would be at the stage of finalizing the details of the UX design. Prototypes naturally take longer to produce and cost more than wireframes or sketches. However, the ability to build and test prototypes at a rapid pace and in iterations lets you "envision" new products, evaluate feedback-based user engagement, and improvise without "developing the product" until you have a final version that everyone approves. This is a valuable way of making a small budget go a long way while reducing unwanted rework and collateral damage. In designer terms, this process or practice is called "Prototyping."

Prototyping Definition

Prototyping is an experimental, iterative model of an idea - a mockup of sorts - that lets you test and retest before finding the best solution to your problem. It requires a mix of creativity and practicality, perhaps one of the essential steps to delivering good design. Add the word Rapid to Prototyping, and it becomes a process of quickly mocking up features of your website or mobile application. The term rapid implies that this process is quicker and inexpensive than a full-blown mockup of your product.

Commonly used Rapid Prototyping Techniques:

  1. Rapid sketched paper prototypes: These include a rough schematic design on a paper demonstrating the relationships between the various elements. These are typically used in the initial design stages to validate the fundamental, underlying concepts and test the design logic. Basic flaws in reasoning, layout, comprehension, and structure can be removed using this method.
  2. Lo-fi, monochromatic wireframes: When you are satisfied that the basic concepts are comprehensively covered, you can progress onto more complex prototyping models such as lo-fi monochromatic wireframes. These are digital models but very minimal, almost skeletal in detailing to avoid distractions from testing the operational structure and functionality. The absence of any actual design or content helps understand the working relationships between elements and whether they practically deliver user outcomes.
  3. High-fidelity, clickable mockups: This advanced phase of Prototyping requires some effort and expense before getting to the final stage. This mockup will cover most, if not all, of the features needed, though not completed to the level of detail or design of the final version. It will be an interactive and clickable model emulating the app or website. It would allow users to test the functionalities and features in a natural environment. Any issues or feedback derived from this activity can be taken as pertinent to the completed product. Thus, it is an exemplary process for accuracy and relevance checking and validation of the final model of the product.

The Process behind Rapid Prototyping

Rapid Prototyping helps visualize interfaces or UI screens and user flows while adding interactions so that potential users can test the product's usability and functionality. Here are the first steps you should take before starting on your prototype.

  1. Define the problem and perform requirements planning.
  2. Ideate and come up with a tentative solution.
  3. Create your Prototype.
  4. Empathize with your users based on the feedback.
  5. Refine the problem.

And continue the process until you find the best, most relevant solution.

Requirements Planning for Rapid Prototyping

The requirements planning phase includes getting the UX Designers, developers, business analysts, managers, and other stakeholders to agree on the business requirements, constraints, and project scope. With rapid Prototyping, what and how much of the interface and process should be tried and tested are determined.

Creating a Scenario: Create stories that describe when users will be working with your app and what these users' needs will be. This allows you to attempt to create valuable prototypes.

Iterating the UX: Start simply by creating low-fidelity prototypes. Don't focus on the content or even the design. Instead, pay attention to usability and user flow. You do not need or want actual content or higher fidelity designs until the early prototypes have been validated. A prototype usually starts with an outline of the basic idea. It is then refined with features, functionalities, and interactions until the final prototype is handed over for development.

First, you scope the prototype. A prototype isn't a fully functional, coded, working end product. Instead, it is made to help designers test their idea's functionality, and further help users and developers visualize the concept before using/building it. So, ensure you answer these questions before jumping onto making your prototype:

  1. How much should be prototyped? Designers usually prototype core functionalities and any novel technologies/interactions they may have planned.
  2. Outline your user flow: Identify coherent paths your user may take.
  3. Plan your iterations: Start with the broad idea, and then narrow it down to selected areas.
  4. Choose the fidelity method and tools: It means choosing the technique and devices you want to use to help make your prototype closest to your end-product.

Fidelity refers to how closely a prototype resembles the final design. There are multiple dimensions to fidelity, and prototypes can belong anywhere on the spectrum for each of these dimensions. Fidelity methods are unique tools to make your prototype work significantly better. The types of fidelity methods are:

  1. Visual Fidelity: Styled interfaces, focusing on the look and feel of your concept.
  2. Functional Fidelity: Interactions that focus on how your concept will work.
  3. Content Fidelity: Real content and headlines instead of dummy text.

Second, you choose the appropriate fidelity level. The spectrum of fidelity lies across.

  1. Low Fidelity: Sketching on paper, without using any tools or codes, and used most often in the earliest stages of the design process.
  2. Medium Fidelity: Using computer-based tools like Visio and Omnigraffle, creating wireframes, task flows, and user scenarios, most useful to clock user behavior and experience.
  3. High Fidelity: Using application-simulation tools like Axure and iRise to simulate the functionality of the final product. Most useful to produce an almost-working, refined prototype of your final product.

Expert Tip 1: Consider creating a content wireframe in the early stages of your prototyping process. Carve out spaces for broader content categories and then narrow them down to more delicate interactions. That way, you cover both the design and responsiveness of your product.

Expert Tip 2: Consider creating a content wireframe in the early stages of your prototyping process. Carve out spaces for broader content categories, and then narrow down to more nuanced interactions. That way, you cover both the design and responsiveness of your product.

When creating a Rapid Prototype: How much to build?

Prototyping an entire app's UX is a ton of work! But, it's not necessary to build a complete app. So, what to make?

At Radiant, we commonly prototype the following:

Core Functionality and Features: This depends on where your users spend most of their time and their most-used features. Focus on critical areas of your app and ensure they are meeting user expectations.

Novel interactions and patterns: Users are familiar with conventional structures and experiences—users knew their way around the typical design elements and how to use them. Any novel design departing from normal user expectations has to be prototyped and tested. This will iron out any kinks that could confuse users.

We recommend tackling one part or feature at a time.

Finally, choose a prototyping tool.

A gamut of prototyping tools is available in the market. However, here are the top five questions you need to ask before making a choice.

  1. How easy is it for you to learn the tool?
  2. Is the tool scalable/flexible enough for mobile AND desktop applications?
  3. What are the resources that come with the tool?
  4. Is it easy/quick to incorporate feedback and changes into the tool?
  5. What are the collaboration and licensing terms of the tool?

The most popular prototyping tools in 2021 include:

  • InVision – Sketch tool integration, no-code Prototyping, smooth transitions, interactions, hotspots, overlays, multi-device support, direct feedback and comments, and attractive headers.
  • Framer- 5-minutes prototyping, high-fidelity, smart features, drag, and drop components, layout tools, building blocks, auto-sizing, asynchronous collaboration, and more.
  • Adobe XD – Keyboard and gamepad support, audio playback, auto-animate, voice prototyping, scroll groups, anchor links, wires and triggers, device preview, overlays, and more.
  • Origami Studio - Native hardware APIs, Photo Library - Pull in images from your devices, Camera Roll, Audio Metering, Create visualizations from live audio or recorded samples, Haptic Feedback, Access GPS data, and more.
  • Webflow – Clean semantic code for developers, no-code support for designers who can publish to a webflow.io subdomain for handoff, designers can specify hover states, transitions, and interactions. One prototype for different devices with fluid breakpoints.

But here's an important question that may arise in your mind. "Why am I doing all this? Is Prototyping that helpful?"

Yes, it is. You would understand this better with these three prototyping advantages.

  1. Better Communication: Design decisions are crucial to the development of an optimally functional product. With an interactive prototype at hand, it becomes much easier to understand your users' feedback while also ensuring the whole team shares a shared understanding and goal.
  2. Reduced Turnaround: Hand over your prototype to your developer and see how your end product turns out. Take our word for it. Instead of writing pages after pages of documents to describe your concept and product, a rapid prototype does the job, especially in specific user flows and interactions.
  3. The ability to experiment, iterate and create (more confidently): Rapid Prototyping is beneficial when it comes to bouncing ideas off other designers and testing multiple approaches and solutions for your product. It enables discussions, brainstorming sessions, and great engagement, resulting in a faster and better UX design after confirming its viability. Prototyping makes way for intelligent design in no time.

What should you avoid during the rapid Prototyping of your product?

  1. Adding too many features: A prototype is meant to be a simple mock-up of your final product. Cramming it up with too many features and interactions will shift your focus away from the primary goal and stop you from achieving a final, good product.
  2. Focusing too much on aesthetics: You like pixel perfection, we know. But a prototype is meant to spark conversation and allow you to understand the nature and experience of your user. And it does just that. You want your elements to function. You want your users to 'get it' - so focus on that instead of trying to make it look perfect every time.
  3. Creating too much of everything: Make a plan, set up a KPI, and lock with your team on the prototype's scope. Remember when we spoke about core functionalities and novel interactions? Yes. Stick to what's essential. All. The. Time.
  4. Thinking you can do it on your own: Rapid Prototyping is not a solo activity. It always needs a second set of eyes. It loses its whole purpose if you're the only one designing and reviewing, right? Sharing, interacting, dialogues! They make for a worthwhile process. You need different perspectives to create a good product, and if done right, Rapid Prototyping is an efficient way to create a product that deserves a pat on the back.

Every time you start on a new project, ask yourself, am I a better designer today than yesterday? Can I do anything better? To help you with that, we've curated three exercises to help improve your prototyping skills.

  1. The 8-6-4-2 Rapid Prototyping Method: Sketch for 8 minutes, 6 minutes, 4 minutes, and 2 minutes with quick two-minute feedback sessions in between. Task: Choose a problem and spend 30 minutes reaching out to people. Understand pain points and spend 1-2 hours sketching low-fidelity prototypes to solve those pain points.
  2. Solve a real-life problem you have encountered: Good design is about solving the practical pain points of your users. Sketching a prototype is a more straightforward way to achieve your daily goals for your UI design. Create one! Solving real-life problems is the foundation of good design, and nothing better than setting yourself up for a task every day.
  3.  Collaborate with team members or people from your industry: Social media, blogs, LinkedIn Pulse are great channels to connect with like-minded people and share prototyping experiences. Set up a meeting, find a problem, and challenge each other to develop the best low-fidelity prototypes in a time-bound process. You will be surprised to see the potential you can reach.

Wrapping up

UX designers must get into the habit of practicing and creating prototypes, no matter how basic they may be, because "It's not about what you're building, but what happens afterward." - Christian Abell, Vice President of Creative Projects, Marriott. Connect with Radiant’s UX design team to learn more!

by Siddhartha Baddi

[Webinar] Learning via Immersive Media: Insights from Flight & Aircraft Maintenance Training

https://youtu.be/s2CP5BNub6Y

Radiant presents:

"Learning via Immersive Media: Insights from Flight and Aircraft Maintenance Training"

Interest in immersive learning using AR/VR continues to grow as the cost to implement the technology falls. But is there value in implementing immersive learning for your technical training? Hear some of the lessons that have been learned from pilot training, where immersive learning has been used for decades. Learn about the importance of analysis when designing simulations and how simulation fidelity is geared based on learner level.

Special guest speakers:

by Erik Fullerton

[Webinar] Dream. Design. Deploy. All in XR with Byldr.

https://youtu.be/AFiqjze9-rw

Radiant, in partnership with Byldr, presents:

An engaging conversation on empowering staff and accelerating enterprise XR adoption by building XR PoCs internally with on-device, no code authoring. Featuring Director of AR and VR of Radiant Digital, Surya Prakash, and Inflexion Point CTO XR Thought Leader, Sean Ong.

This 30-minute fireside chat-style webinar features a demo and a live Q&A with the audience.

Highlights:

  • How on-device XR app building can reduce the development time by 5x by eliminating the 2D to 3D iteration cycle.
  • How the intuitive, no-code user interface can empower existing, non-coding creative staff to XR application development in hours with no training.
  • The integration of Azure Spatial Anchors, Bing Maps, and SketchFab integration create persistent AR/VR experiences.

by Surya Prakash

How these UX tools will revolutionize the UX Design landscape in 2022

New trends can change a designer’s trajectory each year in the dynamic area of UX design. Designers can’t benchmark a particular trend which becomes ineffective when customer preferences change. But what they can do is understand the most useful software tools to improvise their designs. Radiant Digital leverages customer-centric designs with over a decade of experience in creating exceptional web and mobile app designs while pushing creativity limits. We have predicted the different UX trends that will equip designers with a deeper perspective on creating transformational designs. Before we begin, let’s recap the definition of UX design. User experience (UX) design is the process design teams use to create meaningful and relevant user experiences. This involves designing the entire process of acquiring and integrating the product, including branding, design, usability, and function.

UX design aims to create accessible, efficient, relevant, and overall pleasant experiences for the user.

Artificial Intelligence in UX

The fundamental goal of modern design is to ease the UX designers’ workflows and reduce design errors. AI-enabled software reduces 70% of human involvement while improving design consistency.

Machine-learning algorithms are being used to improve UX quality and can implement rapid changes to a prototype instantly. Cumbersome design functions can be automated, while you can shorten design cycles with powerful AI tools. These tools can also make design recommendations to improve your design. One such AI-enabled tool is Uizard that brings design ideas to life in minutes. Uizard is a component-based design tool where components are organized as a minimalist design theme. Uizard themes help organize and categorize elements, define their colors, typographies, and styling properties. You can assemble the UI components into reusable templates for screens and app designing. Uizard’s AI design assistant helps designers:

• create custom-made matching themes instantly from the images you upload;
• extract components and styling properties from uploaded images, photos, screenshots, and mood boards;
• customize these extracted components further;
• convert sketches and scribbles from whiteboards, notebooks, tablet apps, and design software into editable screens;

• upload pictures from wireframes and screenshots of digital low-fidelity mock-ups and convert them into digital design components and high-fidelity interactive prototypes;
• import and convert your existing digital assets and artifacts like websites or style guides into readily usable design components;
• automatically extract the styling properties and components from a URL, sketch files, or app screenshots and apply them to your design;
• implement layout understanding that enables machines to better process the layout semantics and information of your user interfaces (UIs), text documents, presentation slides, forms, graphic design compositions, etc.;
• provide an image as input, identify components and fonts, and extract styling properties (text size, padding, border-radius, font-weight, shadow, etc.) using a neural network pipeline.

Advanced Personalization

Personalization in design includes individualizing content and recommendations for a brand or user based on the brand culture or the user persona information. The main goal of personalized designs is to make users feel special, automatically increasing your product usage and conversions. Personalization is a fundamental design practice and one of the best practices today. Google and Apple’s personalized assistants help you interact using voice, face recognition, or fingerprint.

In the future, personalization will be programmed into interfaces to change their appearance, elements’ positioning, tone, and behavior instantly. Amazon creates a personalized homepage for customers with content and templates based on their shopping habits, history, and shopping cart information.

3D and Immersive Experiences

3D designs have been taking web and mobile designs by storm. In 2021, designers can further explore the expansive space in 3D components and interfaces. 3D objects are common on modern front-end frameworks and libraries thanks to faster page load times. With the advent of AR, VR, and Digital Twins technologies, the 3D design will only increase popularity. Cool abstractions and unusual angles can be included in 3D designs using natural objects. 3D design grabs attention and makes websites more appealing while increasing user engagement.

Expensive real-life demonstrations for cars, homes, or jewelry can be converted to affordable demos using 3D designs. AR portals are helping mimic online environments like stadiums, stores, and more in 3D. AR portals bring a designation to the user and teleport them into a 360-degree environment to walk around and explore. Brands, retailers, and events are creating mini-worlds of interaction in virtual universes. Spline design is dedicated to creating and publishing 3D web experiences in real-time through rapid iterations and production-ready results. It helps use text & basic geometric shapes, edit materials, and import 3d models.

No-code Designing

UI is moving toward “No Code Development,” which will soon become a common designing place. This will help designers publish the app directly to Google Play Store and Apple Store. Designers will be at the helm of creating any look and feel for apps without the need for intricate coding. Drag-and-drop functionalities will redefine rapid design prototyping. With app builder tools like Bravo Studio, designing native iOS and Android apps will include zero coding efforts and direct prototype conversion. All designers need to do is connect their Figma files to Bravo and connect to their REST API. Bravo can easily convert this into an app package for both iOS and Android. Bravo Studio uses tags to define native mobile actions/components for your app. Bravo tags help recognize native behavior in your app’s design like slide menu, splash screens, share, etc., which improves authenticity. Bravo Studio lets you connect your prototype with real-time data from any APIs or any 3rd party services. Any data changes will automatically reflect in your app. You need to create your app prototype in Figma and name each layer to make it Bravo compatible.

How does Bravo Studio work with Figma?

1. Design and Prototype your app in Figma.

2. Add native mobile element tags to this design by including Bravo tags to the name of each layer to convert the prototype into a real app with fully native mobile functionality support like (open share dialog or email, play video, etc.).

3. Connect your data to the design from an external collection via APIs to add real and live content.

4. Preview on Bravo Vision, a partner app that lets you preview, test, and experience your fully-native iOS and Android Figma prototype created on Bravo Studio.
Bravo Vision previews design changes instantly without impacting your app’s content synchronized in real-time with your data.

5. Publish your App-to-App Store or Play Store by submitting the IPA and APK packages available in Bravo Studio.

Other Self-code Design Platforms

BuilderX is a browser-based design tool that self-codes readable and production-ready apps in React Native & React. BuilderX lets you drag and drop components to the design canvas, add text, change orientation, sizing, color, and other attributes with just a mouse click. It also features:

• sharing projects instantly with your team;
• seamless conversion of sketches and scribbles to React Native & React code;
• custom settings for flex layouts and automatic conversion of Flex to Absolute layouts;
• export selected components from an existing folder structure;
• a component library with hundreds of design components;
• support for custom UI and components import to be used across the project;
• an expansive list of open-source icons.

Clutch is a platform that lets you build real products in real-time. It lets you create cross-platform products effortlessly and consistently by supporting no-code, code-optional, and full-code options. You can bundle reusable components to create visually stunning and professional apps and web UI. You can plug dynamic data into your design to reflect live content and state. You can connect this platform to your custom backend in the cloud using REST APIs or any other protocol. Clutch lets you integrate stunning animations using Lottie. Data visualization using charts and graphs is quick on Clutch using ReChart. Because of cloud support, Clutch lets you deploy and connect anywhere.

Minsar is a VR platform that lets you prototype, design, and share AR apps & fully immersive experiences without coding. Minsar makes designs powerful and frictionless with interactions and immersive narratives that are user-triggered. You can create filters for Instagram with Minsar’s Spark AR Export feature. It lets you connect and share your experiences with general users in a web browser powered by WebAR and other cloud services.

Framer is an all-in-one tool that helps design high-fidelity prototypes and experiences using Framers. You can transition to a no-code functional prototype rapidly. Framer supports rapid wireframing, visual designing, prototyping, user testing, and handoff. It also supports:

• canvas to insert animations, transitions, and smart components;
• instant user feedback and helpful engineering code handoffs;
• instant team collaborations in the cloud;
• drag-and-drop components, layout tools, and intelligent building blocks (for custom interactions, properties, and animations);
• component auto-sizing;
• a gamepad to control your hyper-realistic game interfaces and prototypes.

Go from Design to Device Instantly

Play lets you navigate from an idea to a prototype in minutes. You can create, iterate, and experiment effortlessly on this platform. It’s the only app that offers the convenience and flexibility of working on your mobile device to render exceptional UX designs. The Play library lets you move your design to your device and convert them into fully functional pages in just a few taps. This Library aligns fully customizable components to common UI patterns and completes them with built-in states and Interactions. It gives designers the liberty to experiment instantly and iterate on their initial concepts. Play helps create and change your product directly on any device. If you’re already working on a design tool like Figma or Sketch, Play lets you import designs on any device and add advanced interactions and native features to it. With Play, you can manipulate your designs in real-time, in the context of their destination device. Here are some of its essential features.


No Mirror apps syncing or artboard resizing: Play lets you design once and automatically adjusts the view on different screen sizes. You don’t need to sync or mirror apps and resize screen elements.

Import from Figma: Play enables building out real workflows and prototypes by directly importing Figma components and styles.

Design Tokens & Multi-state Components: Play lets you manage design tokens like color, styles, and spacing values to create dynamic and multi-state components identical to real-life products.

Design Sprints & Whiteboard sessions: can be effortlessly included as a part of your working session on Play.

Rapid Prototyping and Testing: Play lets you migrate to a high-fidelity prototype for validation in less than an hour.

Near-real and Life-like Prototypes: Play lets you add maximum credibility and embody the ultimate vision of what you want in your product. It empowers you to fine-tune your designs and “get closer to the real thing” with nuanced feedback. This tool supports native gestures and advanced interactions in your designs. You can seamlessly design and build in a native environment while effortlessly creating and changing complex interactions based on the usability context. With Play’s near-real prototypes, you can avoid:

• intricately-linked artboards;
• interactive and visual disconnect;
• product simulations and prototype hacking;
• reference files, interim deliverables, and throw-away designs.

With tools like Play, advanced prototyping and direct-to-device implementations will propel design implementations and business bottom lines in 2022.

Animations and Motion Graphics

Designers often need to roll out engaging animated stories and animated screen interactions. This involves merging a minimalistic interface with bold and exciting elements. Animations and vector graphics are crucial to such designs. Animations can range from micro animations of buttons to subtle screen transitions. Motion effects are used to narrate a story better than static text and images. They bring new life to your design assets and make them meaningful. You can leverage custom emojis to render a more emotional aspect to your design. Micro-interactions include small animated elements to encourage user action. They indicate state change and help users navigate. Various micro-interactions include:

• color transition for different states of the app;
• website loading indication;
• transition-based animation between pages;
• response to button actions.

Rive is a collaborative editor that assists in creating responsive motion graphics for different states and user inputs. This platform supports:

• lightweight runtimes to load your animations to apps, websites, and games;
• team collaborations in the cloud where the same file can be accessed from different locations;
• rigging the same animations to follow a consistent motion theme;
• animation interpolation with your app’s frame rate in real-time;
• the option to change your animation play speeds like slow-motion and time-lapse with standard quality;
• smooth blending and layering of multiple animations and creating one animation for different combinations of states;
• graphics manipulation with code to improve interactivity;
• data connectivity for graphics;
• runtime image swapping or colors/transitions.

Rive runtimes are open-source libraries that offer complete control on animation files across platforms and devices using the primary run loop.

They also let you deploy animations and their properties to all your products and touchpoints with optimized file sizes.

Design Engineering with UXPin

This tool lets you underpin the design engineering process of your UI/UX project.
It introduces manipulating interactive states, logic, and code components to render life to your digital assets.

Interactive Elements: These elements minimize redundancy and let you include interactive elements without duplicating your artboards.

Code Components: UXPin lets you design from a single source of truth. Prototyping is simplified with functional and interactive elements that the production code generates.

Conditional Interactions, Variables & Expressions: If you are deep into design coding, UXPin lets you get deeper into coded apps. You can add logic to your prototypes and store and manipulate user inputs in real-time.

Web Page Import: You can import an existing web page and kick-start your prototype.

Vector drawing tools: This feature lets you create and combine vector shapes to form icons or beautiful illustrations. It also allows for smooth pointing and curving.

Built-in Libraries: These let you quickly access iOS libraries, design material, and bootstrap faster.

Code components: You can automatically sync React.js components in your repository to UXPin and prevent redrawing your patterns.

Accessibility Features: Designs for people with special needs aligned to the WCAG contrast standards can be efficiently coded.

Browser-based Device Mock-ups

Creating mock-ups for presentations, social media, mobile apps, and portfolios will continue in 2022. The Previewed app lets you create browser-based mock-ups on the go. It supports:

• browser templates;
• 3D snapshots & create 2D and 3D animation scenes;
• custom camera & environment controls to build studio-grade 3D renders;
• customized colors, positions, angles, and screen media changes;
• multi-device support;
• template storage to back up all the templates in the cloud;
• your mock-ups to export in jpeg, png, and mp4 formats;
• drag-and-drop positioning and rotation of components;
• alpha (transparency) channels for devices, texts & backgrounds.

Vectary lets you create, render, and collaborate 3D and AR designs in your web browser.

This platform hosts an extensive and growing library of free scenes, materials, and models that you can drag and drop to design 3D animations instantly. The other features include:

• external platform integration to add custom 3D models;
• hundreds of realistic and fully-textured materials to be inserted into high-quality pre-rendered scenes;
• viewport navigation, composition abstractions, subdivision modeling, materials, lighting, and rendering;
• ergonomic modeling that lets you smoothly loop edges and adds smart shortcuts to effortlessly model tasks;
• smart abstractions and generators that let you compose using dynamic parameters;
• Vectary Photon for tracking the path traced and viewing photorealistic rendering outputs in the browser;
• Vectary files-based team dashboard for dimension-based 3D collaboration;
• cloud support for embedding your website designs, printing them with a 3D printer, implementing them using Augmented Reality software;
• embed and publish 3D projects to any website without downloading files or compatibility issues;
• USDZ generator to place 3D designs into a real-life setting;
• import and Export of 3D assets using the GLTF interchange format.

Parting Words

Design is cyclical, while design trends are temporary. New UX trends come every year with a lot of repetitions and innovations.

Two things will remain constant in UI/UX design — critical thinking and relevance for all the trends above. Designers need to embrace these two tenets with a visual language that communicates design value and makes it worthwhile.

by Kh​arthiheyan Ma

Beyond Adult Learning Theory: Motivations of Adult Learners

While training may be necessary to employers, the employees will often balk. So, you have to ask, “How do I motivate the reluctant learner?" Like all things instructional design, the answer to this question is, “It depends.”

First, we assume that the employee is otherwise engaged in their job. How to motivate an employee to work, much less actively engage in training, is beyond the scope of this article.

Second, let’s get a working definition of motivation. Richard Clark (2019) defined it as “the willingness to get the job done by starting rather than procrastinating, persisting in the face of distractions, and investing enough mental effort to succeed.”

There are multiple reasons an employee may not be motivated, but let’s address the obvious ones – the ones I didn’t find in the academic literature – first. Don’t be the company that sends employees to safety training one week and have them violate all that they learned in the next week. You’ve not only negated that training, but you’ve also set up the mindset that training doesn’t matter and that employees will ignore anything they are told in training. A related tactic is to send an employee to training but still expect a whole week’s work.  With mixed messages and limited resources, the employee can’t do it all and will fail in one area or the other.

That brings us to self-efficacy, a person’s belief in their ability to succeed in a given task. Bandura’s (1982, 1997) Social Cognitive Theory posits that self-efficacy drives the exertion of mental effort (the cognitive resources used and allocating for learning). In other words, why bother if you won’t succeed? If you want someone to engage in their training, set them up to succeed. Because past successes can increase self-efficacy, make sure your training embeds small victories early on. But you have to balance it – an over-inflated self-efficacy can result in exerting too little effort, probably because they underestimate the amount of mental effort – the cognitive resources used and allocated for learning – required to complete the task. The anticipated level of mental effort is essential. Its graph looks like an inverted “u.” If someone expects too much mental effort (the task is too challenging), they won’t try. However, if they anticipate the task to take minimal cognitive action, they again will minimize how much they put into it. In practicality, this means you should be straightforward about the time and difficulty level of a class. An accurate description allows your learners to plan accordingly and avoid suffering the crisis of confidence that can come when they don’t succeed in something they expected to be easy. Additionally, well-designed training, especially those based on Cognitive Load Theory, can break even complex constructs into manageable sections.

This brings to mind attribution errors, one of Clark’s (2019) four reasons employees lose motivation. Attribution errors come about when a learner is trying to figure out why something negative and unexpected happened. Those who place the blame on something outside their control (e.g., I’m too stupid; the trainer’s test was too hard) are likely to quit trying. You can help motivate this employee by assisting them in concluding that the task is doable, but they hadn’t put in enough effort.

Disruptive emotions such as anxiety, depression, and anger can also impede learning (Clark, 2019). If there is test anxiety, a discussion with the employee is in order. Explain the purpose of the training is to teach and not to fail. Describe the testing process (pen and paper, computer-based, or hands-on) and assure the employee that passing is possible if they pay attention and invest effort. If the course is quite tricky and failing is a possibility, then addressing this will generally fall outside the realm of the training department, along with other types of anxiety, anger, and depression. Your organization probably has a process in place that perhaps involves the supervisor, human resources, and maybe an employee assistance program.

Along with lack of self-efficacy, attribution errors, and disruptive emotions, Clark (2019) discusses a values mismatch – when an employee doesn’t care enough to learn.  Assuming they are otherwise engaged in their job, there are several ways to address this. First, find a way to get the employee interested – perhaps as a challenge or in some way linked to the tasks the employee likes to do.  Another tact is to emphasize the importance and utility of the training, its impact on the employee, the group, or the company.

Most educational theories of motivation involve the constructs of self-efficacy, persistence, and mental effort. Well-designed training can assist in all these. Good training with a balanced cognitive load is doable, even if it takes time and effort. Radiant Digital is well-equipped to help you with your training needs. Reach out to us and see how we can improve your employee’s training.

 

References

Clark, R. E., & Saxberg, B. (2019). 4 Reasons Good Employees Lose Their Motivation. Harvard Business Review.

Bandura, A. (1982). Self-efficacy mechanism in human agency. American Psychologist, 37, 122–147.

Bandura, A. (1997). Self-efficacy: The exercise of control. New York: Macmillan.

by Dr. Sheila Mitchell

Championing ‘Secure CI-CD’ with DevSecOps using Gitlab Secure

A successful DevOps implementation has two cornerstones, Continuous Integration and Continuous Deployment. Enterprises can reap the bottom-line benefits of an optimized CI/CD pipeline by automating their build, integration, and testing processes. Conventional IT dev processes involve security at the end of the application or software stack. To break down development and delivery process silos and ship software faster and more securely, securing CI/CD workflows has become necessary. Governance shortcomings and fragmented toolchains also risk the continuous release and deployment automation for applications. Thus, DevSecOps is the natural next step of DevOps that converges development, operations, and security teams. The missing link in CI/CD pipeline optimization helps promptly manage persistent security threats in the enterprise ecosystem.

What is DevSecOps?

The DevSecOps process integrates IT security practices into your application’s entire life cycle. It factors application and infrastructure security considerations from the start without pushing the security team’s role to the final development stage. It is used to establish the following goals.

  • Empower the Development Team to optimize CI/CD security and automate remediation through the improved visibility of vulnerabilities, risks, and code coverage.
  • Prevent pipeline vulnerabilities using the incident history from InfoSec.
  • Maintain a Trusted Repository that is threat-free.
  • Verify functional stability, security & compliance before GO-Live.

Why DevSecOps Integration Matters

  • It tests every piece of code upon commit for security threats at optimized costs.
  • The developer can remediate while working on their code or create an issue with a single click.
  • The security team can monitor and manage lurking vulnerabilities captured as software development by-products.
  • A single source of truth can help with remediation collaboration among developers, operations professionals, and security experts.
  • A single tool minimizes integration and maintenance costs throughout the DevOps pipeline.

Enterprise DevSecOps Integration with GitLab Secure

With GitLab Secure, businesses can continuously secure high-velocity DevOps. GitLab Secure covers the entire DevSecOps Cycle from Manage to Defend in a single application.

A single sign-on eliminates the need for separate tool access requests, reduces context switching, and improves cycle time. GitLab Secure improves quality, security, and developer productivity by,

  • Offer actionable vulnerability findings through application security testing and remediation. This helps security professionals resolve and manage vulnerabilities easily.
  • Add Cloud-native Application Protection and monitoring capabilities to secure production environments.
  • Ensure Policy Compliance and Auditability through GitLab’s end-to-end transparency, MR approvals, compliance dashboard, and standard controls.
  • Provide SDLC Platform Security covering all the software stages.

GitLab Secure Features

Each of the following features displays vulnerabilities and analysis results in line with each merge request for immediate resolution.

Static Application Security Testing (SAST)

  • Scan the application binaries and source code to spot potential vulnerabilities (like harmful code leading to SQL DB injection) before deployment.
  • Scan results are collated and presented as a single report.
  • Assess vulnerabilities in the GitLab pipeline and manage issues with one click.

Dependency Scanning

  • Analyses external dependencies like libraries and versions for known vulnerabilities on each code commit in the CI/CD pipeline.
  • Identifies dependencies needing critical updates.

Container Scanning

  • Check for known vulnerabilities in the app environment’s docker images (such as using a dependency’s older version) using an open-source tool called ‘Clair.’
  • Help prevent the redistribution of vulnerabilities via container images.
  • Vulnerabilities are displayed in-line for each merge request.

Dynamic Application Security Testing (DAST)

  • Analyze running web applications for runtime vulnerabilities (like missing X content type options header) by running a live attack against an app or environment.
  • Leverage GitLab’s review app CI/CD capability to scan the SDLC earlier dynamically.
  • Display results in a sorted list of vulnerability severity levels.
  • Accept HTTP credentials to test private apps.

License Compliance

  • Help security teams scan all the licenses within project dependencies and tally them with an approved or denied list.
  • Automatic search for approved and unapproved licenses in project dependencies based on company policies.
  • Generate project-based custom license policies.

Security Dashboard

The Security Dashboard is a primary security tool that is available at the group and product levels. It provides an overview of security status and actionable insights to start a remediation process. This tool provides data visualizations for easy consumption of performance information.

Secret Detection: Secret Detection scans the repository content to detect sensitive API keys, tokens, and passwords that may get saved unintentionally to remote repositories. With Secret Detection, vulnerabilities are displayed by security scans in an intuitive UI for the developer to resolve them before deployment. The Security Dashboard and complete repository history scanning using SAST help prevent the accidental leakage of secrets.

Auto Remediation: Auto remediation offers automated vulnerability solution flow and fixes. Then, you can test the fixes. Once they pass, you can deploy all the tests for the application to the production environment.

 

Feature Flags: GitLab Secure also adds an Operations Dashboard called Feature Flags, in addition to their Kubernetes-native integrations and Multi-cloud deployment support. Feature Flag is a technique that reduces maintaining multiple branches in the source code (known as feature branches) to test the software feature during runtime before it is released. Feature flag linchpins a progressive delivery strategy allowing multiple software iterations to be simultaneously delivered without constant branching and merging costs.

Setting up DevSecOps CI/CD Using GitLab

Prerequisites

  1. An existing or new GitLab Account.
  2. Set up for a new GitLab Project.

Step 1: In your GitLab project, navigate to your repository.

Next, add your source code to this repository using your IDE tools.

Step 2: Add a new .gitlab-ci.yml file for the CI/CD pipeline stages, tasks, etc. GitLab will auto-detect any changes to this file and run your CI/CD pipeline once any changes or updates occur.

Step 3: Set up GitLab Runner to run jobs in the CI/CD pipeline. You can access this Runner at Setting -> CI / CD -> Runner.

Step 4: Redeploy your CI/CD pipeline by navigating to project -> Pipeline -> Run Pipeline.

This will successfully set up your CI/CD pipeline in GitLab.

All the security features mentioned previously can be added to your DevOps CI/CD pipeline using Gitlab’s default security templates.

Step 5: Next, manually include the security scan templates in the .gitlab-ci.yml file in your existing project.

Step 6: Commit a change and observe your new DevSecOps CI/CD pipeline progress while checking your security and compliance board.

Access your Security Dashboard and other security options using the left-hand menu in GitLab.

Any vulnerabilities will be displayed on the page in red color under Repository->File.

You can view the vulnerability report by clicking on Security & Compliance->Vulnerability Report

From here, you can keep improvising your app’s security by updating the node js, other docker container package dependencies and modifying your Docker file.

Parting Words

Overall, with DevSecOps available throughout the CI/CD workflow, a single application will help companies improve how they deliver code, reduce release cycles, and innovate. GitLab Secure is a DevSecOps game-changer that applies to governance, construction, verification, and deployment.

Radiant Digital empowers enterprises with an optimized DevSecOps framework using GitLab Secure. Let’s connect to discuss more.

by Sri Arepally

Incorporating UX Research to Inform Business Strategy in Tech

In the context of the modern tech sector, user experience (UX) researchers, UX research (UXR) approaches, and methods can greatly improve business strategy.  Though UXR is commonly employed in designing software or devices or as part of the service design process, this practice can also provide essential insight and expertise in formulating business strategy.  UXR leverages a powerful mindset and methodological toolkit to ground strategy in the actual needs of customers or the workforce charged with fulfilling customer needs in UXR oriented toward enterprise software or other technology.  Incorporating UXR as a component of business strategy is analogous to making a roadmap from the deep knowledge of the land rather than a cursory survey or guessing based on a few opinions.

The Value Add of UXR in Business Strategy: Beyond Apps

While the most well-known role for a UXR practitioner is to be embedded and work closely with a design or design and development team, the capability these professionals bring to an enterprise extends far beyond the proximate level of product design.  UXR adds value to business strategy because of the broad knowledge base, varied experiences, and can-do mindset of these experts.

For example, UXR is essential to an adaptation of the design thinking process to service design.  Service design applies design thinking to optimize service by directly improving an employee’s user experience of workflows or processes and indirectly improving customer experience.  Service design may be a strategy component, especially when there is a need to pivot or change the business culture to adapt to changing circumstances or customer needs.

Another vital element UXR perspectives can offer to business strategy is an ethical framework based on a deep empathy for the constituents of a business, be they external customers or internal stakeholders.  For instance, social scientists with long careers in UXR, such as Ken Anderson (Intel) and Sam Ladner (Workday), have been instrumental in ensuring that scientifically based ethical considerations are surfaced in strategy sessions with key corporate leaders.

UXR in discovery research and exploratory research can be crucial in knowing when to adopt an initiative or product a bit, pivot, or scrap an idea entirely in the startup world.  In my previous work in startups, there was one case where I used the research method of netnography, a modified approach to ethnography focused heavily on online interaction. It helped guide the design of a property tech application whose purpose was to help people get to know their neighbors more readily in dense, urban settings.  This study surfaced themes of buying and selling goods, leisure, and real estate on Facebook interest groups geared toward the target market.  These insights helped target the UX design of the application and informed the launch strategy.  Alternatively, I led an exploratory research project that triggered the indefinite parking of an application that a CEO thought was a great idea but about which a sample of people in the target demographic was decidedly unfavorable.  This decision was demotivating in the short term but saved the startup time and money to focus on more important initiatives in the long term.

Incorporating UXR into strategic decision-making enables companies to form a complete picture of the current state of affairs, discern how well a current initiative does or meets user needs, or spot emergent opportunities.  For instance, discovery research is a highly effective way to map out what sort of initiative to embark upon or what product to build.  Similarly, ethnographic research as part of a mixed-methods approach that incorporates quantitative trend data can yield insight into the lived experience of workers or potential customers that can surface blue ocean opportunities.

UXR Approaches to Business Strategy

Two UXR-related approaches positively impact business strategy; these approaches are research strategy and strategic research.  While research strategy is the process of formulating and executing a grand vision of how the research will ensure and amplify enterprise success, strategic research is research conducted to set direction, map out strategic initiatives, or surface new opportunities.  Research strategy and strategic research are complementary modalities of crafting a business strategy that is attuned to the needs of internal and external stakeholders and maximally effective in achieving business goals.

In practice, an effective research strategy entails having a UXR or other type of research practitioner with enough access to senior leadership and decision-making authority to determine the direction and execution of UXR or other types of research that benefit an enterprise.  Areas of responsibility for a research strategist should include:

  • overall vision and mission for the research group or function;
  • research topics;
  • research project plans including, goal, design, and methodology;
  • research team organization and deployment;
  • personnel allocation to projects;
  • training;
  • and having a voice in research budgets.

All of these aspects of research strategy must tie in directly to business goals and objectives.

For strategic research, key considerations involve researching early enough in strategic initiative formulation to positively impact selecting initiatives that balance innovation and business goals with the reality, needs, and pain points of the people who would execute or benefit from said initiatives.  Discovery research is a strong approach to strategic research because it takes place before formulating an initiative or design of a product.  Examples of strategic discovery research include Facebook’s pathfinding program or an ethnography of the “day in the life” of a potential customer base that yields insight and recommendations for a new service or product line.  Strategic research is a key feature in building or doing what has the most value for the enterprise and impact for its customers.

Businesses would employ UXR in research strategy, strategic research, or research strategy and strategic research done in concert in the tech spaces.

Wrapping Up

UXR is a transformative value-add for business strategy and can be employed comprehensively and flexibly to realize the grand vision and achieve business goals.

Radiant Digital’s growing UXR practice is ready to transform your business strategy with keen insights and a deep understanding of people.  We are committed to guiding a winning corporate strategy in the ever-changing digital economy.

by Dr. Racine Brown

[Webinar] Strategic and Tactical Enablers for Achieving Digital Transformation

https://youtu.be/6-DYKT1-HXs

Radiant CEO Dr. Shankar Rachakonda was honored to deliver the keynote presentation at the Federal Digital Transformation Conference in April 2021. His 45-minute presentation offered a tactical view of digital transformation and was one of the highlights of the virtual conference.

by Dr. Shankar Rachakonda

Helpful Frameworks for Redefining Your Learning

Instructional designers all have the same essential mandate to design educational interventions that result in closing performance gaps. For decades now, technology has been used to redefine the way we train. The recent pandemic has accelerated the application of technology to transform traditional classroom training into remotely delivered, blended experiences.

As IDs and facilitators, we’re under tremendous pressure to curate engaging learning experiences and achieve effective, efficient knowledge transfer. A tall order when in-person training was one of the arrows in the quiver, the difficulty is greatly compounded in fully remote offerings. It is more remarkable still if the offering is both fully remote and asynchronous.

Using technology to augment or redesign learning is an opportunity to improve the learner’s experience, but frequently it results in the opposite outcome. Improving and upon existing methods is difficult; we tend to stick with what’s worked in the past. This is true of in-person or remote, synchronous or asynchronous learning. We can, however, look to another group of educators for help in framing and vetting our proposed designs.

The two most popular frameworks used to plan technological integration into K-12 learning contexts are the SAMR and TPACK models. While these are models frequently associated with K-12 education, they offer the ID working with adults in professional contexts a valuable tool to help frame and vet design decisions before investing in them.

SAMR visualizes a continuum of technological transformation. The first two levels, called enhancement, are the typical ways that we use technology to change the way we transfer knowledge. While the second two, modification and redefinition, seek to transform how we enable learners to reach objectives.

SAMR provides us with a handy way to think about our lesson planning and helps us set quantifiable goals, especially when updating existing content. SAMR has an oft-cited inherent pitfall; it may provide users a false sense that the goal should always be redefinition because it is a stepped framework. Not every task is best served by redefinition. We may do a disservice to learners if we over-transform functions that can be more efficiently accomplished with a traditional or low-tech solution. This is where using TPACK in conjunction with SAMR can provide us with a complete way to think about our overall offering and its objectives.

TPACK reminds us that introducing technology itself is not the goal but instead an improved learning outcome. It posits that three dimensions of knowledge must come together to create a practical implementation of technology. The dimensions are pedagogical, content, and technological expertise, i.e., technology itself doesn’t necessarily equate with better outcomes.

  • Content knowledge, do we have the requisite knowledge to transfer it to the learners effectively?
  • Technology knowledge, do we know how to implement the technology in question properly?
  • Pedagogical knowledge, do we know the best methods to teach the content?

The goal should be the convergence of these three areas, technological pedagogical content knowledge (TPACK). Having only one or two of these areas taken together as the basis for a given objective is likely to result in a suboptimal solution.

For example, you have equipment maintenance training traditionally done with a representative piece of equipment in a classroom setting. Still, it is no longer feasible for logistic reasons to have the training done in a central location. You decide to transform the exercises by using an AR solution so that the training can travel. You have the content knowledge (through your SMEs) to commission the models. And you have the pedagogical knowledge and, by using cognitive task analysis, have designed a relevant and effective progression of objectives supported by reciprocal teaching. But your facilitators rotate, and they don’t have adequate support at the remote training sites, resulting in significant downtime and a poor overall learner experience. Thus, your solution fails to account for the lack of technological knowledge and therefore fails to reach TPACK convergence.

By framing potential avenues for transformation using SAMR and vetting options using TPACK, we can identify where the best bang for our development buck might lie. Both models have drawbacks, not the least of which is the lack of quantitative study tying the models to the more significant body of educational research. Despite this, the models can provide a helpful framework when planning course enhancements or redesigns. However, their use must be coupled with evaluation criteria to define the enhancement’s success or failure.

Looking for ways to reframe our development choices is an excellent way to check assumptions and avoid mistakes. At Radiant Digital, we look for new ways to reframe our thinking about professional training to efficiently help our clients apply their training dollars. Radiant specializes in custom content creation for enterprises with learning needs unique to their organizations. We can help you design, develop, and implement your learning solutions from cognitive task analysis to learning application development and integration.

Koehler, M. J., & Mishra, P. (2009). What is technological pedagogical content knowledge? Contemporary Issues in Technology and Teacher Education, 9(1), 60-70.

Puentedura, R. R. (2013, May 29). SAMR: Moving from enhancement to transformation [Web log post]. Retrieved from http://www.hippasus.com/rrpweblog/archives/000095.html

by Erik Fullerton