In the ever-evolving world of IT consultancy and digital transformation, Radiant stands out as a distinguished player.

With offices in the US, Canada, India, and Singapore, Radiant delivers results-driven services to a wide range of clients in various industries, Telecom, Oil & Gas, Sports & Entertainment, Education, Health Care, and Government

Their services range from digital experiences and application development to data engineering, data science, IT infrastructure, and workforce transformation. It has attracted a client base with prominent names like the National Institutes of Health, Verizon, Halliburton, Web.com, Navy Federal Credit Union, and the State of Florida.

Radiant’s mission to reshape industries and revolutionize user experiences has found a like-minded ally in Anima—a dynamic collaboration that has already spanned two impactful years.

I interviewed Jeff, the SVP of Services and Solutions at Radiant, and Lam, the Director of Digital Experience, to investigate why and how Anima has been part of the delivery process. 

The Digital Experience team (30 specialists within their workforce of 300) uses Anima’s Design-to-Code engine for new projects, Proof of Concepts (PoCs), Minimum Viable Products (MVPs), and comprehensive usability testing. The results? Higher product quality, shipped 2x faster.

Jeff also shared Radiant’s thesis around design and development alignment and design-ops maturity. I found it at the cutting edge of the technologies available today, as well as future-ready for what’s around the corner.

Q: Tell us about Radiant

We’re a growing business based in Vienna, Virginia with offices around the US and in Canada, India and Singapore. We support our customers in their digital transformation journey. That includes everything from strategy through digital experience, application development, data science, data engineering, infrastructure, and workforce transformation. Our clients include the Federal government, state governments, and a variety of world-class companies in the commercial sector.

Lam, the director of digital experience here at Radiant, is focused on redefining our digital experience offerings, taking advantage of emerging technologies to help us be more efficient, and ultimately build better products for our clients. 

Q: What kind of products are you building?

We often work in highly technical spaces. For example, we work with a large telecom client, doing things like advanced machine learning for 5G wireless signal propagation modeling, building visualizations of complex telecom networks, or helping them to create a better experience for their workers. 

A little background on one project for this client related to design automation. About five years ago we helped develop an internal domain-driven design system that subsumed numerous disparate user interfaces that company network engineers engaged with daily. This solved a lot of pain points in the organization, alleviating swivel-chairing and creating a more usable, intuitive and guided system.

Five years into this journey, and the entire application network IT portfolio has been standardized to this Design System. We continue to support by providing customer research services, design governance across the application portfolio, and managing the design system. In many cases, we guide the implementation of the design system when an application is being redesigned or developed, and that involves front-end development. So, that’s where Anima comes in—helping us maintain a well-structured tokenized system and going from design to code.

Q: What is Radiant’s workforce size?

We employ about 300 consultants worldwide. Our digital experience team is roughly 30 consultants; that includes people with expertise in areas like business anthropology, service design, user research, user experience design, and interface design.

Q: Tell us about Radiant and Anima

We recently introduced a new role within our organization—CX (Customer Experience) technologists. Their mission is to facilitate the design-to-development bridge—up to and including code generation.

Often our clients want us to quickly build POCs or MVPs for new experiences. They were asking us: “how can you guys get us from design to development faster?”. In the past, we used tools like Invision for basic prototypes, then we moved to Figma prototypes and things got a little better. But really, what we were looking for was a better way to test and a way to get to functioning application prototypes. 

Our journey with Anima and design automation started with one specific project where we really needed much more rich and realistic usability testing. We didn’t have the tools necessary, so we started to explore and understand what was out in the market. We looked at a couple of different vendors and found that Anima was the most holistic tool for our needs. We also use other tools, such as Tokens Studio, to help with design tokens. We started adopting these technologies about two years ago, and we feel like design automation isn’t fully solved yet. 

However, when it comes to code generation, Anima is the only game in town as far as we’re concerned.  A lot of people are very interested in code generation, given that everyone has tight resources, time constraints, and whatnot. Being able to produce a POC quickly, being able to tell clients we can deliver something in a week rather than a couple of months, being able to see something working in a browser so quickly, is incredible.

Q: Could you estimate how much time was saved thanks to Anima? – Compared to manual coding.

I would estimate we’re cutting the time to get from the starting line to a POC or MVP by about half (50%) using code generation. In more mature applications where we’re doing redesign or enhancement, it also cuts down quite a bit on design-to-dev mismatch and the wasted iterations that go along with it. 

Q: So, in addition to cutting 50% of the coding time, you also gain better product quality in fidelity?

Yes, product quality is better. It’s all about iteration time. 

Now we don’t have as much ping-pong between the design and the engineering teams. We used to spend a fair amount of time asking engineering to go back and fix design to code mismatch issues. And often, there were multiple cycles of “go back and fix it because it doesn’t look right”. And now, with Anima’s code generation, it’s virtually gone.

Q: Tell us about your thesis around design automation

We can start with a maturity model. At the lowest level of maturity, an organization might have a brand book. At the highest level of maturity, an organization will have a single source of truth between design and development that is continuously updated. We find most of our client companies sit somewhere around the third or fourth layer from the top of this pyramid.

We highlight the gap. This is something critical for any organization building digital products. We position our UX accelerator solution as a way to address the gap.  Our value proposition here, our solution stack, is a combination of our services and know-how, plus tools like Figma and Anima. We can help our clients adopt a baseline toolset—Figma, Anima, and a variety of other solutions. We can help them migrate into Figma from other tools, migrate, tokenize their design system, and immediately achieve efficiencies just in design processes. And then, ultimately, we can help them better connect their design and development environments. 

As we said before, design automation is still a work in progress for most organizations. Nearly all of our larger clients have a domain-driven design system in place. They use both React and Angular front-end frameworks. They use tools like Storybook to represent the components and so forth. And we have to make a connection between what’s in Figma, the design, the components that the designers are working with, and what’s in that developer code base. The approach we’re taking right now is largely leveraging code generation (Anima) for things like usability tests or for designing new domain components. In those cases Figma and code are synchronized continuously. And we have looked at many different technologies for doing this and settled on this stack and methodology.

Anima’s concepts align very well with our thesis.

Q: Amazing. What does your design-to-code process look like today? 

I’ll continue with the example we talked about earlier, the large telecom client. So in this environment the UX team uses a tokenized core design system, unless we’re working in a new domain and extending the system. Again this is a highly technical area—in nearly every project there’s new domain-specific work being designed in the interface. It gets much deeper than the standard components you find in a typical web design system like accordion control, cards, or whatever. So when we are working in those types of environments where it’s something that hasn’t been imagined in the design system before, then the design team will baseline new components and templates using code generation (Anima), and work with the dev team to extend them with interactive behaviors and get them integrated into the mainline system. 

In some cases, we’ll have executive sponsors give us the freedom to innovate outside the standard system, to really stretch and reimagine how things might work. And in those cases, we don’t have any choice but to use Anima’s code generation because we don’t want to manually code the new interface and custom components needed to solve a problem.

Before Anima, we’d use tools like Zeplin or Invision’s inspector. Developers would need to inspect things, figure out the design, copy and paste styles, and rebuild the design in code manually. Today, we can pull a component library and sync it to the Figma, hit Anima’s code generation button, and the design actually runs as code, getting us as close as possible to our desired end result—a live product. And then the developers are off to the races, integrating APIs and coding up the business logic to get things on the road.

Summary

Over the past two years, the Radiant team has leveraged Anima and other design automation technologies in order to complete a couple of months’ worth of work in a week. It is phenomenal. 

Radiant’s thesis around design and development alignment and design-ops maturity is at the cutting edge of the technologies available today and is future-ready for what’s around the corner. 

Anima will continue working closely with the Radiant team on future releases as we integrate with legacy code bases and existing design systems.

Special thanks to Jeff and Lam for sharing their insights and what goes behind the scenes.

If you did not try Anima yet, it is about time! 

The post Radiant: Delivering Digital Transformation – Twice as Fast With Anima appeared first on Anima Blog.

Name: Masoud Rawahi | Job title: CEO & Founder @PhazeRo

Imagine having a company that is dedicated to design, development, and education in engineering. Now imagine you find the solution that saves you time and increases work input. That’s exactly what happened to Masoud.

Masoud is the CEO and Founder of PhazeRo, an Oman-based company dedicated to software engineering, web development, and interaction design (among other things). Part of the service that PhazeRo provides is a complete solution for clients, this means they build websites, applications, and other products for companies of different sizes.

PhazeRo gets a large number of companies that require product development that are very different from one another. They soon discovered a huge hurdle that they had to solve fast, and with as little cost as possible.

“The problem is that there is a very clear separation between the two disciplines that should be working hand in hand: design and development teams. We found that there was a strong disconnect between the high-fidelity prototypes that we were presenting to our clients and the end results”.

“Clients would raise their eyebrows because what they were getting was not like the mockup that was presented to them”.

The team started to try and unpack what was happening to cause these discrepancies. How could they find a way to combine the two disciplines together the way they should be? So they began by creating design standards and putting a design system in place.

Then they considered working on a UI library. But they soon realized that not only was this incredibly time-consuming, and it wasn’t going to be cost-effective, at least not in the short/medium term.

“We have a lot of clients that need a product and need it now. We didn’t have the luxury of working on a UI library, and even then, it’s not that useful because we don’t have our own product, each customer is completely different from the other. Having a standard library wouldn’t solve the problem. That’s when we came across Anima”.

“In fact, our design lead got a promotion (in part) for discovering Anima and saving a lot of resources for us”.

An example of PhazeRo using Anima to streamline the production process

An example of a complete product created by PhazeRo using Anima with map intergration - Assarain Properties

At first, Masoud was concerned that the quality of the code wouldn’t be up to par with the companies needs. With the stress of projects piling up, he decided to try it out and has never looked back since.

“One of the things that were an initial concern for me was that the code wouldn’t be efficient enough to just copy and paste. But that hasn’t been our experience at all”.

Actually, we find that there are very few tweaks we need to make. It’s very close to just copying the output from Anima and implementing it directly into the frameworks we are using. It’s seamless and we love it”.

Once they began using Anima, they found that the handoff process became a much better experience. Developers were understanding exactly what they needed to design, and designers were seeing their designs come to life. More importantly, clients were getting exactly what they wanted.

“When we found Anima it was really amazing. It leaves very little room for assumptions around the properties of the different components of the page”.

“Anima has enabled us to increase our output by a good 25-30% while INCREASING the quality of our end products, as we’re able to spend more time on usability testing and final touches rather than ensuring that the developers and designers are on the same page”.

An example of Anima's code for one of PhazeRo's projects

Masoud is particularly dedicated to combating the way that design and development are taught and carried out in the region, it is a subject that he is passionate about. The ability to bridge the gap between design and development with Anima saves time and resources. This is exactly why Anima is a big hit with Masoud and his team.

The post How Anima helped PhazeRo increase output by 30% appeared first on Anima Blog.

For Gaia Zuccaro, a UX/UI freelancer for the past 10 years, design is something of a passion. In her day-to-day work life, she teaches UX design while maintaining a large Italian client base that includes consulting firms, startups, large corporations, and everything in-between.

Gaia creates websites, landing pages, and other digital touchpoints for her clients. She started out like most designers—designing with static images, explaining her ideas, and iterating repeatedly before development. But all of that changed 4 years ago when she discovered Anima for Sketch (and eventually switched to Anima for Figma).

Anima: a design-to-code platform for the entire team

“Clients often ask to verify if something is working before investing time in development. It makes sense and it’s a really important part of what I do today.”

Now instead of explaining her ideas with images and words, she could demonstrate her designs’ actual functionality using Anima—right from her existing design tool.

“I would often get the question from my clients if there is something out there to reduce development time? So I went on the lookout and that’s when I discovered Anima—first with Sketch thanks to the auto-layout feature.”

When asked what she loves the most about working with Anima, Gaia responded:

“I really like Anima because when I show Anima’s output to clients, they can already see it as a finished product, with layouts and micro-animations giving life to it. There is no need to envision anything, it is all there in front of their eyes.”

Gaia handed this high fidelity prototype to the developer for a major Italian bank

Reducing design iteration and dev time

Gaia’s client base includes impressive companies like Rai, one of Italy’s largest broadcasting stations, as well as numerous Italian banks and luxury design companies. She crafts a diverse range of websites and web apps, but one thing is constant. She uses Anima to save her clients a lot of time, money, and frustration.

“One of the companies I have worked with for many years now would use Photoshop. I helped transition them into Sketch and now recently with Figma, bringing Anima along the way from day one. You can imagine the leap from Photoshop to prototypes with Anima, they are very pleased.”

As a designer on corporate-scale projects, Gaia works closely with a ton of developers. And it’s no secret that designers and developers speak different languages. But using Anima as her “translator” has allowed Gaia to build great relationships with developers—especially when she’s saving them at least 30% of their coding time.

With Anima, Gaia has the power to overwrite some CSS transitions using skew transition 

“At first the developers I work with were skeptical, but when I hand off Anima’s code, they realize that they can navigate it easily enough and they quickly find that ultimately, Anima is doing at least 30% of the work for them. It’s a great base for them to build off, and this creates such a good workflow between us that things just speed up and run smoothly.”

A landing page Gaia created for a joint venture between a startup and an Italian bank: here she was able to export code and make changes to the CSS-typing effects in the HTML

From a week to a day

We asked Gaia what was the biggest advantage for her of using Anima for all these years:

“Anima provides 2 values: it saves time and money. I can design in Figma, turn it into something interactive, get feedback and make changes in a really comfortable way. I then get to hand off something to development that brings a final result in 1 day instead of 1 week.”

Gaia designed this form request and connected it to her email account using Figma with Anima

Better for clients, better for business

By breathing life into her ideas with Anima, Gaia is able to work faster and more productively with her clients. She’s also able to work in unison with developers by handing them quality code for the UI along with high fidelity prototypes. This saves devs a ton of grunt work coding the UI from scratch and guarantees the final product is exactly what she intended.

Anima has given Gaia the ability to bring her ideas to life swiftly, without compromising on quality.

Want to speed up your workflow, eliminate the handoff blues, and impress your clients at the same time? Try Anima now!

The post 4 years with Anima: “what used to take 1 week now takes 1 day” appeared first on Anima Blog.

Name: Stephen Callender | Job title: VP Product @ CrowdVision

You’d imagine a company that deals with social distancing would be super busy during COVID. You would be right.

Stephen is the VP product and designer of CrowdVision, a company providing analytics and insights on crowds and busy spaces. An already booming industry and now with a pandemic is a real necessity for products like these and they are needed now.

This is why working on many different projects, with fast-paced, and advanced requirements mean that Stephen has to provide quality results, and fast, and this is why he and his team turned to Anima.

“We were in a position where we had to build really quickly, for different screen sizes and remotely – Anima was an essential tool for us”.

CrowdVision dashboard showing insights for crowded spaces - using Anima

When he got a project with a huge corporate, his company was expected to deliver a crowd analytics product for concert venues, in a short space of time. This meant a whole new UI (user interface) for Stephen, the pressure was very real.

“I could design something in Austin and push out all these different code packages to my engineer counterpart in California and it actually worked. Without Anima, it would have been a ton of front-end development”.

Getting code from Adobe XD with Anima

On a different project, Stephen created an interactive prototype that implements videos. Working mostly on Adobe XD, he was now at a loss of how to embed videos in his prototypes.

Naturally, he turned to Anima to create a responsive, interactive prototype (in Adobe XD) and embedded the videos.

“For one project I had to put a text bar showing how to type a search term, XD doesn’t allow that, so I used Anima with Adobe XD. I found Anima to be a much more feature-rich prototyping tool”.

Rounding up our conversation Stephen discussed the biggest benefit Anima brought to his team, jokingly pointing out:

“Nobody likes to do front-end work, everybody hates it, it’s like what every full-stack developer feels. It’s grunt work and not what they are excited to do”.

The engineers of CrowdVision need to collect and work with a lot of data and analytics that later need to be presented in user-friendly dashboards. By designing the front-end in Anima and then using the code produced by Anima, Stephen saved valuable time. This allowed his team to work on the core of the product, the algorithms, and its backend.

One of Stephen's dashboards design with Adobe XD and Anima 

The ability to complement his skills with Amina (through Adobe XD), the quality working code, fast productivity and delivery, and the hours of work hours saved is exactly why Anima is a big hit with his team.

The post How CrowdVision used Anima to deliver in record time appeared first on Anima Blog.

Name: Kat Donegan | Job title: UX design manager @ Mediavine

Until recently, presenting a design to teammates, stakeholders, and user testers was done with static images. This required product designers to explain rather than demonstrate their proposed product’s behavior. Today, Anima gives designers the power to build fully functioning, responsive prototypes in their existing design tools.

Now instead of saying “this is what happens when you hover,” or “when you click here, this opens,” there is a way to present a prototype that actually behaves like the final product. That means animations and interactions are actually animated and interactive, so the interface does the talking. This is exactly what gave UX design manager Kat Donegan the edge to take her company to the next level.

Kat is a UX design manager at Mediavine, an ad-management company that helps bloggers monetize their content, and helps users grow their own businesses. As part of Kat’s job, she needs to present ideas to stakeholders and develop products that bring in customers.

“I was having a hard time presenting just static mock-ups to my stakeholders. Especially since stakeholders aren’t typically super technical. So that’s when I started to use Anima for Sketch”.

“Nowadays, I use the Anima for Figma. One of the things that I love about Anima is that it’s really easy and that it grows. It doesn’t require too much fiddling, rather it allows me to express what I intend to in my design when I’m presenting to stakeholders”.

Kat would find it difficult to sell her ideas to stakeholders based on static images, especially when what she’s trying to sell revolves around being responsive/its responsiveness/user experience. Now, she uses Anima to make her ideas come to life, and pitch her ideas to stakeholders across the board. Providing a full code-based prototype with all the bells and whistles gets her ideas across the line, and as a bonus, it supercharges user testing.

Kat's design in Figma with the Anima plugin

“Creating high-fidelity prototypes in Figma with Anima helps me to convince my stakeholders to actually run with a project.. they can have a better idea of how they actually want to work, a real feel of the idea and product”.

Kat has already used Anima for a number of projects in the past, she is even currently working on some big ideas and planning for the future with Anima alongside her, helping her breathe life into her ideas and vision.

“One project I worked on was our grow.me widget. In its very early phase when I was still proposing different designs for it, I used Anima. As a result of this design we now have a widget that when you click it, there’s some animation”.

“These are things that really helped when I was presenting this because we literally had no idea what this was going to look like. Now I have a way to present it”.

Kat's designs with Anima live and working

As anyone who works in product development knows, there is no product without the collaboration between designers and developers.

“There was an instance where I had to export my design as HTML code. The code was great in helping me hand off my design”.

“It served as a good base for engineers to start off, because they’ve never built an email before internally”.

“The code I pulled from Anima saved them a bunch of time and we were able to ship that out very quickly”.

Today, Kat’s company has grown from a 20 people company to over 100 employees in the span of 2 years. She now has other designers working with her and together they are showing their ideas exactly the way they envision them.

By bringing ideas to life, users are onboard much faster and products are shipped at a record rate, which allows them to work on more ideas and strategy. The ability to take an idea and present it exactly as it was intended, and then move on to getting it out there fast and at high quality, is the reason that Kat was able to develop the company to something bigger in such a short amount of time.

The post How this UX designer turned static mockups into live prototypes appeared first on Anima Blog.

Name: Matthew Aden | Job title: Developer @beckersafety.com

This time we’re looking at how Anima helped Mathew, a developer for Beker Safety & Supply, an eCommerce company selling on Shopify. Mathew joined the team a year and a half ago as the ‘tech Guru’ and was faced with the huge task of converting a very basic, templated website, into a Shopify online store.

“Last year, I converted a very customized website (HTML, Javascript) maintained by us to a Shopify site.

״The conversion process meant a lot of code changes. I had a tough time translating XD prototypes manually, so we got Anima and it helped me so much”.

For Mathew, as the sole developer for the company, it was no secret that the task of converting a templated website into a customizable Shopify site was something that was going to take a lot of his time. Before using Anima, it took Mathew months to develop the site.

Converting a website into a Shopify site using Anima

“I was hardcoding everything. I began last year and we finally released the site after 6 months. For the new site, using Anima, I started building mid-March and released April 1st. It took 2 weeks; it was quite unbelievable”.

Mathew works with freelance designers who design in Adobe XD. Handing him over XD prototypes, they expected a transformation of an exact replica as a working website in a short time span. But they came across a lot of miscommunication. A problem Anima solved for Mathew in no time.

“The Adobe XD prototype gave a feel and look of what we wanted the pages to look like, but this was really hard to translate manually. So we used Anima to take on the task and in no time.

Getting HTML code for an Adobe XD prototype with Anima

“I’ve already translated 10 website pages of design to HTML and CSS”.

For Mathew, reflecting back on what it was like working without Anima really demonstrates the real value he and his company got. Reducing production time from 6 months to 2 weeks is something that any company can appreciate.

“Anima produced thousands of lines of code for me. It saved me months of work.

Code package used by the developer

“Before using Anima, translating design to code was a real bottleneck. I physically had to keyboard create the code for every templated design, and edit it to make it match the prototype.”

The value that Mathew and the company got from Anima really helped him deliver on time. Anima saved him months of grunt work (as the sole developer for the company), freeing him up to do the heavier lifting.

The post From 6 months to 2 weeks: How this developer expedited a website using Anima appeared first on Anima Blog.

Name: Sandy Nguyen | Job title: Design student at the University of California Irvine

Sandy is a busy product design student. She spends endless hours building her design portfolio and freelance projects, between her classes. She doesn’t have the time to find a developer to help her show how her designed interfaces, websites and products work in the browser. A flat design does not show her true talents.

“Website templates are annoying to work with. Especially when you want to add elements like effects. With Anima I was able to do overlays easily, and I have to admit, I’ve never seen anything like it before”.

When she was approached by the CEO of a non-profit organization for a side job, she had to design a website that would be cost-effective and quick.

“I’ve worked with a lot of basic websites out there, we couldn’t necessarily design what we needed in terms of integrations. Prototyping with Anima was pretty awesome, I could add videos”.

A high-fidelity prototypes that Sandy made for an NGO using Anima

The main benefit Sandy felt from Anima was the ability to use her own design tool and create high-fidelity prototypes that can show her projects in a way without having to develop them.

“Anima’s features helped me design high-fidelity prototypes, saved me a ton of time and the need to look for a developer, letting me create a real portfolio that I am proud of”.

As a student, one of the benefits that Sandy got from using Anima (besides the useful features of course), was the support team. Often, she found herself stuck, needing to figure out how to solve issues she was still learning about.

“It’s awesome that you guys have an interactive support team. They’ll even go on your file and troubleshoot to see what went wrong”.

Sandy's responsive prototypes for her protfolio using Anima

In one of her freelance projects, Sandy needed to produce a high-quality responsive prototype. Using Anima she could add a contact form, get the Html/CSS, and create a reactive newspaper straight from inside Sketch.

“The best thing Anima gave me was the lateral flexibility in terms of being a product designer. Without Anima, the whole process would have taken weeks”.

Creating prototypes as a freelancer

We asked Sandy why she loves to use Anima and ultimately decided to have her portfolio with Anima, her response was simple:

“Anima gave me much more freedom over other platforms, I love that I can use my own design tools”.

Sharing her prototypes in her portfolio gave this student the edge that she needed. If there was one thing that really stood out from Sandy’s experience, it was this:

“Without Anima, I would not have gotten the job opportunities that I have today. I actually ended up getting an internship for a well known company in NYC”.

The post How Anima helped a design student land her dream internship appeared first on Anima Blog.