Hi, fidelity
In this phase of the project we have implemented a high-fidelity prototype in Adobe XD based on the designs from the previous phase.
Download prototype get_appIntroduction
Based on the low-fidelity mockup created during the phase II using Balsamiq, several features have been since incorporated using the high-fidelity tool - Adobe XD for phase III. The transition from low-fidelity to high-fidelity mockup, aims to enhance user experience, along with responsive and transitive functions, making the prototype an ideal working solution to the FitConnect mobile-based application. In terms of specifications, the font used for display is Avenir Next, as based on reviews and experience, the font stands out to have better readability on computer and mobile screens. Since this application is part of the University of Victoria health program, the university colour palette and themes have been used throughout the prototype.
Prototypes
Students
When the app is first opened, the user is taken through a load screen. The load screen then transitions into the login, sign up and admin login page. If the user has used the app before, the user will be able to login with their email address and password. If the user has not used the app before, they will be able to sign up through the ‘sign up’ button.
The home screen contains a list nearby volunteers or participants. The user is able to view a volunteer or participants profile by tapping on their picture. The user is able to like or not like a participant or volunteer. If the user likes the volunteer or participant, and the volunteer or participant likes the user back, a new chat is started. If the user dislikes the volunteer or participant, the volunteer or participant is then removed from the home screen.
Users are able to access and preview their own profile by tapping on the ‘profile’ icon in the top left corner. The user is able to see how their profile looks to the other volunteers or participants. To edit their profile, the user will tap the ‘settings’ icon in the top left corner. From there the user is able to upload new photos, delete photos, and edit the text. A user is also able to ‘delete account’ and ‘logout’ through the profile edit screen.
Chats are accessed through the top right corner on the home screen by tapping on the ‘message’ icon. In the message screen, the user is able to send and receive chats. A list of volunteers or participants is shown at the top of the screen. These are the volunteers or participants who have liked the user, and now the user has the ability to like or dislike the requested match. To chat with a participant or volunteer, the user can tap on the chat. The user is also able to view the participant or volunteers profile by tapping on the picture. If the user at any point feels uncomfortable with their match, they are able to unmatch by tapping on the participant or volunteers profile and scrolling to the bottom and tapping on the ‘unmatch’ button. The user is able to report the participant or volunteer through the ‘more’ button in the top right corner of the chat.
Administrators
When the app is first opened, admins are taken through the FitConnect load screen which then transitions into the login screen. Admins are able to login through the ‘admin login’ button located at the bottom of the login screen. Admins can login using their email address and password.
The admin homepage consists of 3 tabs; one for volunteers, one for participants, and one for future appointments. Under the appointments tab, admins are able to see upcoming appointments with future or current users. Under the volunteers tab, there is a list of all volunteers, those who are already approved and those who ‘pending approval’. Admins are able to approve, remove, view report history, message and schedule appointments for a user all by tapping on the ‘manage’ button. Admins are also able to filter on the different tabs to make tasks easier. The interface is the same for the participants tab.
To view reported users, there is a ‘view reports’ button. This button takes the admin to the reported page where the admin can see why the user was reported, and message the user to further inquire. The admin has the ability to ‘forgive’ the user or ‘ban’ the user by clicking on the appropriate buttons.
Requirements
Requirement: The application needs to provide a secure and safe platform for participants to communicate with their peer volunteer without providing too much personal information.
The application only shows other users the pictures that you’ve posted and your first name, gender, age, program, fitness goals, favourite activities, and any additional interests. These are basic details necessary to facilitate good matches, and leaves the user to be as specific as they wish. Matches only occur when both parties have consented to communication by mutually “liking” each other. The in app chat is secure and provides a button in the top right corner of the chat to report users should they make them uncomfortable. These design requirements remained the same as the previous prototype. Added in the latest prototype is the ability to unmatch with people that you’ve matched with. This allows for people to remove people who they think would not fit with their goals. It also promotes a safe and secure platform, since it allows users to restrict their matches if they have any second thoughts.
Requirement: The application needs to filter out volunteers who are there for the wrong reasons to make participants feel safe.
UVHS staff are able to coordinate with volunteers and set up a meeting time with them through the app. This is different than previous phases, which were through email. This further aids UVHS staff in their task of filtering bad volunteers. Once UVHS staff has determined that the volunteer is a fit for the program, the volunteer will begin to be able to match with users in the app.
Requirement: The application needs to match volunteers to participants based on availability, goals, gender identity, interests, etc.
Like in the previous prototype, a matches page is accessible under the home button. Participants and volunteers are able to press “thumbs up” or “thumbs down” to indicate if they would like to match with their volunteer/participant. If the user presses thumbs up, the person they liked enters the potential match list. If the user dislikes the person, they will no longer appear in the matches page. As per previous prototype, users are able to set up profiles with details including their gender, age, program, fitness goals, favourite activities, and any additional interests.
Requirement: Volunteers need to be able to sign up and be contacted so that they can complete training and participate.
As in the previous prototype, users may sign up for FitConnect as a volunteer or participant in the sign up form. If the user signs up as a volunteer, UVHS staff will contact them through the app and set up an appointment to make sure they are a good fit for the program. In the previous prototype, scheduling was left to email. However, the latest prototype provides coordination in the app instead, which improves the simplicity of the process. Making the prototype more accessible will in turn help boost participation in the program.
Requirement: Volunteers need to know how to to appropriately help participants.
Volunteers are able to view a participant’s gender, age, program, fitness goals, favourite activities, and interests, as per the previous prototype. This allows volunteers to find users they believe they can help the most, and whose goals align best with theirs. Volunteers are given chat functionality once a match occurs, allowing for them to further enquire as to the user’s goals and how to best help them. Volunteers need to complete training on signup, which is done by the UVHS staff setting up appointments with the volunteers. Once training is complete, the volunteer receives an email that confirms their account is active. The volunteer is then able to start matching with the participants. This functionality is the same as the previous prototypes, however, only the volunteer’s ability to match and see other users is limited, rather than their ability to login.
Requirement: UVHS staff need to be able to see new volunteer applications and set up screening appointments.
The admins see a list of pending applicants and can message them and manage their application. They are organized into volunteer and participant tabs, like the previous prototype. The UVHS staff are able to set up appointments by pressing "manage" on a user and selecting the "schedule appointment" button. The admin is then able to schedule a date for the meeting. The user will be notified of the meeting date by email, like the previous prototype, but also will see it in the app. This allows the staff to set up and coordinate applications and screening appointments, and allows volunteers to better track their appointments and communicate their availability.
Requirement: UVHS staff need to be able to register new volunteers once they have successfully completed training.
Like the previous prototype, the app allows the admins to approve the registration of pending applicants. This is done by pressing an "approve" button. After meetings with volunteers and them completing training, admins can approve volunteers. This restriction isn't enforced by the app so that admins have manual control. The UVHS staff will be able to remove users they feel violate the rules or won't be appropriate for the program. They will be able to view report history of a user, message users and schedule appointments with them by pressing the "manage" button.
Requirement: CARSA needs to give out passes to volunteers and participants.
The app provides admins with the ability to chat with users and figure out their intentions not only through the app’s chat feature, but through booking an appointment with the app. The UVHS staff is responsible for filtering candidates and then contacting CARSA to provide volunteers and participants with passes. These passes are given out in person, and thus an appointment must be made. This was facilitated in previous designs as well as the current design.