XD Prototype Project
Software Purpose: Create digital prototypes for desktop, web, or mobile applications.
Workshop Project: In the XD workshop, we learned how to create a mobile app prototype using the design, prototype, and share functions in the software.
I've been using various digital prototyping software in my classes for a few years, so it's great to have another option to show students. In my XD project, I replicated one of my previous mid-fidelity prototype class examples that I originally designed in PowerPoint and MarvelApp. The purpose of this mobile app prototype is to help runners feel more safe when running alone.
Here is the test packet (with design motivation and test steps that direct the user on how to walk through the prototype) and the original PowerPoint prototype slides as a comparison.
The final XD design can be found here: https://xd.adobe.com/view/ea373095-b2e7-487b-99cb-f6c4c8ae28e7-bf64/
The screenshot of the XD artboard is below...
Favorite Features: I appreciate Todd doing a special section to show us a demo and discuss uses of XD. During our workshop, I found the following tips and software features helpful:
(1) Copy Artboard: I really liked the simple shortcut of holding down Option (on a Mac) and dragging to create an exact duplicate of an artboard. This was helpful after I created the main screen with the header and menu buttons. Copying it for all other screens ensured that those objects were always in the same place on the screen without having to manually move them into exact positions.
(2) Prototype Links: It was very easy to link objects to their "next screen" in the Prototype view of XD.
(3) Play + Share link: I really liked how easy it was to play the prototype and create a shareable link for web viewing. I didn't try the mobile view option where the screens will appear on my mobile phone, but it's great that XD offers that too! I used that feature a lot when using MarvelApp - I've even had students mention that they use their mobile phones to pull up their designs during job interviews and the interviewers are always really impressed!
(4) XD Kits: I also saw that Adobe offers free XD kits (https://www.adobe.com/products/xd/features/ui-kits.html), which is great! This provides standard colors, text, and objects for specific operating systems and makes the prototype feel more realistic.
Classroom Uses: I already use a lot of digital prototyping in my classes. I usually include it as part of a design thinking workshop where students research an existing technology design or a group of users, and then go through the process of brainstorming lots of ideas to improve the design, prototyping some of those ideas, and testing the new ideas on other students to gather feedback. Here are some ways that I could use XD as part of these design thinking workshops:
(1) Evaluate and Redesign Existing Technology: In my introduction to IT classes, I have students pick an app that they already use. Then they research comments on the app store and interview other people who use the app. Based on their user research, they create a persona that represents the typical user including any frustrations that persona has with the current app. The teams than brainstorm lots of ways they could enhance the app with new features - I usually walk them through guided activities like gamification, future design, convergence, designing for disabilities, etc. to help with their brainstorming. Once they have a long list of ideas, they pick 2 ideas to prototype. Then they use a software, like XD, to create the digital prototype, and they create a test packet and feedback survey so they can conduct usability testing with other student groups. In the end, they present a demo of their prototype and a summary of their testing feedback. I can even see using Rush or Pro to replace the in-person presentation and, instead, have them do a video walk-through of their prototype!
(2) Design for a Specific User Group: In a health IT class I teach, I follow the same design thinking process, but instead of students picking an existing app, I have them pick a specific health condition or disease that they do research on to understand the experience. In the past students have chosen health areas like ADHD, vaping addiction, eating disorders, anxiety, schizophrenia, visual impairment, breast cancer, etc. In their prototype, they design the mobile app from scratch based on ideas they generated for a user with that specific health condition. Here is a news article about one of my classes who did this project: https://www.psu.edu/news/academics/story/projects-use-technology-assist-people-rare-medical-conditions/.