30.03.2020
Title Description
FINAL DESIGN REPORT
Heading 5
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
DDD30045 – UX/ID Capstone Project INTERACTIVE COURSE PLANNER for the UX Major in B.Des
30.03.2020
Part 2: Concept Development & Final Product Jeni Paay & Adam Walker
DDD30045 - UX/ID Capstone Project
– Jane Novella 101990306
– Jessie Newton 102077268
Page Details | 1
Title F I N A Description
L P R O T O T Y P E
Heading 5
Lorem ipsum amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis Linkdolor tositPrototype Web Version: nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu https://2zygpq.axshare.com/ fugiat nulla pariatur.
Link to Prototype Mobile Version: https://8u4r13.axshare.com/
DDD30045 - UX/ID Capstone Project
Page Details | 2
Table of Contents Opening Table of Contents Member Introduction Executive Summary Introduction
Ideation and Design Concept
Interactive Prototype
2 3 4 5 6
7
Sketching Vocabulary Sketching Ideas Interaction Sketches Storyboard Overall Ideas
8 9 11 16 20
Design Alternatives
21
Design Ideas Selected Concept Going Forward
Paper Prototype Procedure Design Description
Evaluation - First Design Iteration Evaluation Sheet Paper Prototype Evaluation Heuristic Evaluation Evaluation Results DDD30045 - UX/ID Capstone Project
22 25
26 27 28
33 34 35 38 39
Re-design Process Information Design Planning Resource Content Tone Interactivity Implementation Exploring Alternative Designs Design Description
Evaluation - Second Design Iteration Procedure Evaluation Sheet User Evaluation Client Evaluation Evaluation Results
Final Interactive Product Final Prototype Web Content Refinements Made Naming & Branding Choices Layout Principles & UI Guidelines Design Principles Used Affordance Conference Poster Budget Estimations
Closing & Reference
42 43 44 46 47 48 53 59
66 67 68 69 70 71
74 75 76 77 84 85 86 90 91 92
93 Introduction | 3
Meet The UX Team A team of 2 working together to create an interactive web application of the Bachelor of Design, UX Major’s course planner.
Jane Novella UX Design Editorial Design Graphics & Illustration
DDD30045 - UX/ID Capstone Project
Jessie Newton UX Design Researcher Graphics & Illustration
Introduction | 4
Executive Summary Recaping out current process In part one of this project we really focused on gaining insights into the current planning process at Swinburne and at other universities. We were able to identify the need to streamline this process as well as where students gain information from. Students identified a planner such as the one we endeavor to create as something which would be highly beneficial to their studies whilst reducing time and stress around the topic. We explored what functionalities student expected from this, how stakeholders will interact with the projects as well as the current and desired student journey around planning their course.
DDD30045 - UX/ID Capstone Project
Introduction | 5
Introduction For the second part of this brief we will be using the data and insights we collected to create a working prototype of an online application. The application need to work in unison with Swinburne University’s Department of Communication Design units, with an emphasis on creating a seamless course planning experience for their newest major, User Experience Interaction. We want to be mindful of looking at the planning system from a holistic approach considering pathways students have taken, interested they may have, when they start their course at Swinburne and what other interests or opportunities they are seeking. We will develop the functioning app through at least 3 series of testing and interactions to try and create a quality first release product.
DDD30045 - UX/ID Capstone Project
Introduction | 6
Ideation and Design Concept Developing Sketching Vocabulary We created a sketching vocabulary which serves as the basic elements of most sketches. As there are 2 people working on the sketches, sketching vocabulary is important to keep our sketching style consistent across the whole ideation process.
Sketching Ideas & Interactions For this section we divided the section into Unit Tiles, Mobile Design, and Interaction Process. The interaction process cover 5 main features that we want to input to the system. They are; Accessing the planner, Refining the Major, Move Units, Print Planner /Save as PDF / Sync to Phone, and Add electives & minors. Please note that this is still an early development so feature might change as the project is developed.
Storyboard We created 4 different storyboard on how we imagine our persona would interact with the new system. Some of them are also shown to interact with the old system and we drew the comparison of how they would react differently as well.
Overall Design Concept Based on the previous document’s design proposal, we also created an overall design concept which includes the full lists of functionalities and practice information our system will have. Again, as this is still an early stage of development, feature and concept listed might change.
DDD30045 - UX/ID Capstone Project
Ideation & Design Concept | 7
Developing a Sketching Vocabulary As a team we divided up the sketching aspect of this brief to give us both the opportunity to further explore our scenarios and the interaction users may have with the application.
People and Interaction
DDD30045 - UX/ID Capstone Project
Digital Devices
Physical Objects
Documents
Ideation & Design Concept | 8
Sketching Ideas – Unit Tiles
DDD30045 - UX/ID Capstone Project
Ideation & Design Concept | 9
Sketching Ideas – Mobile Interfaces Rather than jumping on the first idea, we spent some time developing different interface ideas for the mobile app. We have been given an opportunity to simplify a typically desktop process so it was important that we considered the best way to present that information.
DDD30045 - UX/ID Capstone Project
Ideation & Design Concept | 10
Interaction Sketches Accessing the planner Users can access the planner via the manage course tabs on the website. Images shown below are its wireframe sketch on website and mobile version.
Refining the Major We explored two ways of refining the major, through buttons which will always be visible and a drop down.
Information about units
DDD30045 - UX/ID Capstone Project
Ideation & Design Concept | 11
Interaction Sketches Add Electives & Minors For filtering the units that user would want to add to their course planner, we got an inspiration through Swinburne’s website current course details page. This is due to its neat use of tab and drop-down filters.
Print Planner (Save as PDF) or Sync to Phone We’re planning to put several buttons below the planner grids, one button to share the planner and another one to print / save as pdf.
https://www.swinburne.edu.au/study/course/bachelor-of-design/ ux-interaction-design// DDD30045 - UX/ID Capstone Project
Ideation & Design Concept | 12
Interaction Sketches Move Units Version 1 Our first visualisation of how units could be moved around within our system would be through the hold & drag interaction. It would be nice if users can move units as easy as dragging them around and have other units to move, adjusting to user’s mouse movement. Our consideration for this version is that we might have to implement interactive scripting code to the prototype.
DDD30045 - UX/ID Capstone Project
Ideation & Design Concept | 13
Interaction Sketches Move Units Version 2 Our second interaction sketch version for the moving unit around the system would be based around tap and click. This interaction seems to be more applicable in a mobile device interaction, however this option seems to be more doable for our protoytype.
1. How system looks like when it is opened.
DDD30045 - UX/ID Capstone Project
2. User first click on the “add unit� button and an empty slot will be automatically selected. User then click on a unit from the unit container. Ideation & Design Concept | 14
Interaction Sketches
3. After unit is selected from the container, it is immediately added to the slot, and the added units is blackened on the container.
4. Selected Slot then automatically moves to the next one.
5. User select another unit.
6. Unit is automatically added and the cycle repeat.
DDD30045 - UX/ID Capstone Project
Ideation & Design Concept | 15
Storyboard User 1 – Tom 1: Tom is playing video games
2: His phone suddenly lights up with a message from his Uni mate Johno
4: He quickly calls Student HQ to see if they can shuffle things around
5a: The HQ rep can’t get Tom into his preferred class but recommends a similar unit
5b: Tom hasn’t completed the correct units to receive his minor
OLD SYSTEM
NEW SYSTEM 3: The message is about timetabling
3: Tom finds out the classes he wanted are either full or don’t run until Second Semester DDD30045 - UX/ID Capstone Project
6b: The team at HQ helps Tom to plan his course and shuffle units using 6b: Tom graduates at the same the new Swinburne course planner. Tom can visualize what he has time as his mates with the left and make active decisions using the information on the planner degree he expected Ideation & Design Concept | 16
Storyboard User 2 – Kate
DDD30045 - UX/ID Capstone Project
Ideation & Design Concept | 17
Storyboard User 3 – Mai 1: Mai has just run inside after 2: Suddenly her computer beeps forgetting her jacket. She hates to with a new email be late when seeing with friends
3: Its the email she’s been waiting 4: Mai can’t wait to tell her friends the 5: Mai heart drops. The train is for! Her acceptance to Swinburne good news and grabs her laptop packed and she has no where to look at her classes in transit to sit and use her laptop.
NEW SYSTEM
In the new year.. 6: Luckily, Swinburne has launched 7: M ai filters the a planner app which allows Mai planner based to explore her units and course on her course plans on her mobile and major DDD30045 - UX/ID Capstone Project
8: She then adds in 9: Mai also adds her the exemptions study load and from her start date acceptance email
10: T he online app 11: Mai looks at each 12: M ai travels to Melbourne produces a unit in more detail and feels really prepared and recommended so she feels super organised to start her course study plan for Mai prepared Ideation & Design Concept | 18
Storyboard User 4 – Leo
DDD30045 - UX/ID Capstone Project
Ideation & Design Concept | 19
Overall Design Ideas We developed a list of functionalities and practice information our system will need to have.
Functionalities: • Semester starter (filter sem 1 or 2) • Ability to move units around the planner • Personalization according to study preference (filter major) • Exporting/Save the course planner
Practical Information: • Course • Double Degree • Major • Co-major • Minors • Electives • Additional Opportunities (Placement, Internship, Study abroad) • Unit Descriptions • Pre-requisites • Teachers and Conveyors • When they are run
DDD30045 - UX/ID Capstone Project
Ideation & Design Concept | 20
Design Alternatives Design Ideas Through our sketching we present a range of ideas about how the application will look and feel. we refine this in the next step.
Selected Concept Going Forward In part one of this project we proposed 3 solutions to help students plan their course at Swinburne. These were using colour to better communicate core structure, an online planning application and streamlining the information process going forward.
DDD30045 - UX/ID Capstone Project
Design Alternatives | 21
Design ideas We took advantage of our time with Adam to discuss and refine early prototypes. A strong focus of this was aligning the look and feel between the mobile and web prototype, increasing the numbers of filters and refining the flow of elements.
DDD30045 - UX/ID Capstone Project
Design Alternatives | 22
Design ideas After discussing with Adam, we meet over zoom and Jane made iterations to the design live. This procedure allowed us to both have input into how the interface would look and how certain functions would work. It also gave us the opportunity to better align the web and mobile versions. In this stage of the design, we included a tab filter system for core, major and component units, mimicking the component filter on the first page of the planning process. We also added the remove filter function at this stage reflecting our earlier idea sketches. As said previously on page 12, we listed some alternatives to how users will be able to move units around. Alternative 1: Drag & Drop Alternative 2: Select & Click
DDD30045 - UX/ID Capstone Project
Design Alternatives | 23
Design ideas – Device Preference We are thinking to design the system interface for different gadgets to make it widely accessible. However, due to time-limitation we have decided to design the interface across only 2 devices, which is desktop and mobile. So we sent some follow-up interview questions to 10 people who joined the focus group and interview session (from the previous part of the brief). This is to know our user behaviour and their preferred gadgets for course planning, which could also work as a justification to our decision as well. This is the result of the survey:
Device used to access Swinburne’s website for course planning (out of 10)
Students preferred device to access Swinburne’s website for course planning (out of 10)
PC / Laptop Phone Tablet
DDD30045 - UX/ID Capstone Project
Design Alternatives | 24
Selected Concept Going Forward In part one of this project we proposed 3 solutions to help students plan their course at Swinburne. These were using colour to better communicate core structure, an online planning application and streamlining the information process going forward. We ultimately want to take on ideas from each of these proposed ideas. Although it isn’t possible to streamline the planning system across all student touch-points, integrating the app into the existing website is really important for us. We also want our planner to work across multiple screen sizes to allow students flexibility around how and when they plan their studies. Chosen interactive alternatives for first design iteration & evaluation: Alternative 2: Select & Click Chosen device layout for first design iteration & evaluation: Standard Web (1360 x 768 px) IPhone XS (375 x 812 px)
DDD30045 - UX/ID Capstone Project
Design Alternatives | 25
Paper Prototype Method The first stage of our design iteration is to create paper prototypes. Paper prototypes allow us to explore a range of ideas and flows quickly and without fuss. Earlier in this document we outlined a list of functionalities and practical information which would need to be included in our document. Whilst referring to this list and our prior research we create a set of tasks which students need to complete when planning their course. These tasks dictated the screens and flows users would need for our testing. As we created the paper prototypes in isolation we used the collaborative online software InVision Freehand to share our works.
Tools Once again, as we are working remotely from each other we are heavily reliant on web technology. We are lucky enough that restrictions have been eased so we can complete local tests in person. We plan to use the following tools to prepare for and run our sessions. Creation Tools – InVision Photoshop (To compile Prototypes into a printable document) Printer Scissors & Tape
Communication Tools – Zoom Email Facebook messenger
Data Collection/Collaboration – Camera/Phone Google Sheets Screen Capture Software (for digital tests)
Planned Implementation In order to maintain a consistent testing structure across the team and various locations, we have created a script and testing procedure followed by a short evaluation questionnaire. Following the same procedure will allow us to collect more consistent data which can easily be compared and compiled. DDD30045 - UX/ID Capstone Project
Paper Prototype | 26
Procedures Our procedure is broken into 4 sections: 1. The opening script 2. A scenario to set the scene for the user 3. The 5 step testing for both desktop and mobile 4. Evaluation & Closing Script Date & Time: Range: Friday, 15 May 2020 - Sunday, 17 May 2020 Time: No more than 20 minutes but could take as little as 10 depending on the user’s interest and ability to complete tasks. Limitation: Users completed web tasks before mobile which may lead to some bias in the testing due to their prior knowledge they have collected throgh the first set of tasks. It’s important that we are reflective of this as we move forward with our recommendations.
DDD30045 - UX/ID Capstone Project
Paper Prototype | 27
Design Description The filter and the pop-ups This is how the web page will look like when user first came across the course planner system. The first page is comprised of all the filters needed to gain information of what kind of planner is user looking for. Filters listed: 1. Study Department 2. Bachelor Degree 3. Major 4. Component Units 5. Starting Year Intake 6. StartingSemester Intake
DDD30045 - UX/ID Capstone Project
Paper Prototype | 28
Design Description The course planner and the pop-ups This is how the web page will look like after user applied the filter. The page is mainly divided into 2 sections. The first is the unit planner grid, the other is the unit container section. There area below these 2 sections are allocated for Help / Extra information section. There are also each individual components, the pop-ups, which will be used as overlays to respond to user’s interaction with the paper prototype.
DDD30045 - UX/ID Capstone Project
Paper Prototype | 29
Design Description The pop-ups The rest of the pop-ups from the previous web page, which includes unit-description, warning message, and send to email pop-up.
DDD30045 - UX/ID Capstone Project
Paper Prototype | 30
Design Description Filter Page The filters section was adapted to align closer to the web version in look and feel. The filters are typically drop-down boxes with the exception of the semester section which simply a checkbox reducing the number of clicks needed to complete the decision. Each filter also has a description so students can learn more about it. Ultimately it would have been fantastic to fit this information on one screen, but users need to scroll to complete all fields before pressing next to create their planner.
DDD30045 - UX/ID Capstone Project
Paper Prototype | 31
Design Description The Course Plan The course plan for mobile relies on scrolling due to the amount of information needed in a small space. It uses slide-in features to show additional information such as the units and unit descriptions. Space also limits how units can be shown, so instead of a 1x4 layout seen in the desktop version, semesters are displayed as a 2x2.
Example of how elements are overlayed DDD30045 - UX/ID Capstone Project
Paper Prototype | 32
Evaluation – First Design Iteration Evaluation Sheet Each user was asked to fill it out at the completion of the test which allowed us to gain further insights and after thoughts from participants. The evaluation sheet is broken into two sections focusing on the ease of tasks across both web and mobile.
Paper Prototype Evaluation Due to COVID-19 situation, we are experiencing certain restrictions in doing the testing, thus we limit our participants to those who lives closeby to us and still within our target audience age range. We are doing 4 face-to-face testing and 1 online testing.
Evaluation Results We are dividing our evaluation results into 4 sections: 1. Stats (Quantitative) 2. Insights (Qualitative) 3. Recommendations 4. Improvements
DDD30045 - UX/ID Capstone Project
Evaluation - First Design Iteration | 33
Evaluation Sheet
Here is a copy of our evaluation sheet. The evaluation sheet includes sets of questions regarding the prototype’s interaction, interface, and visual design. It also includes scoring questions about the 5 tasks given.
DDD30045 - UX/ID Capstone Project
Evaluation - First Design Iteration | 34
Paper Prototype Evaluation
Demographics All users we tested were between 20 and 25 years, comprising of both male and female, and were either current students or had recently completed a degree. We are currently facing restrictions around who we can meet with face to face, but it was vital for us to test with users who resembled our target market. We preferenced testing Swinburne Students, but this wasn’t possible for all cases due to our geographical locations.
Method For our face to face testing, we followed the procedures outlined in our testing script. Prototypes were printed and organised before beginning the testing to create a seamless experience. For online testing, procedures outlined are still followed, yet we are doing this through sharing our screen via online meeting rooms.
Restrictions For this testing we were largely restricted to testing immediate friends and family due to Covid-19 situation. Where possible, social distancing procedures were followed by placing the tester and user on opposite sides of the table.
DDD30045 - UX/ID Capstone Project
Evaluation - First Design Iteration | 35
Paper Prototype Evaluation Face to Face Series of photographs taken during the face-to-face testing in one of the invigilator’s residence.
DDD30045 - UX/ID Capstone Project
Evaluation - First Design Iteration | 36
Paper Prototype Evaluation Online We have been very fortunate to involve Karen Pang who has experience in real world user experience, whilst also currently completing her Bachelor of Design at Swinburne. With Karen, we wanted to run through a user test as well as having further discussions about our design and her thoughts around meeting heuristics.
Method (specified) Similar to our physical tests we followed the same scripted procedure, but this test allowed Jane to act as the Facilitator and Jess to act soley as the observer. Due to Covid-19 restrictions, this testing was done online using Invisions Freehand Function. Whilst this software allowed us to look at what Karen was doing and hear her thoughts we did have a few issues around the updating of prototypes (for website view) and the layering of objects (for mobile.) These lead to some issues. Overall we were able to test the planner and discuss about what could help progress the planner.
DDD30045 - UX/ID Capstone Project
Evaluation - First Design Iteration | 37
MOBILE WEBSITE
Heuristic Evaluation VISIBILITY OF SYSTEM STATUS
MATCH BETWEEN SYSTEM AND THE REAL WORLD
USER CONTROL AND FREEDOM
ERROR PREVENTION
FLEXIBILITY AND EFFICIENCY OF USE
AESTHETIC AND MINIMALIST DESIGN
HELP USERS RECOGNIZE, DIAGNOSE, AND RECOVER FROM ERRORS
HELP AND DOCUMENTATION
CONSISTENCY AND STANDARDS
RECOGNITION RATHER THAN RECALL
3
7
7
6
6
6
8
4
8
7
3
7
6
4
6
7
7
4
9
7
Based on our user tests we have ranked our application based on Jacob Neilson’s 10 Heuristics. Overall it is obvious that we haven’t considered certain heuristics and our users were quite to comment on such areas. Currently, some users are concerned about not knowing the status of where they are on the site or if their progress is saved. There isn’t any help information for users and how they should use the planner. We have also not developed the error prevention sufficiently to give it a high ranking. Things that are going well include the general aesthetic (in the way or structure and layout), consistency of design and recognition rather than recall.
DDD30045 - UX/ID Capstone Project
Evaluation - First Design Iteration | 38
Evaluation Results – Stats Here is the evaluation result of task scoring. The highest the score, the more easy the tasks are. The scoring for both versions are different as some tasks are easier done on a certain version compared to the other one. The first task, ‘Test the Filters’ ranks 1st on the task easiness ranking for both versions. The fourth task, ‘See Units Descriptions’ ranks last on the task easiness ranking for both versions.
Task easiness Ranking (Desktop)
Task easiness Ranking (Mobile)
Rank
Task
Score /100
Rank
Task
Score /100
1
1. Test the Filters
96
1
1. Test the Filters
100
2
5. Save Course Planner
96
2
3. Remove Units from Planner
96
3
3. Remove Units from Planner
92
3
2. Add Units to Planner
80
4
2. Add Units to Planner
60
4
5. Save Course Planner
68
5
4. See Units descriptions
56
5
4. See Units descriptions
60
DDD30045 - UX/ID Capstone Project
Evaluation - First Design Iteration | 39
Evaluation Results – Insights TASK DEVICE
WHAT WORKED
WHAT DIDN’T
1
DESKTOP
Users recognised the filter layout from other platforms/tasks they complete in their day to day lives “ Straightforward, immediately knows once seen, the easiest “pretty straight forward “ “Test filter is easy, self explanatory”
It worked well
MOBILE
“Straightforward” “Super easy – simple drop down menu design.” “I like the tick button for the semester”
It worked well, but consider if user has a very small screen, drop-down filter will involves much scrolling.
DESKTOP
Users were typically pleased by how the planner looked. It made sense to them. “Buttons are easy to be found, Straightforward” “
Most users tried to drag and drop units from the side panel and didn’t’t find the click-click process intuitive. “A bit tedious clicking back and forth” “I didn’t like that there was no drag and drop functionality or I would have had a plus next to the unit on the side so it would add the opposite way.”
MOBILE
Most users clicked the add unit button within the unit structure. They liked the click and add function. “Easier to be done, maybe because phone interaction is more based on tapping” “Really easy. I think i prefer this over the desktop””
The add unit button in the header was confusing to users or not used by them “Why is there two buttons. also it’s ugly. also it’s lower case.”
DESKTOP
The ‘x’ button was straight forward and all users were able to identify it.
Consider sizing of it more (some errors due to printing sizes)
MOBILE
Users liked the ease of the close button. ”bang! I like that.”
One user became anxious about the proximity of the x to the click button
DESKTOP
Some users quickly identified they needed to click/double click on the unit box.
Some users were often confused by this task “Because I didn’t know how to do it, I kinda did trial and error and luckily I found how to do it” “Not easy, because they aren’t underlined like a hyperlink so i didn’t know where to press.” “I didn’t think to double click”
MOBILE
Most users recognised the hyperlink style link on the button “Cause they had the hyperlink so I knew it was a clickable function”
Some users expected the button to act in different ways. One user was anxious about the proximity of the cross to the button and if they’d miss press it. “Although I know how it is supposed to be I might hold on the button to wait until the unit description to pop-up”
DESKTOP
Users seemed to easily understand about how to share and save the planner. “Buttons are easy to be found, Straightforward” “There was a button, it was easy to see”
One user didn’t find the buttons easily as there was other information around it which was bigger and bolder. They also asked if they would need to scroll to find these buttons
MOBILE
Users found the share button quickly
This path way wasn’t clear to all users because it didn’t follow phone protocols. Share and download button needs to be separated. Print button is not necessary.
2
3 4
5
More detailed task insights https://docs.google.com/spreadsheets/d/1ZlKxoexuio7d5l7_3JKTtpXD7yuoIx_NXzSgKpUfmeY/edit#gid=256133897
DDD30045 - UX/ID Capstone Project
Evaluation - First Design Iteration | 40
Evaluation Results – Recommendations Based on our observations, evaluations and task insights we have created a list of recommendations to implement for our second iteration of the app. General Interface and Functionality
Ease of fix
Mobile
Ease of fix
Desktop
Ease of fix
Add a unit description button / consider how this information can be best accessed
Intermediate
Easy
Easy
Include Drag and Drop functionalities / Change user work flow for the click-click procedure
Difficult
Look further into button design
Change the share/save functionality on the mobile app to be reflective of how users typically save images
Intermediate
Intermediate
Use best practice to make viewing unit information more obvious
Easy
Refine and improve ‘Redo-filter’ step
Streamline add unit procedure (move or remove additional button)
Easy
Add save progress functionality / have a progressed saved notification
Difficult
Consider proximity of accessing unit outlines with the x button Change the bottom menu items
Easy
Include years before following study period to allow current students to use the planner
Easy
Have x button for unit pop-ups
Easy
Check spelling and grammar. Fix Easy typos DDD30045 - UX/ID Capstone Project
Evaluation - First Design Iteration | 41
Interactive Prototype Method On this second iteration of the design process, we are going to fix some of our interface design and interaction process within our system based on the previous heuristic evaluations. With the heuristic evaluation, we are also going to make multiple alternatives to how the system can interact.
Tools With the ease of travel restrictions, we are able to do face-to-face testing with some of our targeted users. However we are still going to do some online testing with the client and another observant. Creation Tools – InVision Axure RP Photoshop CC
DDD30045 - UX/ID Capstone Project
Communication Tools – Zoom Email Facebook messenger
Data Collection/Collaboration – Camera/Phone Google Sheets Screen Capture Software (for digital tests)
Interactive Prototype | 42
Re-design Process Changes made to the high-fidelity prototype, Based on the heuristic evaluation: - Reconsider how unit information can be accessed - Change the process order of adding the units - Add “clear units” button - Relocate “return to filter” button - Improve button functionality (share/download/print) - Remove “change major” button in the unit container
Interactivity implementation to the high-fidelity prototype: - Colors - Interaction, such as: - Mouseover button - Accordion menu - Selected state - Forms
Software Changes We spent a lot of time at this development stage as we were not sure which prototyping software we are going to use. Initially we decided to use Invision at this stage too, continuing our project space for the previous prototype. However as we further developed our hi-fi prototype, we found out that there are many interactive function that are not achievable in Invision, so Jane tried to redo her prototype on Figma. Yet Figma’s functionality is similar to Invision. At the same time, we know that Axure prototyping software has enabled lots of interactive function within its functionality, so at last we decided to re-do our prototype in Axure after our consultation with Adam. DDD30045 - UX/ID Capstone Project
Interactive Prototype | 43
Information Design Current resources students use to plan course
A big part of designing for the used is not only making the interface easy to use and navigate, but also presenting them with the information they need to meet their goals, where they expect to find it. Jess took charge of the information development side of the project as Jane had stronger leads in the initial testing. It was really important to understand the scope of the degree and what students can actually achieve within their course. There are so many parts to a bachelor of design. From the current documents provided to students, we understand clearly that the course is made up with core units, a major and then component units. The planners are all based around the majors but don’t take into consideration the other components students will need to complete and when they run. The best resource we have found to map out these is using the website which allows you to filter through units. To see the full scope of what you can do within the bachelor of design could easily take students anywhere from a 10 minute quick view to hours if they wanted to read and learn more.
Website
Course Plan DDD30045 - UX/ID Capstone Project
We spent some time compiling all of these resources into a single Excel document. Doing this allowed us to see the full scope of the degree and make sure we offer as many of these allowances in our application as possible. It also acted as a point of reference to easily pull out information from. Interactive Prototype | 44
Information Design Bachelor of Design at a glance
View here: https://docs.google.com/spreadsheets/d/1yeWR1b4ITv1GC9gDLEK1JTllBTklvLBXyMrmD4DkMK0/edit?usp=sharing
DDD30045 - UX/ID Capstone Project
Interactive Prototype | 45
Planning Resource
MORE THAN JUST A DEGREE
BACHELOR OF DESIGN
Your bachelor of Design will include There are almost endless pathways all available in one degree. Create a degree specifically pitched to your interests and career aspirations. Develop a broad and coherent understanding of contemporary design whilst learning design skills across a range of disciplines. Choose from studies in animation, games and web design, traditional and digital publishing, branding, experiential design, photography, image production OR expand you degree and opportunities into accompanying fields.
Swinburne is where you can see the possibilities.
300pts
+
Core Units 100pts
+
Major Units 100pts
Component Units 100pts
Major Units
Core Units
100pts
100pts
DCO10001 Concepts and Narratives DCO10002 Digital Design DCO10004 Photography for Design
+
DCO10005 Typography DDD10001 20th Century Design
Choose 1 of the following majors worth 100pts or 8 units .
DCO20001 Brand and Identity Design
Branded Environments
Communication Design
Motion Design
Photomedia
User Experience Interaction
DDD10006 Introductory Design Studio
DCO10003 Packaging Design
DDM10005 Imaging for Narrative and Storyboards
DDD20009 Photography and Art Direction
DDD10006 Introductory Design Studio
DIA10005 Interior Architecture Communication
DCO10007 Visual Communication Studio
DDM10006 Typography for Screen and Motion
DDD20012 Experimental ImageMaking Processes
DDD20015 Interaction Design for Web
DDD20003 Exhibition Design
DCO20009 Typography for Print and Interactive Publication
DDM20003 Digital Video Camera Techniques
DDM20003 Digital Video Camera Techniques
DDD20016 Experience Design and Usability for the Web
DBE30001 Innovation & Technology in the Branded Environment *
DCO30001 Communication Design Capstone Project *
DDD30021 Digital Video Compositing
DDD30011 Compositing for Visual Effects *
DDD30019 Web Marketing and Advanced Usability *
DBE30002 Branded Environment Design Studio 1 *
DCO30002 Design for Production *
DDD30022 Motion Graphics Project
DDD30015 Visual Story Telling
DDD30020 Interaction Design for Mobile Devices *
DCO20004 Web Design
DBE30003 Branded Environment Design Studio 2 *
DCO30017 Communication Design Strategy *
DDM30001 Motion Design Capstone Project
DDD30042 Photomedia Capstone Project *
DDD30045 UX Interaction Design Capstone Project *
DDD20004 Contemporary Design Issues
DBE30004 Branded Environment Capstone *
DDD30013 Publication Design *
DDM30005 Motion Design New Technologies
DDD30046 Commercial Photography on Location *
DDM30005 Digital Media Design New Technologies *
+
In addition to mapping this out for our selves, we thought it could be used as a resource for potential or confused students. Imagine walking into student life and looking on the wall to see all of the options within the bachelor of design. It could be used as a talking point to help students understand exactly what they need to complete to receive their degree as well as the breadth of options they have within it.
Component Units 100pts
Complete 100pts or 8 units through completing a second major or co-major
Second Major
Co-major
Choose one of the above majors in addition to a first major. You cannot choose the same major.
Animation
Computer Science
Digital Advertising Technology
Games and Interactivity
Indigenous Studies
ANI10001 Introduction to Animation
COS10009 Introduction to Programming
DIG10003 Digital Content Management
GAM10001 Introduction to Game Studies
INS10002 Unlearning the Past: Indigenous Australian History
OR Combine Minors, Advanced Minors, Signature Series units or a combination of elective units equal to 100pts. Please note: You must complete all units in a socond major, co-major, minor, advanced minor or signature series to recieve that qualification. Units can not be swapped for other similar units.
ANI10002 2D Production Techniques for Animation
COS10011 Creating Web Applications
DIG10007 Introduction to Digital Imaging
GAM10002 Principles of Game Design
INS10001 Connecting with Culture: Indigenous Australian Experiences
ANI10004 Introduction to Character and Environment Design
COS10003 Computer & Logic Essentials
DIG20005 User Experience Design
GAM20001 Introduction to Games Production
INS20001 Indigenous Representations
ANI10006 Action Analysis and Locomotion
COS20015 Fundamentals of Data Management
DIG20010 Search, Social Media and Video Marketing
GAM20002 Pervasive Game Design Lab
INS20004 Resistance, Activism and Empowerment
ANI20001 Advanced Character Design for Animation
COS30045 Data Visualisation
DIG20011 Digital Mobility
GAM20003 Digital Game Prototyping Lab
INS20002 International Indigenous Perspectives
ANI20002 Writing and Directing for Animation
COS20007 Object Oriented Programming
DIG30001 Digital Marketing Project 1
GAM20004 Writing for Interactive Narratives
INS30001 Indigenous Enterprise and Entrepreneurship
ANI20003 Acting for Animation
COS30020 Web Application Development
DIG30002 Digital Marketing Project 2
GAM30004 User- Centred Design & Evaluation
INS30002 Indigenous Knowledges
ANI20004 Producing & Production Management for Animation
COS40004 Topics in Computer Science
DIG30003 Advertising Technology
GAM30005 Behaviour and Motivation in Games
INS30003 Contemporary Communities
Related Minors The minors to the right are the recommended ones for this degree. Students can also complete other minors such as those below.
Advertising
Animation
Branded Environments
Communication Design
Computer Science Creative Writing
ANI10001 Introduction to Animation
DBE30002 Branded Environment Design Studio 1
DCO10003 Packaging Design
COS10003 Computer and Logic Essentials
LIT10002 Writing Fiction
DID30007 Strategic Design Innovation
ANI10004 Introduction to Character and Environment Design
DDD10006 Introductory Design Studio
DCO10007 Visual Communication Studio
COS10004 Computer Systems
LIT10003 Reading and Writing Genre Texts
DDD20007 Design Systems and Services
ADV20002 Concept Development and Copywriting
ANI10003 History of Animation
DDD20003 Exhibition Design
DCO20009 Typography for Print and Interactive Publication
COS10009 Introduction to Programming
LIT20001 Reading,Writing and Criticism
DDD30006 Design Thinking
ADV30001 Advertising Media Planning and Purchasing
ANI20004 Producing and Production Management for Animation
DIA10005 Interior Architecture Communication
DDD30013 Publication Design
COS20007 Object Oriented Programming
PWR30002 Novel Writing
ENT10002 Creativity and Innovation OR DES20057 Toolbox for Prototyping and Interdisciplinary Collaboration OR DDD20007 Design Systems and Services
Accounting Advanced Data Management Applied Mathematics Architecture Aviation Aviation Management Advanced Aviation Technology Minor Biomedical Science Biotechnology Business Law Chemistry Chinese
Cinema and Screen Studies Criminology Data Analytics Data Science Design History & Theory Design Principles & Processes Digital Advertising Technology Digital Marketing Diversity & Multiculturalism Economics Editing Engineering
Entrepreneurship Environmental Sustainability Film and Television Theory Film and Television Production Finance Games and Interactivity Gender and Sexualities Global History Global Studies Health Statistics Healthy Societies History
Human Resource Management Indigenous Studies Industrial Design Information & Communication Technwology Innovation Interior Architecture Interior Documentation & Construction International Business International Relations & Security Italian
Japanese Journalism Literature Logistics and Supply Chain Management Management Management for Health Managing Information Systems Marketing Media Industries Motion Design Neuroscience
Signature Series
Nutrition Philosophy Photomedia Physics Politics Psychology Public Relations Social Impact Social Media Sociology Tourism Web Development
Advanced Minor
Environmental Sustainability
Future Work Skills
Indigenous Studies
Innovation
Professional Placement
3D Modelling and Animation
Visual Effects
Web and Mobile Devices
SOC10005 Environment and Society
CAR20001 Future Work Skills
INS10001 Connecting with Culture: Indigenous Australian Experiences
ENT20006 Either Lean Startup Springboard OR DES30065 CSIRO Next Innovation Accelerator
A Professional Placement is a Work Integrated Learning (WIL) option. You can apply for Professional Placement during your second year.
DDD20022 3D Modelling for Objects and Environments
DDD20022 3D Modelling for Objects and Environments
DDD20015 Interaction Design for Web
DDD20023 3D Character Modelling
DDD30011 Compositing for Visual Effects
DDD20016 Experience Design and Usability for the Web
Faculty-led, overseas study tours offer incredible learning experiences that combine the adventure of travel as well as the opportunity to gain 12.5 one full unit of academic credit.
DDD30028 3D Character Design and Animation
FTV30024 Visual Effects Production
DDD30019 Web Marketing and Advanced Usability
DDD30018 3D Animation Project
DDM20007 Post Production for Digital Video
DDD30020 Interaction Design for Mobile Devices
PHI10001 History of Ideas
INS20001 Indigenous Representations
PHI20001 Environmental Philosophy
INS20002 International Indigenous Perspectives
DES20057 Toolbox for Prototyping and Interdisciplinary Collaboration
POL30010 Public Policy in Australia
INS30001 Indigenous Enterprise and Entrepreneurship
DES30066 Innovation Challenge Project
I feel if I had this resource myself, I may have chosen a more interesting an dynamic study path at Swinburne, incorperating minors from other interest areas.
Design Managment
ADV10001 Principles of Advertising ADV20001 Advertising Issues: Regulation, Ethics & Cultural Considerations
Other Minors
This planner also helps to align the touchpoint as we discussed in our proposal, bring the information together and streamlining the student experience across the bachelor of design.
The planner has been designed to match Swinburne’s Yellow/ Charcoal branding using Monteratt and Open sans. The poster is A2 in size.
View here: https://drive.google.com/file/d/1SRhjW9-
rbXaVVLVuqgTdYKgHUh7w5Ef2/view?usp=sharing
Study tour
Electives Or choose a selection of individual units across the Bachelor of Design. Please note pre-requisits may apply.
DDD30045 - UX/ID Capstone Project
Interactive Prototype | 46
Content Tone Next, we want to make sure the content is similar through both designs. Based on out paper prototypes we know what information we need. The tone of this must match Swinburne’s tone. The Swinburne brand guidelines state the tone must be: heroic, challenging, uplifting and assured. We need to balance this humanistic approach with a functional one to get across the information required. The humanistic text style will be advantageous if we are to develop unit descriptions, moving away from the wordy and often indistinguishable unit descriptions which are currently available on the website. Making the planner more human and considerate of first year or future students will help improve the user experience and give them confidence and understanding about what classes they are completing and why. We have been fortunate that Nicki will discuss with lecturers from each subject to write the descriptions. Below is the copy for the filter page. At Swinburne, we let you design your course to make it exciting and colourful. Customise your schedule, plan units when they suits you and streamline your course plan with MySwinplan. Explore your pathways before enrolling online.
Select your major (100pts) Students are required to complete 300pts across the life of their degree. Complete an additional 8 units across a second major, co-major, advanced minor, minor or other electives to round out your degree.
Advanced Minors Advanced minors are a structured set of units which build upon your first major. They can only be taken in conjunction with specific majors. It is worth 50pts.
Select your degree Our courses cover different disciplines to give aspiring students a wide range of career options. Each course includes 8 core units worth 100pts.
Co-Major A co-major is a major in a field of study outside this course. You can choose one in addition to a first major. It is worth 100 pts.
Electives Electives are stand along units from any part of the design degree. Call student HQ to discuss what options are available for you when planning electives into your course.
Select your starting year If you are yet to commence study with Swinburne, select your intended start year, otherwise, select the year when you began your course.
Select semester intake Semester 1 (Feb / March) Minor Select your faculty Second Major Minors are 4 specific units (50pts) which Semester 2 (July / Aug Swinburne offers world-class higher A second major can be chosen in may be chosen from any field of study. education in health, arts, design, addition to your first major and is part The shown minors are recommended business, law, science, engineering of the same study area. It is worth 100 for your course, but you may complete and technology. pts. others outside of this.
DDD30045 - UX/ID Capstone Project
Interactive Prototype | 47
Interactivity Implementation To hi-fi prototype Providing Feedback Providing a reaction for every action is regularly mentioned in heuristic sets, but as we create the prototype it is even more important. We don’t want to leave users wondering if their touch ‘worked’ or not. When a user presses something we want them to get feedback confirming their action, download, share or add of a unit.
DDD30045 - UX/ID Capstone Project
Interactive Prototype | 48
Interactivity Implementation To hi-fi prototype Color Coordination Previously on the first design state, we only implement monochrome color to our prototype, however we have the chance to experiment with color coordination at this second iteration of design process. The use of color in our system to communicate different information and state.
Unit cards color coordination in paper prototype.
Unit cards color coordination in hi-fi prototype.
MouseOver Interaction Designing hover states for elements in web devices prototype is important as this feedback will tell user which element is a clickable button. For our web version prototype, we add a shadow effect and lighten up the color for each button’s hover state. This is not done on the mobile version as it is not necessary for a touch-based device. Normal State
Hover State
DDD30045 - UX/ID Capstone Project
Interactive Prototype | 49
Interactivity Implementation To hi-fi prototype Accordion Menu Interaction An accordion menu interaction is implemented for the FAQ section on this system. This allow users to have control over the content as they are able to reveal the contents seek by users and hiding the unwanted contents. One of the benefit from having accordion menu is shorter pages and reduce scrolling for users.
Contracted accordion menu.
Expanded accordion menu.
Selected / Active State One of the implementation of states in our system is through the unit component filter tab. The tabs represent different information in accord with their titles. Second Major tab is on the selected state. Co-Major is on the hover state. Unit Component Filter Tab
DDD30045 - UX/ID Capstone Project
Interactive Prototype | 50
Interactivity Implementation To hi-fi prototype Interactive Form We include some interactive form components throughout our system. Axure Prototyping Software has some predesigned forms inside their library, so it was pretty to implement them into the prototype, all we had to do was to change the visual design to fit our system aesthetics.
Text fields & drop-down menu in a pop-up window.
DDD30045 - UX/ID Capstone Project
Drop-down menu and radio button on the filter page.
Interactive Prototype | 51
Interactivity Implementation To hi-fi prototype Interactions and Gestures
Touch Spaces
Moving towards the interactive prototype, the interactions of a mobile device vary from the experience we could create with the paper prototypes. Unlike desktop, mobile users rely on their finger tips to interact with the screen. Users can complete an array of interactions using their fingers, tapping, swiping, pinching or pushing to controller and prompt actions from the interface. For our interface we are going to primarily rely on tap and scroll. These gestures are well understood by most users and don’t involve any learning to use.
When designing for mobile it is important to consider the area of buttons and controls and the space between them. The accuracy of touch is lower than what can be achieved by a mouse pointer making both positioning and size incredibly important. Androids Material Design Principles state that touch targets should be 48 x 48dp at a minimum. The space between this is dependent on the size of the buttons. We can also use the size and placement of buttons to create hierarchy. Less important buttons can be smaller. An important area for us is on the unit planners as these require interaction from users in a small space. Making the x button small and in the top corner will give users space to view the unit description without the fear of accidentally closing the unit.
Testing gestures using Flutter driver (Kawar, 2019).
DDD30045 - UX/ID Capstone Project
Interactive Prototype | 52
Exploring Alternative Designs Colors When we are implementing colors to our system, we are conflicted to choose from different color groups that have been used in Swinburne’s marketing and publication materials.
1. Red & Grey - This color group is Swinburne’s main color identity as it is used on the logo itself. They seem to be dominant in Swinburne’s events marketing. However red and grey color may have negative color psychology (anger /danger / sophistication), so we are trying not to use this color group dominantly as we don’t want to associate course-planning activity with these emotions.
DDD30045 - UX/ID Capstone Project
2. Yellow & Blue & Grey - This color group is mostly used on digital /social media for marketing purposes. This color group have an overall good color psychology (happiness / hope / health / understanding), so we are considering in using this color group within our system.
3. Rainbow Color - This color group is mostly used for publication materials related to Swinburne’s peer / mentoring /club activities. As shown on the pin picture above, different colors are used to distinguish different major to represent diversity. This color group also have a good color psychology, however in terms of aesthetics, the colors are all over the place.
Interactive Prototype | 53
Exploring Alternative Designs
Current Planner
Colours Continued In our 3 proposals, we discussed streamlining the student experience when it comes to students planning their course. With this in mind, we wanted to reflect some of the colours used in current student planning documents. These align with the use of bright and fun colours explored through previous Swinburne Branding. Currently, blue is assigned to both core units and minors and orange to components on the planner. We have decided to honour the use of blue and orange for majors and components, but introduce a different colour to make the difference between majors and core units more obvious. We chose purple. Purple can be associated with creativity. It isn’t used to represent anything else across the Swinburne website making is a strong association for the core units. We will see how our users respond to this choice before proceeding further.
CORE PURPLE
MAJOR BLUE
COMPONENT ORANGE
WIL
#56008A
#3399FF
#FFA100
#2AC940
DDD30045 - UX/ID Capstone Project
Interactive Prototype | 54
Exploring Alternative Designs Unit Card Designs 1. Container with the unit title underlined 2. Container with the unit title underlined & ‘i’ button The unit card plays an important role in our system as it triggers unit description pop-up after a double-click on the card. However it takes time for user to figure out the interaction. One of the feedback we received to improve this function is by underlining the Unit title, making it look like a hyperlink, and another one is to input an ‘information’ icon on the card that will trigger the pop-up. Both feedback will improve our system in terms of ‘Recognition rather than recall’ heuristic. We are going to test these design separately on different users (A/B Testing) and we are going to calculate the time taken in figuring the task out with each design.
Unit Card without ‘i’ Icon
DDD30045 - UX/ID Capstone Project
Unit Card with ‘i’ Icon
Interactive Prototype | 55
Exploring Alternative Designs Selected State Since we are making both web and mobile prototypes individually, we ended up having different design for some of the selected state of the system’s elements. This is due to different approach in creating the selection unit tab and in showing selected unit card, although the same software (Axure RP) is being used. However these design alternative will work as a good design comparism subject when we are testing the prototype.
DDD30045 - UX/ID Capstone Project
Web Version
Mobile Version
Interactive Prototype | 56
Exploring Alternative Designs Click-click vs Drag & Drop When we test our previous prototype, most users instinctively show drag-and-drop gestures in moving the units around instead of using click-click interaction. One user is able to figure out the click-click interaction when adding the units, but that may be because user was looking at the paper-prototype thoroughly. We are implementing a click-click interaction into the ‘adding the units’ process because we may not be able to make a robust prototype that enables dragand-drop function. But now we are considering drag-and-drop as another design alternatives
Drag & Drop Interaction Storyboard Below are the storyboards of how we imagine drag-and-drop function would look like in our system. The red-rectangle box shows an area which differs from the other version.
1. This is how the page will look like when user first land on the page. In this version, there are no ‘add units’ button on the top of the header. Each slot has a text that reads ‘Drag a unit here’.
DDD30045 - UX/ID Capstone Project
2. When user click on a card and ready to drag it around, the card design will switch to the selected state.
3. When units are added to the slot, ‘x’ button will appear on the top of the unit card and added unit will be removed from the unit container on the right.
Interactive Prototype | 57
Exploring Alternative Designs Click-Click Interaction Storyboard
Below are the storyboards of how our click-click interaction works within the current version of prototype. The red-rectangle box shows an area which differs from the other version.
DDD30045 - UX/ID Capstone Project
1. This is how the page will look like when user first land on the page. In this version, ‘add units’ button is present on the top of the header. Each slot has a text that reads ‘Empty Slot’. User will have to click the ‘add units’ button to start.
2. After user click the ‘add units’ button, a ‘+’ button will appear on each unit container, showing that they are ready to be selected.
3. User then can select up to 4 units to be added to each semester slot. Unit card design will switch to the selected state.
4. When units are added to the slot, ‘x’ button will appear on the top of the unit card and added unit will be removed from the unit container on the right.
Interactive Prototype | 58
Design Description - Web Version Overall Look Screenshot of website page of the system. We are trying to match the system’s visuals with Swinburne website’s visuals as the system is going to be placed somewhere within the website.
DDD30045 - UX/ID Capstone Project
Interactive Prototype | 59
Design Description - Web Version Overall Look Screenshot of website page of the system. We are trying to match the system’s visuals with Swinburne website’s visuals as the system is going to be placed somewhere within the website.
DDD30045 - UX/ID Capstone Project
Interactive Prototype | 60
Design Description - Web and Mobile Components: Accordion Menus & Tabs Screenshots showing accordion menus and tabs that are implemented in the system.
DDD30045 - UX/ID Capstone Project
Interactive Prototype | 61
Design Description - Web Version Components: Unit Cards & Their States Screenshot of how the unit container and unit card look like at this stage of the development. We are grouping the units to core, major, and additional component units, and sorting the units on each tab based on its recommended year of study. Core, Major and component units will have different color code. The intensity of each color also deepens as its year level is getting higher.
DDD30045 - UX/ID Capstone Project
Interactive Prototype | 62
Design Description - Mobile Version Components: Unit Cards & Their States Screenshot of how the unit container and unit card look like at this stage of the development. We are grouping the units to core, major, and additional component units, and sorting the units on each tab based on its recommended year of study. Core, Major and component units will have different color code aligning with the colours of current planners. Units which can’t be added to a particular semester are grayed out, meaning they can’t be added. This aims to reduce errors users can create. Added units feature a dark grey out.
DDD30045 - UX/ID Capstone Project
Interactive Prototype | 63
Design Description – Web Version Components: Buttons & Pop-ups Screenshot of the buttons and pop-ups that are present in the system
DDD30045 - UX/ID Capstone Project
Interactive Prototype | 64
Design Description – Mobile Version Components: Buttons & Pop-ups Screenshot of the buttons and pop-ups that are present in the system
DDD30045 - UX/ID Capstone Project
Interactive Prototype | 65
Evaluation – Second Design Iteration Testing & Evaluation Due to COVID-19 situation, we are experiencing certain restrictions in doing the testing, thus we limit our participants to those who lives closeby to us and still within our target audience age range. We are doing 2 face-to-face testing and 3 online testing. Each user was asked to fill an evaluation sheet at the completion of the test which allowed us to gain further insights and after thoughts from participants. The evaluation sheet is broken into several sections focusing on the tasks given and several design areas.
Client Evaluation What made this second stage of design evaluation special is that we will have to test our prototype to the client and ask for their feedback to be implemented in the last design iteration stage.
DDD30045 - UX/ID Capstone Project
Evaluation - Second Design Iteration | 66
Procedures Similar to our previous testing, the procedure is broken into 4 sections: 1. The opening script 2. A scenario to set the scene for the user 3. The 5 step testing for both desktop and mobile 4. Evaluation & Closing Script Date & Time: Range: Tuesday, 2 June 2020 - 6 Saturday, 2020 Time: 40 minutes - 1 hour (Testing: 20 min, Questionnaire: 20 min) Limitation: Users completed web tasks before mobile which may lead to some bias in the testing due to their prior knowledge they have collected through the first set of tasks. It’s important that we are reflective of this as we move forward with our recommendations.
DDD30045 - UX/ID Capstone Project
Evaluation - Second Design Iteration | 67
Evaluation Sheet
Here is a copy of our evaluation sheet. The questions are divided into 5 sections, in addition to Task Rating activity: 1. Introduction 2. Interaction & Interface Design 3. Visual Design 4. Content Design 5. Additional Questions Visit here for the detailed version:
https://docs.google.com/spreadsheets/d/1Trn4oD9Vsr7sXIlKK8x5Sjio2oy8AZne4KVBmFtYDo/edit#gid=192748375
DDD30045 - UX/ID Capstone Project
Evaluation - Second Design Iteration | 68
User Evaluation Demographics Age: 20 - 25 years Gender: Male & Female Education Status: Current students & Alumni, from Swinburne, RMIT, Deakin, and University of Melbourne
Series of photographs taken during the face-to-face testing in one of the invigilator’s residence.
Method Face to face testing: As the outlined procedure, User will be using the laptop provided by invigilator to test the system. Online testing: As the outlined procedure, yet tested via Zoom/ Discord meeting rooms by sharing our screen. Link to the prototype is sent to participants prior to the testing.
Restrictions Social distancing restrictions in general and internet connectivity problems for online testing.
DDD30045 - UX/ID Capstone Project
Evaluation - Second Design Iteration | 69
Client Evaluation We completed an evaluation with Nicki via Zoom. In the evaluation we ran through the interfaces, asked Nicki to undertake tasks, further discussing what she expected from the planner or would like included. Overall Nicki was pleased with the planner and was able to use it’s functionalities across both platforms. Things she really enjoyed included filtering units, clearing units, the use of colour in different tones to communicate when something should be completed and the overall feel of the app on mobile. Things Nicki didn’t enjoy included the lack of drag and drop capabilities and scrolling to see all available units When asked one thing Nicki would like included, she really wanted to communicate with students why each unit is important as well as providing a visual que about the class. Using less academic language to discuss units was also a high priority for Nicki.
“I want it to be visual and to excite!”
DDD30045 - UX/ID Capstone Project
Evaluation - Second Design Iteration | 70
Evaluation Results – Stats Below is the evaluation scoring result of overall task easiness ranking and design heuristics. The highest the score, the easier the tasks are.
We divided our evaluation questions into 3 main design category, which are Interaction & Interface Design Rating, Visual Design and Content Design.
Improvements from Previous Testings: 1. No ‘task easiness’ score is below 60 2. ‘See Unit Descriptions’ task moves up from the last position to the third easiest
Below is the evaluation scoring result of each design category. The highest the score, the better our system design is according to its category.
Task easiness Ranking (Desktop & Mobile)
Rank
Task
Score /100
1
3. Remove Units from Planner
100
2
5. Save Course Planner
95
3
4. See Units descriptions
92.5
4
1. Test the Filters
90
4
2. Add Units to Planner
90
DDD30045 - UX/ID Capstone Project
Rank
System Design Rating
Score /100
1
Content
95
2
Interaction & Interface
91.5
3
Visual
81.25
Evaluation - Second Design Iteration | 71
Evaluation Results – A/B Testing Unit Card Designs
1. Unit Card without ‘i’ Icon
2. Unit Card with ‘i’ Icon
We plan to test user’s reaction to “see unit description” task on different unit cards and calculate the time taken by user to complete the task on each design. However, this doesn’t fully go as planned as most user still clicks on the underlined unit title even on the second design. This might be caused by the confusing design of the second version of the unit card. We should have not underlined the unit title on the second design to test this feature. We are planning to continue with the first unit card design but with an added visual cue / hover state, so that when user points the mouse on the unit title, it will change color.
DDD30045 - UX/ID Capstone Project
Evaluation - Second Design Iteration | 72
Evaluation Results – Recommendations Based on our observations, evaluations and the feedbacks, we realised that we compiled a list of refinements that we may implement on the final version of the system. Refinement Lists
Priority
Synchronize visuals between mobile and web version and make it blend with Swinburne’s design guidelines
Urgent
Add media photograph to unit description
Urgent
Provide more visual cue / lead to Urgent interactive buttons / links Change the placement of some
Intermediate
Implement drag & drop Intermediate functions or revise click-and-click steps
DDD30045 - UX/ID Capstone Project
Evaluation - Second Design Iteration | 73
Final Interactive Product Final Product Look, Content and Refinements Made
On this third iteration of the design process, we are going to fix mainly the interface visual design and a little bit of the interaction process within our system based on the previous heuristic evaluations.
Naming and Branding Choices
We will show the names that we came up for our planner from our brainstorming session. As for the branding choices, as this system will be owned and managed by Swinburne, we decided to not create a logo for this system, yet just to implement Swinburne’s design guideline into our system.
Layout Principles (UI Guidelines)
After we finalised our system looks, we create a UI guidelines for our system. This is to accelerate its development time, “improved communication among all the stakeholders involved in developing the interface...and keeping both code and design consistent throughout the site. “(Juaniz-Vella, 2016).
Design Principles Used & Aesthetics of design & Affordance
We will also be describing the principles that we apply to our design, which are listed in details on page 86
Promotional Material & Conference Poster
Posters that come along with our product, used for the purpose of showcasing the research and process behind our system, as well as for marketing material.
Budget Estimation
We made a budget estimation of our products, which is ranged from the scale of minimum object pre-position to its maximum range of application. DDD30045 - UX/ID Capstone Project
Final Interactive Product | 74
F I N A L P R O T O T Y P E Link to Prototype Web Version: https://2zygpq.axshare.com/ Link to Prototype Mobile Version: https://8u4r13.axshare.com/ Link to Prototype Alternative Web Version (Drag & Drop) https://donibi.axshare.com
DDD30045 - UX/ID Capstone Project
Final Interactive Product | 75
Web Content Content Text Some of the informations on the system are taken from Swinburne’s PDF course planner and Swinburne’s Course planning site. Some of them were typed by our own. This is to make sure the quality of the system is professional rather than just using some dummy text. For full version go to:
https://docs.google.com/document/d/19xm3qn4O6nAcmq5qBRqUni4UfOC4NwGHXb_e-VunZyY/edit
DDD30045 - UX/ID Capstone Project
Final Interactive Product | 76
Refinements Made Overall Refinements After our final testing we made a move to align our project with Swinburne’s current branding direction, reflecting their new yellow brand and website layout to conserve the lonegvity of this project. On top of this, we made a few adjustments to how users interacted, reducing unnecessary clicks and processes. Finally, we aligned our button design being conscious of what is currently used on the website.
DDD30045 - UX/ID Capstone Project
Final Interactive Product | 77
Refinements – Website Version Button Refinements
Tabs Design follows Mobile Version’s
Most of the changes that is prominent to the website version is its visual design. As we are trying to make both version looks coherent, we change the button design and allocation.
Buttons Removed As we refine the ‘adding unit’ process, we are able to reduce the steps that users need to take, thus ‘Added units’ and ‘cancel’ button are not needed anymore.
Buttons Allocation Download / Print / Share buttons are now located under the unit tab, so that user doesn’t need to scroll as far as before. DDD30045 - UX/ID Capstone Project
Final Interactive Product | 78
Refinements Made – Mobile Device Header and Landing Page Asset Design The new Swinburne brand is more refined and minimalistic. We wanted our imagery to closer align with what students are using this website for to help evoke emotions rather than using generic Swinburne architecture imagery. We also changed the colours to match the current brand guidelines, moving away from purple and red pops to yellow, and a much cooler charcoal grey. Font weights were also updated to closer align with the current hierarchy created with type on the website.
– New smaller header – Focused and relevant imagery
– My SwinPlan name included – Short call to action – New button icons
Filter Page DDD30045 - UX/ID Capstone Project
Planner Page
– Use on brand colours for non unit components Final Interactive Product | 79
Refinements Made FAQs Aligning the two designs The accordion effect created in the Website prototype tested well with users, so we chose to apply it across both mobile and web. Some adjustments were made to align the acordion look with the current brand mimicking other information blocks seen on the website. Refined FAQ section
Previous Versions – Yellow pop of colour
– Clear buttons to indicate accordion fold as seen on desktop test
– Minimalist and clear design
DDD30045 - UX/ID Capstone Project
Final Interactive Product | 80
Refinements Made Button Design Aligning the buttons with the brand In our testing, most users responded well to our buttons. We had originally used a very greyscale tone for the mobile and bright colours for the web. For our final design we aligned these with the Swinburne brand, relying on the greys and yellows. We want to make sure users know they are a button, so maintaining the button shape is very important.
Normal State
Hover State
DDD30045 - UX/ID Capstone Project
Final Interactive Product | 81
Refinements Made Unit Design Swinburne Look We had slightly different unit designs leading into the final prototype. For us it was vital we alligned these, using the same colours and font weights. The bolder title was easier to see for tested and also creates cleaer hyrachy. Throughout testing users were able to understand the underline as a link to press on so we maintained this. We also moved to making the crosses grey as this aligned better with the Swinburne look.
Core, major and Component units showing active, chosen and not-available states, with colour coding for intended year
DDD30045 - UX/ID Capstone Project
Final Interactive Product | 82
Refinements Made Unit Information Making it Visual Nicki really wanted to update how we talk about units with students making it ‘groovy.’ She wanted to prompt students to think about the cool things they could do in each class. Whilst we are still waiting for imagery and descriptions for each class we wanted to show that there is space to place such information. We adjusted the layout slightly to leave space for the image. We also applied the coloured line seen on the desktop pop-ups across both devices. This helps to add the colour Nicki was seeking, but also provide users with constant feedback about the unit and where it sits within their degree.
Mobile unit descriptions
DDD30045 - UX/ID Capstone Project
Final Interactive Product | 83
Naming and Branding Choices For this project it was vital that our design molded into the fabric of Swinburne’s existing identity. Keeping in-line with that, we didn’t want to develop a strong brand mark that could make it feel separate or like another asset slammed onto the Swinburne brand. Our focus moved to the naming of the platform or part of website. We wanted something that was simple but memorable.
Name Ideation My course Planner Course Planner Unit Sorter SwinMap Swinburne Course Planner Swin Planner MY SwinPlan Unit Plan MY Plan DesignPlan AcademicPlan Plan It Course Hub Planning Hub Swinburne Your Way Plan your Way
DDD30045 - UX/ID Capstone Project
Chosen Name Plan Structure Map it Course Builder My Classes Design it Unitwhen Plantable Online Course Planner Planburne Unit Align CourseFixer Know Your Course Swinburne Find it
Final Interactive Product | 84
Title UI Guidelines Description MY SWINPLAN
TYPOGRAPHY
Heading 5
Aa
COLOURS Units
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquipCORE ex eaPURPLE commodo consequat. DuisMAJOR aute irure in voluptateORANGE velit esse cillum dolore BLUEdolor in reprehenderit COMPONENT WIL eu OPEN SANS fugiat nulla pariatur. #56008A #3399FF #FFA100 #2AC940 abcdefghijklmnopqrstuvwxy
z
ABCDEFGHIJKLMNOPQRSTUVWXYZ 123456789 0
Brand
YELLOW
RED
#FFEC00
#DC2D27
CHARCOAL #000000
#343642
#FFFFFF
COMPONENTS
DDD30045 - UX/ID Capstone Project
Final Interactive Product | 85
Design Principles Used Usability Principles • Visibility We wanted to user buttons and shapes which are recognisable to the user. Drop down functionality and the tabular system are familiar to the users and they can quickly interpretate what they need to do and how. • Feedback For ever interaction with our design we wanted a reaction. We never want to leave users waiting or wondering if what they have pressed is pressable. Feedback was provided to users through the changing of button states (rollovers for desktop) and the change of unit states. Pop-ups also provide confirmation to users so they know once they have completed an action. • Constraints We created constraints and prevented users from preventing errors. The interface also keeps the user in one space, not asking them to open multiple tabs to completed what they need to do. Units which cannot be added to a unit are greyed out. This recduces the amount of decisions a user needs to make and the errors they can create. • Consistency For us consistency was vital. We wanted to present a minimalistic design with consistent layouts, buttons and interactions. Creating a consistent layout helps our user recognise patterns and tasks. It also means they don’t have to learn new information or look for repetitive actions. • Affordance We wanted to mimic real life actions or learned actions so users didn’t require new skills or knowledge to use the interface. The drop down, buttons and radio buttons are familiar to our users. Icons are also used to help visually encourage users.
DDD30045 - UX/ID Capstone Project
Final Interactive Product | 86
Design Principles Used Web Design Principles • Consistency See Previous Page • Simplicity Our design is centered around making the process of planning the course as clear, easy and understandable as possible. We wanted to make tasks feel natural to the user and our testing meant we could identify users desires to tap or drag. We also wanted to include the use of icons for assisting in understanding a task where possible. • Positioning We wanted to position information in a sequence which was logical. Users need to move down and right across the page to access relevant information. Whilst we weren’t able to place all important information at the top of the page, users are introduced to vital buttons and tasks and then can explore secondary elements. • Alignment Alignment has been a very clear principle in our design from the start. We planned our years so they run 1x4 across for web and 2x2 for mobile. This allows the users to naturally look across the units and recognise the differences between semesters in an organised manner. Units are aligned both vertically and horizontally creating a sense of unity across the design. Our layout is balanced and not top heavy adding to the stability and trustwothy qualities of the planner.
DDD30045 - UX/ID Capstone Project
Final Interactive Product | 87
Design Principles Used Page Layout Principles • Visual hierarchy olour and text size/weight has been used to create heirachy in our design. In earlier designs, certain components such as the WIL box held too much C heirachy due to their chunky headers. We have paired down the visual elements, making buttons in the charcoal colour or with the yellow accent more important. Paragraph styles have been applied. Setting up h1, h2, h3 and paragraph styles allows us to create obvious and defined differences between chunks of information. We have also used various text weights to differenciate between information show in close areas. • Visual flow e have kept our design inline with users viewing it from left to right and top to bottom. We have eliminated any harsh dark objects which may prevent/ W distract the users from navigtaing the site as expected. • Grouping e have grouped similar items together showing the units first in their given semester and then year. Units are also clearly divided into core, major or W components. Finally, we ungrouped important buttons such as the next button by placing it ofcentre. This visual diffentiation of this makes it stand out to users. • Alignment
See previous page
DDD30045 - UX/ID Capstone Project
Final Interactive Product | 88
Design Principles Used Aesthetic Principles in Interaction Design • Proportion We have no used historically proven proptions in our design but we are weary of how things should be sized in comparison to each other to create visual balance. • Rule of Thirds hilst rule of thirds is not used at all in our mobile device, it is used on the website. The page is roughly digivded into three, creating interest between how W the two main sections interact with each other. • Symmetry Symmetry is a strong of our mobile designs, creating almost a mirror image across the page. • Regularity Consistent spacing is used throughout both designs and is strongly evoked through the alignment of assets on the page. • Balance verall both designs are balanced with similar weights of objects on the left and right. The website design balances the third as it is more colour heavy in O comparsion to the units empty spaces.
DDD30045 - UX/ID Capstone Project
Final Interactive Product | 89
Affordance “Affordance is a property or feature of an object which presents a prompt on what can be done with this object. In short, affordances are cues which give a hint how users may interact with something, no matter physical or digital.” (Tubik Studio, 2018). We implement the affordance principle into our design, as shown in examples below:
Normal State Mouseover State Active State
When user is presented with an underlined text, it would be natural for them to associate them with a hyperlink.To support this perceived affordance, we add another state to the text (mouseover state) which will make the text to change color to achieve an actual affordance in our system and also to avoid confusion to users. DDD30045 - UX/ID Capstone Project
There are 2 states of the button. For the first state to change into the second state, user will need to click a ‘click to add unit button’. This little feedback is to show user that the system is responding to user’s action.
Another example of affordance application in our system is that we have different button / tab states to indicate that a component is clickable. “Desired actions cannot be carried out if the object does not afford it, and afforded actions might not be carried out if the user does not perceive they are possible.” (Kawar, 2019).
Final Interactive Product | 90
Conference Poster MY SWINPLAN My Swinplan aims to bridge the gap within student course knowledge through providing a comprehensive information and planning hub for students within the Bachelor of Design. The course planner allows students to explore their options and easily see how the various components of their degree can be planned together. The Swinburne Bachelor of design provides students with a flexible and specialist approach to a design degree. Students can choose a range of majors, minors and electives to sculpt their style of design and their ideal future direction.
INTRODUCTION
BACKGROUND & RESEARCH
DESIGN METHOD
We were asked to create an interactive web application which provides students with pathway options to navigate the core units, minors, advanced minors, majors and electives within the Bachelor of Design and UX Interaction major. The planner must allow students to construct their own educational path in an interactive and easy way, streamlining how students access information about their course.
Currently students access information about their courses from at least 4 locations including Swinburne’s Website, Student HQ, Orientation and a Static Planning document. The information students receive may vary slightly between each creating confusion or leaving students without all the information they need to plan their course.
• Organise research and interview data • Visualise User and Stake holder interactions • Outlay necessary interactions • Sketch Ideas • Develop low fidelity wireframes • Test, Test, Test • Develop high fidelity prototype • Refine designs
“Some units aren’t available every semester and it’s important to follow the planner so you don’t miss a step.”
“I want to know what you can fit into your course.”
Other major Univeristies including Monash, Deakin and Melbourne all offer an online planner systems.
– 2nd Year Student
– 3rd Year Student
1
DESIGN ITERATIONS Our design went through three major iterations. 1 Sketching 2 Low-fidelity Prototypes 3 High-fidelity Prototypes
2
3
DESIGN OUTCOMES For us creating a design which was interactive, responsive and flexible was key to the success of the project. The planner has the following functionalities: • Allow students to filter courses, majors and components • Allow users to view other student work • Viewable Unit descriptions • Add units semester by semester • See prerequisits • Prevent students from selecting unavailable units • Let students share or save their completed planner • Answer frequently asked questions
CONCLUSION Creating an online planner which is integrated into the current Swinburne website allows students to easily access relevant information. Using this as a tool for both Student HQ and Students allows everyone to be on the same page, ultimately empowering students to create informed decisions about their own course. Accessibility, understandability and visual cues are at the heart of the planning process making it a more enjoyable experience for students.
MY SWINPLAN LANDING PAGE AND PLANNER
DDD30045 - UX/ID Capstone Project
1
2
3
Made By Jessie Newton JESSIE NEWTON jessienewtondesign@gmail.com jessienewton.com.au @Jessienewtondesign /jessie-n/
JANE NOVELLA jane.novella@gmail.com janenovella.wixsite.com/folio @janenovella22 /jane-novella/
A conference poster/presentation focus on the academic or professional aspect of a research information. In this case, we are presenting our research and development process of ‘My SwinPlan’.
Final Interactive Product | 91
Budget Estimation Currently the planner has been created to consider the needs of students across the bachelor of design. The layout and structure of the project allows for it to be grown across FHAD and other faculties given the budget. A project and investment like this is invauable to the student expereince with the School of Design at the forefront of it.
Current Product – $30,000 Students across the Bachelor of Design First-year Students (beginning Semester 1) First-year Students (beginning Semester 2) UniLink/Swinburne Academy students (predetermined prerequisites) Students with other exemptions (from different courses majors or universities)
Maximum value proposition – $100,000 Across all other university courses
DDD30045 - UX/ID Capstone Project
Final Interactive Product | 92
Acknowledgement & Closing Statement We would like to express our deep gratitude to Dr Adam Walker, our main research supervisor, for his guidance, encouragements, understanding and thorough teachings throughout the past 4 months. Furthermore, we would like to thank Professor Jeni Paay, whom without her, wouldn’t make this project achievable. Thank you for giving us the chance to take this capstone and for providing us with this brief. We would also like to acknowledge with much appreciation the crucial role of Associate Professor Nicki Wragg who provided us with detailed and constructive feedback we so much need in order to develop this system. Our grateful thanks are also extended to Dr Alison De Kruiff, who gave us so much insight about students pathways in the UX Design course in Swinburne. Finally, we would like to thank our family and friends for their support and encouragement throughout our studies, and who have made themselves available for the prototype testings and have become a great resource during the project development. Jane Novella and Jessie Newton
DDD30045 - UX/ID Capstone Project
Closing | 93
Reference Lists Danish Designs. Behance. (2017). iPhone 8 Mockup Psd - Free Download. [image]. Retrieved on 13 June 2020 from https://www.behance.net/gallery/51150063/iPhone-8Mockup-Psd-Free-Download Dwivedi, A. (2017). Affordance in user interface design. Retrieved on 13 June 2020 from https://uxdesign.cc/affordance-in-user-interface-design-3b4b0b361143 Juaniz-Vella, I. (2016). Why You Might Need UI Guidelines. Retrieved on 6 June 2020 from https://www.ibexa.co/blog/why-you-might-need-ui-guidelines#:~:text=Susan%20 Robertson’s%20article%20on%20creating,code%20and%20design%20consistent%20throughout Kawar, D. (2019).Testing gestures using Flutter driver. [image]. Retrieved on 11 June 2020 from https://medium.com/flutter-community/testing-gestures-using-flutter-driverb37981c24366 Samochernyi, A. Freepik. (2017). Laptop mock up design Free Psd Web Templates. [image]. Retrieved on 13 June 2020 from https://www.freepik.com/free-psd/laptopmock-up-design_1041411.htm#page=1&query=laptop%20mockup&position=13#&position=13 Tubik Studio. (2018). UX Design Glossary: How to Use Affordances in User Interfaces. Retrieved on 13 June 2020 from https://uxplanet.org/ux-design-glossary-how-to-useaffordances-in-user-interfaces-393c8e9686e4
DDD30045 - UX/ID Capstone Project
Closing | 94