Issuu

Interactive Prototype IDEA9105 - Interface Design Date - 07/06/2021 Client - Enactus, University of Sydney Submitted by Aditya Srivastava (asri7307) Daniel Chan (dcha6832) Tian Sky Xie (txie4412)

Table of Contents Introduction

Tablet

User Issues and Needs

● Tablet Mockups ● Tablet Webflow

User Profile Table

Mobile

Design Solution

Iteration from A2

● Mobile Mockups ● Mobile Webflows

Heuristic Evaluation

Think-Aloud Protocol

Desktop

● Desktop Mockups ● Desktop Webflow

Interactive Prototypes 25 Reflection

Appendix

Introduction Design Brief - To redesign Enactus University of Sydney’s website to make it more user friendly, detailed and functional, keeping in mind the users who are going to access it and incorporate their values, goals, needs and address their issues in the new website. User Groups - Our Primary users are members of Enactus Sydney who are going to use the website for various purposes like collaborating with each other on a common platform, updating website with the latest Enactus content and events, engaging new members and attracting more people to join the society. To cater to that and through our initial research and client feedback we decided to create a Team Dashboard where the core team members can have a common platform to collaborate and keep check on the progress of various projects that Enactus is currently working on as well as planning future prospects. Design Process -

DIGITAL WIREFRAMES

LAYOUT DESIGN

DIGITAL MOCKUPS

INTERACTIVE PROTOTYPE

Convert the hand-sketched wireframes to digital wireframes and show the functionality through wireflows

CLIENT FEEDBACK ITERATIONS

Brainstorm possible ideas to create a layout design for the proposed dashboard

Create digital mockups of the finalised design incorporating user and client feedback

Convert the digital mockups into an interactive prototype, to showcase the navigation through the dashboard

Take into account the client feedback and iterate the design to fit client needs, create one screen and test it with a user

User Issues and Needs “I want to see all of Enactus Sydney’s events in one place so I can attend these events”

“I want to be able to communicate with the Enactus exec team when I have questions”

“We have different departments, eg HR, Operations etc.”

“We want to make our ongoing work more secure”

“We currently collaborate on Google Drive and Docs, need a centralized platform like Canvas”

“We want to collaborate on projects with more people”

“We want to engage more students”

“We compete in competitions with other Universities in Australia”

“A Website for External Users and a website for internal team members”

“Internal Team Events and Student Events”

“We lose track of our content at times”

“I want to be able to know how to create an Enactus project”

User Proﬁle Table User Type

New Visitors

Student Members

Internal Team Members

Values

Goals

Needs

Issues

Curiosity, Learning, Exploration, Enthusiasm, Openness

To learn and explore what Enactus does, without feeling overburdened with information

An efficient navigation system to access different areas of the website and be able to connect with the team

Difficult to find the right person to contact and learn more about Enactus, scattered and minimal information

Learning, Creativity, Connections, Growth, Competency

To attend Enactus Events, collaborate and make connections with other like minded students

A detailed updates on events and daily ongoing in Enactus Projects, so the members can contribute

No availability of a calendar of events to register from the website making difficult to take part in a desired project

Accountability, Efficiency, Expertise, Responsiveness, High Performance

To efficiently handle projects and events, keeping members updated, collaborating with each other easily, having order and set plans of execution

A centralised platform where all the team members can collaborate and exchange ideas for new projects and updates on the ongoing projects

Difficult to work efficiently without having a common platform to see and assess the ongoings of the team, using multiple means and platforms to collaborate

Summary of Design Solution The final design solution aims to make Enactus University of Sydney’s website more user friendly, detailed and functional through the three digital platforms - mobile, tablet and desktop. The idea was to keep a constant look and feel through all 3 platforms so as to not confuse the users accessing same website on different platforms, the design of the website went through multiple designs before arriving to the final solution. As the pictures display on the right, all interfaces strictly followed Enactus’ corporate identity guidelines (the two colours and font provided) and ensuring all features are clear and concise, functional and aesthetically pleasant for both external public users and internal team members to use. After the two clients meetings and feedback, multiple iterations were made to adjust and adapt in new features to better align with Enactus’ needs such as an integrated Facebook Messenger and one click access to all project related documents. Overall, the final design solution clearly addresses Enactus’ values, goals and needs.

Iteration following A2 Feedback Changes were made to the final design following feedback from Assignment 2. Instead of focusing on different elements and parts of the website, we as a group decided to focus on developing an internal dashboard for the client, keeping in mind their various needs and day to day activities. The idea was to provide the client with a platform where they can collaborate together in a common space and are able to securely work and share their progress. The initial dashboard focused on providing monthly reports to the user but that was changed and incorporated into the Projects page where all necessary information regarding the projects can be found (See Mobile/Desktop Prototype). From the client meetings held after Assignment 2, the client informed us that they usually collaborate and communicate through Facebook Messenger and Google Drive. Keeping that in mind we changed our initial idea of having an independent file system and login details, and integrated the ability for the user to login to the dashboard through their social media accounts to make it easier for them to migrate from one platform to a new one. The mailbox and files can be integrated and powered by Google Drive and mail and the dashboard would act as a one place stop for the client to access various platforms that they are engaging with currently.

Heuristic Evaluation Why did we choose this method? Heuristic Evaluation is used to measure the usability of a user interface to reveal usability problems, which in turn would help enhance the usability of the interface. It was chosen as the method to test our initial login screen, as the login screen was going to be the landing page through which the dashboard can be accessed, it became the most important page to be tested out to look for errors and overall aesthetics of the page. How was this method carried out? (Appendix 2) The participants were asked to login to the dashboard using the provided Login page and we observed them while they did so by observing the participants and taking note of their actions and issues they faced while using the login screen. Key Findings and Insights ● ● ●

All of the participants asked if they could fill out their Email address and Password to login. Participants were confused if they should just press Login button to enter the Dashboard. Participants felt the interface was simple and easy to understand and were not overburdened with a lot of information.

Initial Login Screen used for the evaluation

Final Design Login Screen (Mobile)

Through our observation we realised that the Email and Password fields should not be left blank and there should be error prevention incase someone presses login button without filling out their email and password, in our final design we incorporated these steps to direct users to fill out the empty fields. The suggestion to include social media accounts for login purposes was also an important aspect and it was noticed from client feedback as well. So in our final design we provided the users to access the dashboard through their facebook or Google account as well. See page 24 (“Mobile Webflow - Login Error Prevention”) for a detailed summary of the iteration due to these findings.

Final Design Login Screen (Desktop)

Think Aloud Protocol Method Why did we choose this method? Tomitsch et al. (2021) states that the think-aloud protocol method allows designers to gain insight on people’s thought processes while they are interacting with a product or service, therefore, the group decided to use it How was this method carried out? (Appendix 3 and 4) The think aloud protocol was conducted for each prototype (desktop, tablet and mobile) with 7 participants each who were given 5-6 tasks to perform on the interactive Figma prototype. Users were instructed to voice out their thinking process and thoughts whilst navigating through the screens and direct observation was documented to view their sequence of actions. Each user was able to complete the set number of tasks with little or no assistance. Insights gained from the think-aloud protocol session were used to inform further iterations. Key Findings and Insights -

Participants were able to easily navigate through the interface and complete the tasks quickly Participants were able to login on the dashboard with ease and explored various parts of it without any assistance One participant was confused how to “logout” of the dashboard Participants felt the interface of the website was well structured and easy to follow Participants were able to understand the concept behind the idea of a dashboard

By using think aloud protocol we were able to test our final prototypes successfully with multiple participants, most of whom found the interface and design of the suggested dashboard quite appealing, simple and straightforward. Some participants noted observation like the confusion in logging out which is something we could have rectified in future iterations if given more time but for the most part of the user testing everything went smoothly and users also enjoyed going through a digital interactive prototype.

Desktop Mockups

Homepage - Visitors are greeted to a carousel of photos that is visually appealing and helps hold their attention. A large “Join Now!” button in the centre of the screen captures the attention of potential new users and allows them to sign up quicker and easier than before

Desktop Mockups

Search bar - Visible on the Navigation Bar, the search bar allows visitors to find things on the website easier and faster

Desktop Mockups

Once the form has been sent, it will show a “thank you” screen letting the user know that the message has been received.

Desktop Mockups When members press on this button on the top right hand corner of any page of the Dashboard, members are greeted with a drop down menu where they can edit their profile, settings and logout (which takes them back to the Homepage).

Sign up / Sign in modal - pops up on every screen on the website after the user presses the “Sign In” button on the top right hand corner. It allows members of Enactus to login using their email and password combination or sign in using Facebook or Google.

Member Dashboard (once logged in) provides an on-demand overview of all the most important metrics to members without having to flick through specific screens. Members can expand each individual metric widget to a full screen and have the customisation to personalise their dashboard by rearranging the widgets.

Desktop Mockups When members “hover” over the “Sort by - Date added” area, a drop down menu appears, which allows members to rearrange and sort the projects in a specified order.

Dashboard Projects tab - This shows the Projects tab on the Dashboard. For members to see a specific project, they will have to click on the project, then it will open up and show the project details (as seen in the image on the right)

Desktop Mockups When members “hover” over the “Sort by - Latest First” area, a drop down menu appears, which allows members to rearrange and sort the chats in a specified order.

Dashboard Chat tab - Similar to the Project tab on the previous page, for members to open up specific chats, they will have to click on the chat, then it will open up and show the chat conversation (as seen in the image on the right)

Desktop Webﬂow

View the Desktop Webflow on Miro here: https://miro.com/app/board/o9J_lPeIXi8=/?moveToWidget=3074457359793783326&cot=14

Tablet Mockups

Monthly Calendar - The calendar displays meetings, events or any plans Enactus have put down for team members to view

Calendar - The calendar display by months, can also BE scrolled up and down

Project - Once user clicks into calendar it will take them directly to the project page

Project - all project related documents will be display here

Folder - Team members can tag people to allocate tasks

Folder - The project page will display all documents for the project

Tablet Webﬂow Tablet Webflow demonstrates the calendar and project functions. When user click into the chosen date on calendar they may add or edit a event for that particular date, and can also access the existing project related document on the chosen date. In fact, the calendar is directly linked to the project function. This feature is particularly designed for Enactus team members to achieve more informations at once in order to increase productivity and efficiency. Team members can also make direct edit and adjustable through the calendar.

Mobile Mockups

Dashboard Login Page with integration of a login module as well as option to link Facebook or Gmail accounts

Dashboard Homepage is the central overview for easy access to users from where they can navigate to different pages

Menu Bar integration for Navigation to different pages

Mobile Mockups

Projects page showcasing different Enactus projects currently going on and there progress

Individual Project Tab containing multiple documents related to a project

Each file can be accessed and viewed within the dashboard itself

Mobile Mockups

Email Inbox integration in dashboard for important updates and project planning

Integration of a Personal Calendar for the individual team member

The specific marked dates can be clicked to access event/ meeting details

Mobile Mockups

Integration of Facebook and Messenger chat to connect with other Team Members

A files page was provided to give access to all documents in one place for all ongoing projects

Individual files can be accessed from the files tab to see further details

Mobile Webﬂow Mobile Web Flows were created to show the navigation through the interactive prototype, The user logs in to the dashboard and can access various pages through the home screen using the widgets as well as through the drop down menu.

The prototype and final design also makes sure that user is able to login properly and errors are prevented on the login screen to direct users to fill out email and password forms before logging in to the dashboard View the Mobile Webflow on Miro here: https://miro.com/app/board/o9J_lPeIXi8=/?moveToWidget=3074457359753740659&cot=14

Mobile Webﬂow Dashboard Navigation

Project Details page shows the progress of various Enactus projects and contains important files and documents including team details

User can access the projects page through widget or drop down menu

Drop Down Menu to navigate to different areas of the dashboard

User’s personal calendar to access details about various events and schedule meetings and appointments with other members

User enters their Email ID and Password

User has the option to login through their email ID or through their social media accounts

Integration of User’s mail inbox to access daily mails and updates

Facebook Messenger Chat integrated into Team Members chat to connect with them easily

Project FIles page where users can access important files for various Enactus Projects

Mobile Webﬂow - Login Error Prevention Password provided by the user

User can log out of their account through the Dashboard Home Screen and will be redirected to the Login Page

User provides a valid Email to login

User Provides Email and Password to login

Once email and password forms are filled user can login to their account or Login through their facebook or gmail account

Email ID provided by the user

User Provides Password to login

User is redirected to their Dashboard home screen after successful login

Interactive Prototypes Desktop Prototype - http://tinyurl.com/dcha6832DesktopFinalPrototype Desktop Prototype Video Walkthrough - https://youtu.be/IzPQcjnPwRc

Tablet Prototype - https://tinyurl.com/8resy7am Tablet Prototype Video Walkthrough - https://youtu.be/eW0jEGKH_rE

Mobile Prototype - https://tinyurl.com/asri7307MobilePrototype Mobile Prototype Video Walkthrough - https://youtu.be/9oKj6afa4xg

Reﬂection The design brief provided to us was straightforward and simple on paper - ‘Redesign the website for Client’ but in reality there were so many variables to consider and the problem was not as straightforward as it seemed. To inform ourselves better we went through a number of research methods to find the actual user needs, goals and values and design to solve those things instead of simply redesigning a website. We changed our initial idea of redesigning the website to creating a new platform for the Enactus team in the form of a Dashboard where they can collaborate and communicate with each other with ease. After doing our initial wireframes we received further feedback from the client about what they felt worked for them and what they felt didn’t work. Initially the integration of having social media accounts as medium to log on to the dashboard was not present but we decided to incorporate it as the client felt comfortable and could relate to a similar structure more than being introduced to a new web-based app or platform. As a starting point we created our Dashboard login screen first and tested it with users to see if we were going in the right direction, the user testing and the subsequent heuristic evaluation helped us in tweaking out finer details that we were missing from our initial work and we incorporated those changes in our final solution. For the final solution we conducted think aloud protocol to assess the usability of the website and as discussed above we were met with promising feedback from our participants, especially for the simple and minimalist design and interface for all three platforms. There were a few more suggestions and nooks we would have liked to correct but due to limited time and resources we were not able to implement them in this iteration but if given a chance to work further on this project we would definitely love to improve our solution and prototypes even further.

Appendix Appendix 1 - Client meeting log

Appendix 5 - Video Walkthroughs

Appendix 2 - Heuristic Evaluation

Appendix 5A - Desktop Prototype Video Walkthrough

Appendix 3 - Think Aloud Questions

Appendix 5B - Tablet Prototype Video Walkthrough

Appendix 3A - Desktop Prototype Think Aloud Questions

Appendix 5C - Mobile Prototype Video Walkthrough

Appendix 3B - Tablet Prototype Think Aloud Questions

Appendix 6 - Mobile Drop Down Menus

Appendix 3C - Mobile Prototype Think Aloud Questions

Appendix 7 - Site Maps

Appendix 4 - Think Aloud data

Appendix 7A - Desktop Site Map

Appendix 4A - Desktop Prototype Think Aloud #1

Appendix 7B - Tablet Site Map

Appendix 4B - Desktop Prototype Think Aloud #2

Appendix 7C - Mobile Site Map

Appendix 4C - Tablet Prototype Think Aloud #1 Appendix 4D - Tablet Prototype Think Aloud #2 Appendix 4E - Mobile Prototype Think Aloud #1 Appendix 4F - Mobile Prototype Think Aloud #2 Appendix 4F - Mobile Prototype Think Aloud #3

Appendix 1 - Client meeting log (Transcript) Daniel All right, here we go. Alright, sweet, so Hi I'm Daniel, Skye, and yeah, so we just go through our why friends. So I guess we just started off going through learning about the user, I mean we got some information from you the other week, and we put that into a list of user needs and issues so like, basically all the issues that you've been facing by using the current website. So we went to the website we tried and explored what all is there already, Aditya and what all you told us in the client meeting. And then we did a little bit more research work into it and came up with the different user needs and what kind of users that are going to use the websites so one was the new visitors who are visiting the website for the first time. The other was student members who are members of enactus but are not actively but active participants into the project. And the third one was the internal members like you and the other team members who are actively working on the project. So the idea was to what we did was we created the homepage for the new visitors and tried to incorporate the calendar and the events for the student members who are the current members, and for the internal team members we decided to do a separate dashboard. So which connects to the current website, but it's not that intrusive into it so that a new person wouldn't be would would not be very confused. If he's looking at Ron Okay, so you will have a login ID and you can log in, log into it so it will be a secure so that you can have all your documents all your project timelines and what projects are going on the team members details. So, that will sort of work like Canvas show, and everything is in one place a new centralized system that we Daniel show so we show you. We just did some early preliminary sketches and then went to the mall, just hand sketches, and then we'll show you like the final, I guess desktop sort of y flow. So, this would be what the, I guess homepage looks like it's instead of having just a static image right in the middle we've got like sort of a carousel, so it sort of clicks through, it's more engaging users. And then we've also got a Join Us button just running the center to capture them and, you know, if they want to join because we found that it was pretty hard for users, justifying Aditya to find joy in how to join the So, I think, currently I think you will have a contact form, where you need to fill it up and then it goes through to someone and then they'll reply back. So I think the concept was to have a portal where you can immediately join the team. Yeah, sure. So you've got like a little pop up so once the user clicks sign in. We've got a pop up modal, and allows users to sign in or sign up. And once they sign in, they get to this dashboard. So it's sort of like an overview of, like, I guess highlights of everything that's going on so you get a personal calendar with show which one show up the events that are going to be taking place, you will have a mail inbox where you can check your meals, and then they will be voting for having a seen the project monthly reports and the updates on them. Daniel And it also allows the user is also one of the iterations we made was, allowing the users to rearrange the dashboard so customize. Oh cool, yeah. And you also got like a dark mode, because I think that's pretty cool. John Will that capture only emails related to an actor so would it be like their unique email inboxes that I'm not sure if that's necessarily. Aditya I think we can. That's something that we want to keep open cool so you can sync your, your email ID if you want, or if you have a separate ad for an actor's work also and you can sync that as well.

Daniel So and then, I guess we'll just take you through so like I guess this home projects inbox calendar chat files on the side of the tabs, then if you go to projects, you've got a list of your projects so you can see when the deadline is we'll think about maybe even having like a percentage of like yeah, like I guess how much comes on completion so you've got the people there, then I guess when you click onto a specific project, it takes you to this overview of like the project page so like files, tasks, and the team member team John members, what stage of project you're in. Yeah, sure. Sky Um within like the team members when you can actually tag specific people person, to finish that folder or finish that document. Okay, if that makes sense to you so you can assign people. Yeah, it's like a Google Drive, but it's more visualize Yeah, that makes a lot. Daniel Okay, sure. And then these are just some other things such as chat, chat, and to contact the team, a way to view all your files is sort of just a dashboard which has everything kind of centralizes like a bunch of different apps that John we use already. That's really cool. Aditya Once we decided that we just made the different iterations for every platform so for a tablet and for a phone, and then for the desktop, also, is just tablet on house, and it was basically just trained resizing it and making it present. John I really like it. I like that Dennis Rodman was a member of an act as I saw that. I think it's really cool. You guys have captured I think a big challenge that an Enactus has at the moment and a lot of, I know a lot of other inactive societies have but I think societies in general and that's cool, consolidating a lot of different apps in use there's Trello Google Drive. So many many mental blank as a result. And I think that's really good because I think that's a big roadblock that members have, I think, what could be really good to seeing how some of the different functions you have none of them really jump out I think that's probably the most obvious one, how that can incorporate with, like Facebook, I'm not saying like, I'm not suggesting like you guys work out to make it incorporate but just keep in mind that, members, every, all of the members that will use this website are going to be using Facebook mainly, so they're their default, at least for like the short and medium term, if they want to send a message and trade and calendar events and stuff they'll be like, I'm going to go on Facebook. So I think that's something really important to consider. Otherwise, I really like how the, especially this is a lot more inviting to members members to join an actus unfortunately can't just do it. Like when they want to, we do hire like at the beginning of the semester. That said, I'm thinking of where we are thinking of opening up to 2pm into the kind of just be available for volunteering opportunities and stuff so having the button that allows them to like join whenever it's kind of like a dry saying I'm available for practice. I really like it. Do you guys have any more questions for me. Are we out of rambled. Aditya So, the, you said you talked about having a centralized system, in that way. So are you guys. Particularly, communicating on Facebook only, like you said that because I think we went through the Facebook page and everything, and the events and everything is there. But I didn't find any way to register for it at all. John So the, when I say we use Facebook. We've got a group where I post, we have weekly general meetings, I'll post mine is on a Monday that, that's to a private group. So, like, what I'm saying is that all of the group chats that all the projects have exec anything because we set up our own as well. We tried discord, but it was just in my head, people didn't want to download anything Yeah. So yeah that's what I made great switch.

Appendix 2 - Heuristic Evaluation Heuristic

Is the heuristic violated? How?

Severity

Visibility of System

Yes. The login page logs in users onto the dashboard straightaway on clicking the login button

Match between system and the real world

No. The phrases and words used on the page are relatable to real world login screens

User control and freedom

No. The user has only the login button as a way to log in and there aren’t multiple links and redirects

Consistency and Standards

No. The Login screen is based of other login screens and follows a similar design patterns

Error Prevention

Yes. The login screen does not guide the user to put their email and password in the fields

Recognition rather than recall

No. The login button is clearly visible and states what it function is the email and password fields are greyed to not give them too much attention

Aesthetics and Minimalist Design

No. The design of the screen is very straightforward and simple to not confuse users

Error Recovery

Yes. The users can't put their email and password in the field and they can’t access it

Appendix 3A - Desktop Prototype Think Aloud Questions 1. Search for the Contact Page via the search bar in the “quick links” and go to the page, and send a “complaint” 2. Sign in to the team member dashboard using your name and password and save your password 3. Find the to-do list tasks for the Provis project 4. Reply to Jessica’s messenger chat with a thumbs up emoji 5. Logout of dashboard

Appendix 3B - Tablet Prototype Think Aloud Questions 1. 2. 3. 4. 5. 6.

Find the month of June Find [Provis Prep day] and [Provis Project - second team meeting date] Click into [Provis prep day] and click [edit file] Click into [To do list] file Complete all to do list tasks (tick the box) Logout of Dashboard

Appendix 3C - Mobile Prototype Think Aloud Questions 1. Login through the team members dashboard home screen using email and password 2. Navigate through the dashboard home screen using widgets and drop down menu 3. Check an Event’s Details for 6th May on the Calendar page 4. Check Projects page and see details about Provis and open to-do list 5. Check Files page through Drop down menu and see details about Provis Eyewear 6. Logout of Dashboard

Appendix 4A - Desktop Prototype Think Aloud #1 Task

Start participant on:

Search for the Contact Page via the search bar in the “quick links” and go to the page, and send a “complaint”

Homepage

Verbal Protocol -

“So i presume i press contact us because i cant sign in can i?” “Whats the search bar?” (had to say search button) Ok “Contact us - takes you to the same thing” “Fill in the form” “Ok they already know my name” “Complaint” “Write a message” “The message already typed for me thats good” “Ok send message”

Homepage

“Email, password and remember me” “Good morning john”

Find the to-do list tasks for the Provis project

Dashboard home

“Provis” “To-do list tasks”

Reply to Jessica’s messenger chat with a thumbs up emoji

Dashboard home

“Where’s Jessica?” “Reply to her” “Good job”

Logout of dashboard

Dashboard home

“Umm i dont know how to log out of this...i suppose you go to homepage?” “Ok, Logout yep”

Appendix 4B - Desktop Prototype Think Aloud #2 Task

Start participant on:

Verbal Protocol

Search for the Contact Page via the search bar in the “quick links” and go to the page, and send a “complaint”

Homepage

“Clicking contact from the search bar” “How come i can’t type my name?” “Sending a complaint” “Filling the subject, writing my message and then im sending the message”

Homepage

“Signing in, clicking email, writing email and password, clicking remember me, logging in”

Find the to-do list tasks for the Provis project

Dashboard home

“Ok so i think ill go projects page, select provis...im looking at the provis page right now, opening to do list”

Reply to Jessica’s messenger chat with a thumbs up emoji

Dashboard home

“Going to inboxes...should i go inbox because i cant see jessica’s texts?” “Where the frick is jessica’s texts?” “Umm idk where jessica is?” “Where is it? ohhhh...nice”

Logout of dashboard

Dashboard home

“Umm i dont know how to log out of this...i suppose you go to homepage?” “Ok, Logout yep”

Appendix 4C - Tablet Prototype Think Aloud #1 Task

Start participant on

Verbal Protocol

Find the month of June

Calendar page

“I found the month of June, it’s right here”

Find [Provis Prep day] and [Provis Project - second team meeting date]

Calendar - Month of June

“I think it took me 30 seconds to find the two event dates, but i was easy to see ”

Click into [Provis prep day] and click [edit file]

Calendar - Month of June

“Should i click the edit file or edit event? I’m not sure which one? But the edit file has a dark shadow on it so i will click into this one”

Click into [To do list] file

Projects Page

“Easy!”

Complete all to do list task (tick the box)

Files Page

“I was quite satisfying to see the tasks get all completed”

Appendix 4D - Tablet Prototype Think Aloud #2 Task

Start participant on

Verbal Protocol

Find the month of June

Calendar page

“Found it! Very easy”

Find [Provis Prep day] and [Provis Project - second team meeting date]

Calendar - Month of June

“Okay, it was hard to find at first because there is a quite a few event on different dates ”

Click into [Provis prep day] and click [edit file]

Calendar - Month of June

“ I like how the edge is highlighted so i know i’ve chose the right one or the one that i want”

Click into [To do list] file

Projects Page

“ I really like the colour scheme, it’s simple but works effective”

Complete all to do list task (tick the box)

Files Page

“The page looks very organised and would makes me want to work and get these ticks off”

Appendix 4D - Tablet Prototype Think Aloud #1 and #2

Appendix 4E - Mobile Prototype Think Aloud #1 Task

Start participant on

Verbal Protocol

Dashboard Login Page

“Put email, put password and login i guess right? Or i can do it through facebook and google as well, seems simple enough.”

Navigate through the dashboard home screen using widgets and drop down menu

Dashboard Home Screen

“I like how there are small boxes of everything on this page, mail, calendar, projects and team member details all in one place”

Calendar Page

“So 6th May we have a meeting it just opens like a dialogue box and if i click again it closes”

Projects Page

“I’m gonna use the menu to go to projects page, so three projects are listed here, Provis has multiple files on it and the to do list opens up the checklist tasks”

Check Files page through Drop down menu and see details about Provis Eyewear

Files Page

“So these are the same files as the project page just in a different tab, and according to project, more of a data collection spot.”

Logout of Dashboard

Dashboard Home Screen

“So i go back to home page and just press logout and i’m back at the login screen”

Check an Event’s Details for 6th May on the Calendar page

Check Projects page and see details about Provis and open to-do list

Appendix 4F - Mobile Prototype Think Aloud #2 Task

Start participant on

Verbal Protocol

Dashboard Login Page

“I put my email ID and password, able to login easily without any struggles”

Navigate through the dashboard home screen using widgets and drop down menu

Dashboard Home Screen

“Ok, the dashboard is very clear and structured, it's not confusing me, i like that the back button works and takes me back to home”

Check an Event’s Details for 6th May on the Calendar page

Calendar Page

“The calendar is very sorted and i can access the event details for 6th May”

Projects Page

“Crisp project progress, seeing who the team members are on every project makes it easier, i can see the to-do checklist for the project”

Check Files page through Drop down menu and see details about Provis Eyewear

Files Page

“In files i cant open all the project folders but i think since its a prototype it wasn't implemented”

Logout of Dashboard

Dashboard Home Screen

Easy logout form the home screen

Check Projects page and see details about Provis and open to-do list

Appendix 4G - Mobile Prototype Think Aloud #3 Task

Start participant on

Verbal Protocol

Dashboard Login Page

“I don’t have a login for enactus, oh i just click to fill the field, nice that was easy”

Navigate through the dashboard home screen using widgets and drop down menu

Dashboard Home Screen

“Homepage is good, you see everything in one place. Simple, neat seems pretty chill and easy to navigate”

Check an Event’s Details for 6th May on the Calendar page

Calendar Page

“Went to calendar, the pop up for the event details was nice”

Check Projects page and see details about Provis and open to-do list

Projects Page

“In project to-do list i like the easy access to individual project and it’s details.”

Check Files page through Drop down menu and see details about Provis Eyewear

Files Page

“Pretty smooth, simple to see and understand, very smooth and clear navigation”

Logout of Dashboard

Dashboard Home Screen

“Logged out successfully without any issues”

Appendix 5A - Desktop Prototype Video Walkthrough

Appendix 5B - Tablet Prototype Video Walkthrough

Appendix 5C - Mobile Prototype Video Walkthrough

Appendix 6 - Mobile Drop Down Menus

Appendix 7A - Desktop Site Map

Appendix 7B - Tablet Site Map

Appendix 7C - Mobile Site Map