Live Prototyping with Adobe XD

by Matt D. Smith

A few weeks ago I was invited by Adobe to livestream my app design process on adobelive.com, hosted by Paul Trani and Michael Chaize. The goal was to show how to solve a design problem with Adobe XD.

After some deliberation, I decided to design a simple sandwich building app for a fictitious company called, San Franwich Co.

Below are some sketches and notes I put together on the plane headed to SF. I even wrote a small project brief and a few requirements for the app.

Project Brief

San Franwich Co., a super-fast custom sandwich delivery company, wants to build an iOS app to allow customers to digitally create sandwiches and have them delivered.

Project Requirements

  • Build a custom sandwich
  • Have it delivered
  • Track progress
  • Repeat orders
  • Speed! It’s gotta be fast

I was initially worried that that would be too little content to cover over the course of 3 days—roughly two hours per day. As usual—when preparing material for a workshop or a talk—my concerns were dwarfed by the fact that we barely got through with the custom builder only and not much more.

Overall, the feedback was overwhelmingly positive and I had a great time. Here’s a recording of each day’s session along with some notes about what was covered.

Day 1 of 3

During Day 1 all of the introductions were made, the project was introduced and we did a lot of planning and began the low fidelity wireframing process.

Day 2 of 3

Continuing right were we left off the day before, we tackled the remaining wireframes for the custom sandwich builder.

Day 3 of 3

The final day we started the user interface (UI) designs and created as many screens as possible during the short amount of time. Lots of little UI details and XD tips were uncovered.

Wireframe Prototype

This is the low fidelity wireframe we created during the first two days. This prototype embed code was exported directly from XD with the click of a button. Visit the lo-fi prototype here to see it in context with the comments the audience left.

Fonts used

  • SF UI Text

User Interface Prototype

On the last day we explored a visual direction and created the UI for the app. You can view the prototype with comments here.

Fonts used

Checkout how easy it is to export prototypes from XD and grab the embed code.

Download these XD files created during the live stream