Over a million developers have joined DZone.
{{announcement.body}}
{{announcement.title}}

12 Design Technologies Highlighted by the Ten-X Product Design Team

DZone's Guide to

12 Design Technologies Highlighted by the Ten-X Product Design Team

While developers are paid to create code, sometimes you have to let your inner artist out in order to make the app as good as possible.

· Agile Zone
Free Resource

See how three solutions work together to help your teams have the tools they need to deliver quality software quickly. Brought to you in partnership with CA Technologies

What do you think about when you hear “design thinking”?

This is a question many design-driven companies have been asking themselves for quite some time now. At first, design thinking can be kind of vague and lead to many different answers. Recently though, tech real estate company, Ten-X, has been holding this question’s feet to the fire at their recent design-driven events. When asked about Ten-X’s design-driven culture and design thinking, senior product designer, Justin Baker stated:

“We see design thinking as a problem-solving mindset based in research to change existing business solutions into preferred ones. It’s about constantly innovating in a changing world. For instance, wouldn’t it best if we could encourage teams from business, engineering, design, and marketing to work together to find innovative solutions to problems? That’s one of the many benefits of a design driven culture, identifying and measuring business impact in a people centric environment that delivers the maximum value to customers and business teams.”

This mindset was the focus of Ten-X’s most recent design meet-up in late August. There, Justin highlighted the best research, visual, prototyping, and usability tools that bring teams together and offer the best solutions to business problems. This list has been compiled and summarized below. You can also view the presentation here.

Research Tools
Image title

Ethnio

Need help finding the right participants for your UX research? Ethnio helps recruit participants by providing a platform that incentivizes responses. For instance, New Relic was offering users $50 if they participated in their research. Ethnio also allows you to do preemptive surveys as well. You can ask users what they expect to see on your application, before even seeing the application itself.

Image title

Datanyze 

Datanyze evaluates the technical landscape by crawling million of websites to find out the specific technology providers each site is using. This tool is great for lead generation, learning where your users go after leaving your site, and conducting deep research into other companies you want to do business with in the future. 

Image title

Smaply

Smaply is a central research hub where you can create personas, journey maps, and stakeholder maps in one place. It is designed to be collaborative, so you and your team can work on these maps together. This tool primarily focuses on designing visual systems to analyze your team’s next steps.

Visual Tools

Image title

Affinity Designer

Sketch may dominate the Mac user space, but Affinity Designer is quickly becoming a strong visual tool for Mac and Windows users. It’s a good cross between Sketch and Photoshop (more so on the Photoshop side). It’s a great low-cost alternative as well. You can create high-fidelity mockups and graphics for just $50, no recurring costs. Affinity Designer’s strong PC designer community also makes it a worthy purchase. 

Image title

Figma

Figma is a web application and desktop visual tool. It focuses on rapid prototyping, multiple artboards, simple layers, vectorized shapes, and online collaboration. It is kind of like Sketch, but built for teams. With Sketch, you must install plugins to get feedback/collaboration features. With Figma, it's already built-in. This allows multiple people to work on designs at the same time. This tool could be the way to go if you're looking for a more collaborative approach to design work.

Image title

Snappa

Snappa is a great visual tool for non-technical designers. With Snappa, you can rapidly create graphics for social media, advertisements, and blogs without the assistance of a graphic designer. They have many pre-made templates, high-resolution photos, and other graphics already installed. All you have to do is drag and drop the pieces together. It's important to have visual tools in your organization that are also catered to non-designers. If they can't articulate what they want, then a designer is mostly going off an assumption of what they want. Snappa is a great way to meet in the middle and find what both parties want. 

Prototyping Tools

Image title

Proto.io

Proto.io allows you to create early stage designs to fully animated prototypes. It’s simple, you can easily drag and drop popular UI buttons on your prototypes and add transitional animations if you’re designing multiple pages. This simple to use interface gives it an advantage to other prototyping tools. For instance, InVision requires you to create five different screens to illustrate a simple drop-down animation. Proto.io requires you to do the same, but its clean interface makes this process a lot less complicated.

Image title

UXPin

UXPin allows you to create and collaborate on designs like other prototyping tools. It's contextual feedback system really makes it stand out though. Stakeholders and decision-makers can comment on and approve design from within the tool. These comments can easily be integrated with Slack and email so everyone on the team can see the approval as well. All and all, UXPin is great at bringing designers and non-designers into the prototyping process.

Image title

Framer

If you’re a programmer who switched to design, Framer may be the tool for you. Framer has its own JavaScript library that allows you to create any type of interaction you want. There is a big learning curve at first, but if you have the time this tool can be very powerful. Framer is great when you want to show what the final application will look like when everything is said and done. It can also add a nice wow factor if you’re giving a presentation. It’s a good collaborative tool for designers and developers as well. A designer could send a prototype design to a developer, and they can examine the speed of the micro-interactions. This allows them to build a better frame of reference for how fast certain interactions should be.

Image title

ProtoPie

Protopie is a mobile first prototyping tool that can create advanced interactions and animations easily. It doesn’t rely on code to create these interactions either, which makes it another great tool for non-technical designers. A designer could use this tool to help non-designers figure out which interactions they are looking to implement with their own applications. 

Usability Testing

Image title

Fullstory

Fullstory is a DOM streaming platform that allows you to watch how users interact with your application. It records all their interactions without them knowing, so it's very natural way to conduct a usability test. You can filter certain interactions as well. Say you want to see how users are interacting with a new feature you just implemented. Fullstory allows you to see the various interactions with that one feature without having to watch the rest of the clip. It’s a very powerful tool that can you help identify pain points in your application early on.

Image title

Usabilla

Usabilla focuses on post-hoc usability. Instead of asking users to rate a feature on a 1-10 scale, they can react with emojis. Often, we rely on net-promoter scores to gauge a consumer’s experience, but Usabilla is more concerned with how the user feels in that moment. This allows for emotion tracking, which creates a different genre of usability feedback that stands out from the rest.

Discover how TDM Is Essential To Achieving Quality At Speed For Agile, DevOps, And Continuous Delivery. Brought to you in partnership with CA Technologies

Topics:
usability testing ,design ,research ,visual tools ,agile

Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}