UX in the Classroom: How To Engage Students With Adobe XD
XD features tool sets and features that help bring student designs from concept to prototype quickly
Image credited to Adobe Stock / Rawpixel.com
by Andrew Smyk
posted on 02-20-2018
Every project starts with good research and exploring your ideas using pen and paper through an iterative design process. Seeing how something works is an important part of learning how to design and build rich interactive digital products. Adobe XD is a digital tool that teachers can encourage students to use to prototype their concepts and build live demos to test assumptions and possible features.
XD contains tool sets and features that help bring student designs from concept to prototype quickly. XD is also cross-platform, which means that students are not tied to a particular platform. Project groups can include both PC and Mac users, and they can easily share project files and work collaboratively on design assignments and projects.
When working with clients, the sharing and live demo features allow you to involve project stakeholders in the design process and decision-making by providing an interactive prototype. An interactive prototype allows students to set up user testing sessions to see how the user interacts with the product. The design and prototyping features of XD are accessible to students learning UX principles and provides a way to gain insights to the viability of their design solution.
UI kits and components are design resources that will help students plan and structure their designs without compromising ideas or implementation. UI kit components are designed to work together, so students can focus on designing the solution rather than re-creating buttons or widgets. If you are looking for UI kits and components, XD has a Get UI Kits* that connects you directly to UI kits from Apple, Google, and Microsoft. The UI kits contain updated design assets and templates from each OS’s Human Interaction Guidelines (HIGs). In addition, new UI wireframing kits are available for Adobe XD.
*Get UI Kits can be found under the File tab in the main menu system.
Creating and repeating common design elements is key to designing efficiently and it decreases the tedium of copy/paste. With the XD repeat grid feature, you can design once and repeat without having to copy, paste, and reposition design elements or other visual assets on the artboard. Repeat grid works in both horizontal and vertical directions to create any type of content. Use the live drag and drop feature to create image galleries or other image-driven content. Easy artboard management and smart guides and grids will greatly help to up a student’s design game. Students can take advantage of third-party integration, including Dropbox and Zeplin.IO to collaborate more easily and share project files. With students being able to preview prototypes and create easy design/development workflows and handoff of layouts and specs, project groups can focus on project tasks. Project assets can be easily integrated into working project files without having to create additional documentation or code snippet libraries.
Courtesy of Adobe
Solve real-life problems
To increase student engagement, create assignments and projects that solve real problems and use XD to create real solutions. Creating real solutions with XD will provide students a way to build ideas and experience that matter to users. There is a broad range of content that can be used for assignments and projects. Consider the real-life experiences of your students to assign a problem that they will be able to understand and relate to. For example, you can create a better course registration system or a better online course catalog, and notification systems for canceled classes. You can solve transit problems and get casual or infrequent users to consider public transit, or create a regional/municipal recycling app that helps people identify what recyclables are accepted.
Real world problems provide context and students can easily identify issues and help design digital solutions with an iterative design process. Prototype, review, refine is a simple method to make students’ ideas tangible. During the initial phase, allow enough time for students to establish the goal of the project, brainstorm possible solutions, and then create a mockup of the solution incorporating user/group feedback and user experience best practices. Students can then review the initial concept with other students and evaluate if it would meet user expectations. With feedback, students can refine the concept by incorporating any user feedback or modifying the existing features and presentation of the prototype.
“Solve real problems and use XD to create real solutions.”
A classroom example:
- Define the problem or project scope (necessary features or tasks) 15 minutes.
- Brainstorming and prototyping 45-60 minutes.
- Monitor student groups to stay focused on the process.
- Prototype review/feedback session 15-20 minutes.
- Refinement 45 minutes.
- Review/feedback session 15-20 minutes.
Building an interactive prototype
Once students have sketched out their design solution and incorporated the interface layouts into XD, a working interactive prototype can be set up relatively quickly. Using the prototyping view, students can set up a user or task flow by connecting clickable/tappable elements with each element on the different artboards. Students can create a progression through the artboards and interface components with the connecting handle and transition pop-up box.
Courtesy of Adobe
One of the benefits of building a high-fidelity interactive prototype is that it looks real to students, so it enables the suspension of disbelief and provides a great sense of accomplishment while allowing students to focus on testing user outcomes. An interactive prototype allows students to test navigational elements and interface components and information hierarchies. At the end of testing the interactive prototype, students should be able to compile a list of what worked and what didn’t with their design solution.
Mix things up
Add a series of constraints to the prototyping exercise and add a set of challenges for the students to meet or overcome. Once they have finished their initial prototype and user testing, have students select a constraints card and incorporate that into their design solution. This added twist to prototyping makes students rethink their approach to the solution and can mimic client changes.
image courtesy of Constraint.co
image courtesy of Constraint.co
Students will find Adobe XD beneficial on several levels, including its flat learning curve for user interface and prototyping. The added benefit of streamlining the design process and the ability to create reusable content and work with external assets libraries will help students design efficiently and collaboratively. Create interactive shareable prototypes utilizing dynamic animations and interactivity. As with any skill, practice is the key to being able to learn the tool and once you learn it, you’ll gain a better understanding of how to build enjoyable and usable digital products.
Adobe XD Tutorials.
Adobe XD Artboards.
Adobe XD Tips and Tricks.
For UX insights sent straight to your inbox, sign up for Adobe’s experience design newsletter.
Topics: Creativity, Design, Education
Products: Creative Cloud