Adobe XD Design Tool: A Brief Overview and Helpful Features


During my Projects in IXD class last week, I presented a live walkthrough of some of Adobe XD’s most useful features and design modes, all in seven minutes. I wanted to share the ease of which one can learn Adobe’s design tool and how smoothly the program carries out complex tasks in the blink of an eye.

As we move into the ideation phase and are ready to start prototyping, we’re confronted with a number of powerful design tools: Sketch & InVision, Adobe XD, Figma, Balsamiq, or just good ol’ pen & paper.  But how do we know which one(s) to go with? When choosing a tool, it really comes down to preference, what works for me won’t necessarily work best for you and vice versa. But it helps to know a little bit about the options available, making it easier to choose the best fit for your project needs.  



Adobe XD (Experience Design), part of Adobe’s Creative Cloud, is a high performance UX design tool that helps create beautiful user interfaces as well as streamlining the user experience. Operable on both Windows and Mac, It allows you to design, prototype, and share your creations. You can share prototypes with stakeholders for feedback and validation, then share the design specs with developers. Being part of the Creative Cloud, XD allows easy integration of Photoshop and Illustrator files, as well as exporting into After Effects to create more advanced animations. XD can also open Sketch files, but this is still being improved upon as not all elements will translate between programs.


A subscription to XD alone is $9.99 per month. Adobe also offers an educational discount on the Creative Cloud, lowering it’s monthly price from $52.99 to only $19.99. Better yet, some universities such as Pratt Institute offer FREE Creative Cloud subscriptions through student and faculty accounts. Where I used to be paying a monthly fee, as Pratt student I’m now paying nothing for the same services and features.



The User Interface

Unlike most of Adobe’s programs, XD’s interface is minimal with easily discoverable functions. It’s main components are the design tools panel on the left with the assets and layers at the lower left, the artboards front and center, the property inspector panel on the right, and the modes and sharing options on the top bar.


A handy option is to show grids over your artboards. This helps with the precision and placement of objects, easily snapping them into place. XD provides square and layout grid options which can be adjusted in size to fit your preferences.

Repeat Grid

A tool that helps overcome the tedious task of repeating elements through copy and pasting, XD provides the Repeat Grid feature, accessed in the property inspector panel. This allows you to duplicate an element or set of elements by simply clicking and dragging.

Importing Content

Similar with the Repeat Grids in creating a friction-free experience, XD supports the flexibility to import large amounts of content such as text and images. Once you’ve selected the area where you’d like import items, you can drag text or image files from your computer directly into the selection and XD will scale the content across the design.

Prototype Mode 

In keeping with a streamlined experience, you can easily jump from design mode to prototype mode to create interactive shareable prototypes by connecting artboards and elements. It allows you to add transitions, animations, overlays, and now with a recent update (October 2018) prototype mode enables voice triggers and speech playback. Along with previewing a prototype, you can record the interactions and save directly to your computer.


XD enables sharing across various devices and platforms (Windows, Mac, iOS, Android). By clicking Publish Prototype or Publish Design Spec, the program will generate a shareable link which can be sent out for feedback and validation.



Adobe XD has come a long way since it’s 2016 beta version. Constantly improving and releasing powerful features, Adobe is increasing its competitive advantage in the world of UX design tools. There are still many other tools that are just as effective and efficient, (Sketch being the main competitor) and gathering basic knowledge about a few different ones can help with deciding which one will work best for you and your team.


Storytelling in UX


Everyone loves a good story, it’s how we connect and communicate with one another. Storytelling in user experience is no different. The benefits are more than just communicating and connecting with your audience – by approaching UX through the lens of a storyteller, one can significantly strengthen both the presentation as well as their own understanding of research and findings.


Listed below are some of the benefits of storytelling in UX

  • Offering a way of communication: Stories offer a different way of communicating with each, whether between clients and UX professionals, or the various teams involved in the research process.
  • People are more likely to remember stories: More memorable than plain facts, stories make information easier to digest. Cognitive research has extensively studied the impact of storytelling on a person’s ability to retain information and how we learn new things.
  • Stories can be persuasive: One of the most powerful tools of storytelling is the ability to inspire people into action, they can positively impact how users interact with a product or a brand, or persuade clients to make changes for improvement.
  • They entertain: Stories capture attention. Typically, a site/product has around 10-20 seconds to grab a user’s attention before they leave and move on. Stories offer a way to draw users in through entertainment.
  • They create shared experiences: Stories are more than just a transfer of information, they help build connections with the audience. When stories bring relevance to the lives of their audience, they’re drawing on the concept that people are not logical creatures, rather we engage through our emotions.

Now that we’ve addressed some of the benefits of storytelling, how do we incorporate them in UX? Below are the key fundamentals to telling a good story.

  1. Reason

The most important fundamental of storytelling is the WHY. Start by addressing why you are doing what you are doing. What is the main point you want your audience to take away? Without a reason, you have no story.

  1. Main character

The main character is the hero of the story. The hero is not you, or the brand or product, the hero is the user that you are serving. You are there to assist and help the user through their journey. You are the Alfred to their Batman and you help the user get things done (Dan Nessler, 6 Storytelling Principles to Improve Your UX).

  1. Conflict

The conflict is where you illustrate a point of pain. This helps your team see a problem from the user’s perspective. UX is all about seeing from the user’s perspective, it’s about finding and resolving the conflicts that they deal with.

  1. Structure

This is how the story will be organized. The most common and successful method is the three-act structure (beginning, middle, and end). This can align with customer journey mapping and can help you understand the users’ motives and end goals.

  1. Relevance

A good story creates awareness in the listener by sharing something they can relate to. As previously stated, people are not logical, we engage more when our emotions are involved. Stories unite ideas with emotions. The goal is to tell a story that triggers emotion in the hopes that the audience will walk away with a positive experience and a desire to share those experiences.

Storytelling in UX combines the power of cognition and emotion. Don Norman expands on the power of emotion through his three levels of processing: visceral, behavioral, and reflective.


But maybe storytelling isn’t for everyone, some people may not feel confident enough in their ability to tell a good story. The great thing about storytelling in UX is that it doesn’t require you to have a background in creative writing or literature, stories are being told through various methods currently commonplace in UX design and research. User personas, journey maps, interactive design elements, scenarios, and gamification are just a few examples. These methods offer ways to visualize and organize your findings and research and they serve as storytelling elements. A story is just another way to frame user experience, and a compelling one at that.

“Stories are a powerful tool in user experience design. They can help you understand users—and their experiences—better, communicate what you’ve learned, and use that understanding to create better products.”

-Whitney Quesenbery & Kevin Brooks, Storytelling for User Experience

Design Critique: Sweat (iOS App)


Sweat is a fitness lifestyle application created by Australian personal trainer Kayla Itsines. The app is based on her world-famous Bikini Body Guide (BBG) training program and her healthy meal guides. It provides workouts and meal planning all within a mobile device, acting as both a fitness instructor and nutritionist. This critique focuses on aspects in the “Food” and “Activity” modes of the app.

Strong Discoverability in “Food” Mode

One of the most complex, yet well-designed areas of the app is the “Food” mode. The section employs strong use of signifiers, communicating where and how an action takes place, in this case by tapping and swiping. Meal options are available for each day of the week, and the arrows above the week signify that the user can view meals for previous or future weeks. To view a recipe, just tap on the meal.

Good Design in a Digital Grocery List

The checklist icon brings the user to an overview of groceries for the week. By tapping on a food group item, a detailed list appears for that group. Checkboxes to the right of the list signal that tapping one will fulfill that requirement and the user receives feedback with a checkmark in the box and a line through the list item. A conceptual model is formed by this grocery list layout, and in providing the knowledge of what is needed for each meal, the app reduces the need for knowledge in the head.

Flexible Settings

Another component of “Food” mode is the settings option. The settings provide flexibility for the user’s diet and their measurement preferences. This would be considered an inclusive design, in that many users can benefit from this section.

Confusion in “Activity” Mode

The app’s design is complex with many functions, offering instruction from how to do a push up to how to make a chia seed omelette. Most of the app deals with good complexity. As Don Norman argues, “complexity is essential: it is confusion that is undesirable.” An area of the app where complexity turns into confusion is in “Activity” mode.

“Activity” mode lets users view their workout history and affords planning future workouts. I’m going to focus on an issue that comes up while viewing previous weeks. Say the user is in Week 3 of their program. If the user taps the arrow provided at the top left of the screen next to the specified dates, the app will show the previous week’s history. Say the user goes back before week 2, before week 1, and enters into the history for the week before the program started, this is where the app’s design fails. If the user views a week before they started the program, the app mistakenly transfers the information for Week 1 into what should be a blank week. This causes confusion for the user, so they try to backtrack. Now if the user tries to go forward in time (to Week 1 of the program), the app will show Week 2’s info on Week 1’s page. This causes the user to feel frustrated while trying to remember what exercises they did that week. A gulf of evaluation is formed when the user is confronted with inaccurate and inconsistent information.


One solution can be to place a physical constraint, a forcing function (e.g. notice alert), if the user tries to view weeks prior to the program’s start week. This forcing function can be a pop-out box notifying the user that they are about to view weeks that are before the user’s start date of the program.

Another solution is using a physical constraint to block the user from even viewing any weeks prior to Week 1 of the program. Make it so that the left arrow is absent on Week 1’s page, making it no longer a possibility for the user to go further back in time.

And yet another solution is to keep all weeks prior to Week 1 completely blank, eliminating the user’s need to look further back.

Through the use of signifiers, feedback, and conceptual models, the app’s discoverability and understandability is strong, but can be greatly improved with the use of constraints. Overall, good outweighs the bad for Sweat, but there’s room for upgrades.