Going from Lo-fi to Hi-fi in Adobe XD’s Preview Release

“Is it possible to go from low-fidelity designs and information architecture to high-fidelity designs?” A week before we launched Adobe Experience Design CC’s first Preview, someone asked this question about the product on Twitter, and it just made me stop and think. The question, of course, is really what distinguishes UX and the rest of the design world. As I shared in a blog post (okay, it was a rant) a year and a half ago, there are plenty of people who know how to use Photoshop, but can’t explain why an element is where it is.

In the beginning stages of Adobe XD, the entire team put on our user researcher hats and began to learn more about what the industry was doing in the space of UX and mobile design. We talked to people who were creating high-fidelity interactions using AfterEffects or HTML, JavaScript, and CSS. We talked to a group of people who just wanted boxes and wires and nothing else. And, of course, we talked to a large number of people in between, some of whom were very opinionated about the proper way that UX Should Be Done™.

One lesson that I learned, though, is that the process of designing at low-fidelity helps designers to focus on the application’s structure and how users should interact with it. This is a critical step in designing an application or a website that forces the designer to work through a certain set of problems before delving into the more detailed issues of color and style.

Days after this question first made its way across my desk, I got really curious about the answer. Sure, it was theoretically possible, but how fast was it to go from a low-fidelity to high-fidelity design? What things would I do early on in XD that would make it possible to launch myself into a high-fidelity prototype? How fast could I really go?

So, I put on my scientist hat, pulled out a timer, and designed an application.

This is the story.


Step 0: The Scenario

I didn’t learn how to outline a rough draft until I taught high school English. Nowadays, I outline everything from novels to blog posts to corporate presentations. This process lends itself well to designing an application, and I knew that I would solve a number of problems by writing down what I wanted to accomplish.

Brainstorm.

As this was an exercise, I could more or less create any app I wanted. I ended up simply going with what royalty-free images I had on hand: photos of myself, places I’ve been in the past couple of years, and my two cats. The cats won out because cats rule the Interwebz, and I knew that the app would end up going into a blog post.

Enter my Shelter Cat application, a mobile application for people to meet (and hopefully adopt!) available cats in a nearby shelter.

I know that it normally takes professional designers weeks, if not months, to go through this initial step of brainstorming and requirements gathering. As evidenced in the hasty scribblings in my notebook, I scrambled through this process.

That being said, I found this time valuable, as I was able to write down exactly what the app was going to accomplish and how it was going to do so. This made the layout step much faster, so it paid for itself many times over.

Total time: 5 minutes.

Step 1: The Shape

“I teach that the lo-fi design is like the little black dress.” I recently sat down for a quick cuppa with Ashley Karr, an instructor with General Assembly in Seattle. She was in our office for the Adobe XD launch event on Twitch.tv, and we had a long, rambling conversation about everything from teaching to anthropology to pets. But when she talked about lo-fi design, her eyes snapped with excitement. “It’s less about the color and more about the shape.”

At that point, I had already blown far past the low-fidelity and into the high, but I found that her lesson resonated well with my experience with lo-fi design. I found myself making decisions that were more based on the macro-interactions between screens instead of the micro-interactions between elements. I focused on how the user traversed from screen to screen, including methods of logging in and what to display in both cases, instead of deciding whether or not a button were the correct distance from the text above it.

There were a number of things I did to save time in this phase of the design:

  • Built-In UI Kits. One of the first things I did was open the iOS UI kit from the Welcome screen, which made reusing elements really easy. I had a status bar and keyboard on hand to use in my iPhone 6 layout in literally seconds. It was the one place where it was easier to use a high-fidelity object instead of a lower-fidelity object. Of course, XD also has kits for Google’s Material Design and Windows 10, which makes designing easier for common platforms.
  • Repeat Grids. The repeat grid feature saved me so much time in aligning objects. Anywhere I could use a repeat grid, I did. I even nested a repeat grid within a repeat grid in order to take advantage of the ability to change the padding easily between elements.

I knew, of course, that I could always break them apart later if I needed to, so I wouldn’t have to be committed to keeping the repeat grid throughout the lifetime of my design.

Since you can drop in images into any shape (and drop in a group of images into a repeat grid’s rectangles to give each row a different image), I felt free to use rectangles and other shapes as placeholders for images.

  • Artboard Duplication. Creating a new copy of my existing artboard is as easy as holding down the Option key and dragging the artboard title, so I also made sure to make the text elements reusable. The titles in the artboards are center-aligned, which made editing them afterward a cinch. I also drew a rectangle with the Text tool to create an area text box that allows text to flow within the area. This, I knew, would come in handy later on when I changed the font and text size in the high-fidelity prototype. (Text from Hipster Ipsum, one of my favorite lorem ipsum generators.)

I then spent about ten minutes wiring up the app in Prototype mode. By switching over into a different view, I was able to focus more on defining interactions. Adobe XD currently supports slides in the four cardinal directions and a dissolve transition. XD remembers the last transition you selected, so I tried to batch up as many of my transitions of one type (for instance, all Slide Left) and wiring them sequentially. Then, I changed the transition type while wiring in another direction (all Slide Right), and repeated for Slide Up, Slide Down, and Dissolve.

One thing I found handy was grouping all the contents within a “cell” in the repeat grid in order to make one giant hit point. I was really going for the macro interactions, and making the hit points giant was more than enough for me at this step in the process.

I tested my interactions using the Preview window in XD (Cmd-Enter), which gave me enough feedback to test my interactions and make sure the app flowed the way I wanted it to.

Total time: 1 hour, 21 minutes.

Play with the prototype!

Download the file!

Step 2: The Deeper Look

Although the low-fidelity design wasn’t focused on visuals, it turned out to be easy to turn the basic structure into an attractive, high-fidelity design. Besides the strategically-placed cat photos, I rounded many of the corners in my buttons, selected colors, changed the font, and drew a bunch of icons and logos. I also fixed some of the interaction issues I found after the first round of testing, which led to the addition of two artboards and an extra button in the initial screen.

A couple of things I did to make the process faster:

  • Repeat Grids. As I mentioned, I dropped images into the placeholders and rounded the corners of the repeat grid. I also ungrouped the inner repeat grid to apply different colors to the backgrounds, and placed my individual vector drawings over them. I ended up grouping the vector drawings with the circles.
Dragging images onto a repeat grid element inserts a different image as the fill of each repeating element. This is an animated GIF and so is of poorer quality than a still screen capture.
  • Text to Path Conversion. Speaking of vector drawings, each one of these icons was drawn only once, then resized down to these tiny little icons. I knew that text would resize in point sizes, and I wanted to ensure that the letter A would remain perfectly in sync with the rounded rectangle. I selected the text element and used Object > Path > Convert to Path to make the text a path object instead.
  • Boolean Operations. I drew this little vector cat using XD’s non-destructive Boolean operations. By liberally using the addition and subtraction buttons with ovals, rectangles with rounded corners, and paths for ears and nose, I was able to make the cat logo with minimal fuss.
  • Repurposing Hit Areas. Where I could, I reused hit areas to avoid having to re-wire the prototype. In some places, I simply re-purposed the placeholder as an invisible hot spot. While this was a little cumbersome (see my laundry list of issues below), it proved to be a functional workaround.
Final prototype wires

Animated GIF of the prototype running on my phone. Unfortunately, it’s poor color quality due to the smaller color spectrum in GIFs.

This phase of design was much more focused on the aesthetics of the app than defining and testing the workflow. I found myself making decisions about color, shape, typography, and iconography in this step. Had I not gone through this process, it’s likely I would have iterated multiple times in this phase, spending far too much time making icons in different colors and shapes to fit my design as I built out the information architecture.

Of course, I tested the finished design on my phone because I wanted to determine whether or not a full screen image of the adoptable pet would be compelling enough to encourage people to adopt a cat.

(Answer: I couldn’t stop looking at that face. Good thing she’s already mine.)

Total time: 2 hours, 35 minutes

Play with the prototype!

Download the file!


Initial Success and Growth Opportunities

I was able to create an interactive design for a new application in just about four hours, which is incredibly fast. I found it surprisingly easy to step from a low-fidelity design to a high-fidelity design; I only had to make minor adjustments to the interactions, select fonts, create icons, add photos, and create placeholder text.

At the time that I’m writing this blog post, Adobe Experience Design CC is in its first preview. The exercise highlighted some growth areas that we’ll be addressing in our monthly releases. Our team is constantly using the product to evaluate what works and what doesn’t, and I walked away from this particular experience with a laundry list of tiny pain points and improvements that the team should address. Some examples, with links to our public features database:

While we try to smooth out the bumps in the design and workflow of Adobe XD, we’re also looking to you, our customers, to help us identify these issues. We’re hoping that you’ll help us surface these annoyances as you begin to work in XD. Just as you iterate on your designs over time, we’re refining XD to be the tool that you need it to be. So hit us up in our UserVoice database or in our public forums and let us know what you think!