Collaborative Software Prototyping using Adobe XD
Karen Mok & Anh Nguyen
Karen Mok & Anh Nguyen
This project focuses on establishing a process for software development students to create digital wireframes from paper-based ideation. The use of Adobe XD, an industry-standard prototyping tool, supports requirement gathering and basic UX/UI design. It also provides a platform for team collaboration and enhances client communication. Future potentials include expansion into cross-disciplinary collaboration across different courses.
The project developed assignments and resources to support the students’ developing technology literacy that they can then apply in professional contexts, both now and in future graduate employment.
The following lesson plan will assist software development teachers to implement a collaborative prototyping project based on a scenario that allows students to develop their analysis and design skills.
Lesson Plan (Swinburne access via Commons)
This resource is also available on the Adobe Education Exchange (link coming soon!)
Programming students are always enthusiastic when they are given a project brief to build a software application - they love to dive into coding as soon as possible! The problem is that the requirements of a new system as well as clients’ expectations are often unclear in the initial stages. Therefore, implementation without thorough analysis during the initial design phases can result in a lot of time spent later in trying to rectify issues or even result in producing an unsatisfactory product.
Traditionally, basic wireframes, drawn on paper or whiteboard, are used in the early phases of a software development project to visualise the overall user interface (UI) in a draft format. However, these low-fidelity models have limitations due to their lack of detail and interactivity.
A digital tool is required to aid in the fast development of realistic software prototypes. The prototyping program to be used for a team project also needs to support multi-user collaboration in real-time. There also needs to be an easy way to share the prototype with other stakeholders in order to obtain feedback.
Students from Certificate IV in IT were grouped into teams of 3-4 people in Semester 2 of their study. Each team was given a scenario, outlining a business problem which involved building a new software application. After performing the initial information gathering and background research, the teams produced a list of requirements that the new application must fulfil. A set of basic wireframes were then created and subsequently converted to digital interactive screen flows which included more detail and realistic looking design elements.
Adobe XD is a suitable tool for developing software prototypes due to its rich features and functions. Particularly, the collaboration mode allows for all team members to contribute easily, promoting efficient teamwork and communication. Students can also invite feedback by providing a sharable URL to multiple people to review their work. Based on the feedback provided, they can refine the prototypes before presenting the final version of their interactive prototype.
The process of this project has been documented as a sharable teacher resource. A software development narrative (consisting of project brief and requirement analysis) was provided, along with a sample of the final Adobe XD prototype created by a student team. The materials can be easily adapted for other scenarios, as the core focus is on the steps involved.
This project has reinforced the idea that collaboration and communication are the key components to any successful project. These are also desirable graduate skills that an educational institute endeavours to train the students in. With the choice of an appropriate tool, the design process is enhanced, and the project outcome is achieved.
This project can be used as a blueprint for the future, involving external clients who are looking to involve student teams, potentially from different courses, to develop technological solutions through collaboration.
1. Technology literacy
Learning to use a new tool can present challenges, but this is an essential reality in today’s fast changing world, particularly in the IT industry. This project is student-centred as students get to create an interactive prototype, based on a realistic scenario, using an industry-standard digital prototyping tool.
2. Information literacy
Analysis of a business problem involves client interviews, research and critical thinking. Problem-solving skills are also developed during the design and refinement of the software prototypes.
3. Communication literacy
Teamwork is most efficient when students have a clear goal of what they aim to achieve and have the tools to facilitate effective communication. The pandemic had forced the entire semester to be delivered online, meaning there was no opportunities for no face-to-face collaboration opportunity during this project. The benefit of the collaboration mode in Adobe XD was therefore useful given these circumstances, whereby each student worked remotely and collaborated with their team online. The ability to easily share the prototypes with other teachers easily for obtaining feedback was also very valuable.
The following findings were concluded based on data collected from student surveys conducted at the beginning and end of the project:
1. Awareness of available support in learning Adobe programs (Adobe Digital Coach and Workshops) was greatly improved (Q9 & Q10).
2. Increase in the students’ self-perception of their level of digital literacy from an average of 2.73 at the start of the project to 4.00 at the end of the project. Further analysis of the data is required (summary as provided by investigator included below).