HIGH-FIDELITY MOCK-UP

For our high-fidelity mock-ups we focused on designing the main homepages for the three side tabs of our application. Our overall focus was to create a clean and easy layout for mentors to be able to view progress and updates without clicking through multiple pages.

 

Starting with the overview page we created progress bars at the top of the page so the mentor can easily view the progress of the mentee’s goals and tasks. Here we used green to designate completed tasks and yellow to designate any troubled or overdue tasks. Moving down the page we created a timeline to show the span of the mentorship program. Since our original timeline was confusing and had limited space for labels, we decided to create a scrollable timeline that gives more detail to the mentor. The mentor will be able to view goals and tasks that are due around the current date, and will be able to use the scroll bar to check past and future assignments as well. Lastly, since we received a lot of feedback to be able to check past notifications, we implemented a recent activity section. Under this section the mentor will be able to view any updates of the mentors activity, messages, check-ins of emotional response, and any other important updates.

 

With the goals/tasks page we wanted to create a simple layout to view the goals and tasks and their corresponding completion status. With this in mind, we listed the Goals and tasks with their title so the mentor can view all the assignments assigned to the mentee. Each goal and task is clickable which expands to a more detailed description of the task or goal. The mentor will be able to the title, view due dates, reasoning behind the assignment, and a description of the assignment. Next to each task we also put the completion status of the task with the same color designation as the overview page. Since we received feedback to be able to view the mentee’s check-in, we placed a speech bubble next to each task that has had responses submitted by the mentee and mentor. On this page we also added buttons to add tasks, add goals, and editing capability of current goals and tasks.

 

For the communication page we wanted an easy way for the mentor and mentee to communicate with one another to coordinate meeting times and other information related to the mentorship program. Here, we have instant messaging, voice call, video call, and file upload capabilities. On the right side panel we've incorporated a calendar to be able to view meeting dates and set future meeting dates. Below this, we have a shared files section where the mentor or mentee can upload meeting notes and other important files to be able to view in between meeting times. This will help the mentor remember any information they may have forgotten in between meetings, refreshing them for their next meeting.