Embedded Files
Through user contextual inquiry and research, we were able to make refinements that incorporated feedback and criticisms from our user testing session. We made design changes to the font, layout. sizing of text, visual hierarchy as well as system changes like a messaging center and having more functions!
Prompts of Testing Session
Prompts of Testing Session
Here are some of the prompts that guided the user testing sessions and provided us with feedback that we applied throughout the Hi- Fi prototype of our application.
During the testing session
Asking users to try to sign in to the app
Ask the user to modify their profile picture and bio
Check to see the date in which they do have a meeting
Ask the user to create an event on their calendar
Ask them to use the forum and tell us what they think the purpose of it is
What information is contained in the forum?
Ask user to swipe between the different pages
Ask the user to try pressing the buttons on each page
Ask the user if the layout feels natural to navigate?
Ask the user their opinion on the features themselves. Are they useful/make sense?
Ask the user to connect with other users for a meeting
Ask the user to create a weekly schedule.
Ask the user to log out
After testing session
Do you believe this functionality is necessary and/or desirable?
If you could change the functionality, how would you improve the design?
If you had to use this app for 30 minutes a day everyday, would you consider it a work or a hobby?
Would you recommend this app to others?
What functionality are you unclear about?
Do you believe that you can improve your time management skills with this app?
Refinements to the Prototype
Home Page
Original home (Figure 1)
Updated home (Figure 2)
With all buttons lookin the same throughout the app, we realized that this left pages not distinctive enough. The original home page also wasnt accessible according to WAG accesibility guidelines who have difficulty reading text. As a solution, we offered a layout that matched other screens within the application to maintain a consistent theme of shapes, buttons, fonts, and text throughout. We added icons to the refined home page functions, as shown in Figure 2, to remain inclusive of all users which additionally aided the the overall design.
Profile Page
Original Lofi (Figure 3)
Original Hi fi (Figure 4)
Updated Hi fi (Figure 5)
Through user interview, we were able to continuously update and refine the Profile page. The original lo-fi prototype(as shown in in Figure 3) allows users to locate all their saved matches. After user testing, we realized the importance of testing because we realized the location of matches was difficult to find, resultantly decreasing our usability. User testing provided us with new feedback to incorporate spaces within the profile that guides users with teh ability to describe themselves with key information which students need to know about their peer to find a suitable match. This included schedules, work ethics, and outside obligations. We also agreed that the messages were to be placed on the screen so the users can essentially locate everything about a peer from their profile page. The interviewee's also gave us suggestions on how to make this app better by providing an "Edit" feature so the user can make changes to their profile.
Lo-fi Calendar (Figure 6)
Refined Calendar (Figure 7)
During our user testing, one of the prompts tasked users to tell us which date has been selected according to the calendar screen (fig. 6). We were able to see that it took some time for the interviewee to find the date "4/7/2021". When asking where they were able to locate the date selected, they referred to "Selected Date" found directly under the calendar. Through inquiry, we realized that the calender did not serve its purpose which was to highlight the selected date with a color or shape. So we refined this in our hi-fi prototype (fig.7) so the selected date of the 7th has a different color. Additionally we refined the sized of text and overall cohesivness of sizing and organization. We then added alt text to refer to the names of colors to promote inclusivity of all users. We also removed the red color under the level of importance to avoid confusion with the colors of the overall app theme of red and white. Originaly (as seen in fig. 6), red signified "Must be early," however we found that this would contradict the listed start time of meetings.
Schedule
Lofi Schedule (Figure 8)
Hi-Fi Schedule (Figure 9)
Keeping in mind our theme and consistency throughout. We created groupings of information on these squares with options on them. We decided to organize the schedule page to promote productivity and usability as well as accesbility. The Lofi Schedule included small text making it difficult to read consequently decrease the level of joy users could feel. We redesigned keeping in mind visual hierarchy by grouping current events at the top (as shown in Fig 9). And up coming events center of the screen. One of the major changes to the information on the screen was removing the event details to a seperate screen( as shown down below). The grouping of information allows for more interactivity with the app since users can now swipe right to located other events. The Hi-Fi prototype also allows users to edit an event ny removing it from their schedule using the "Edit" feature at the top right of each section.
Event Details Page
Moving the page to a seperate events page while maining the consitincy of colors made this page extremely distinctive. Users are able to see the event and the top under "Event Details." They are also able to physically see who the event is hotes by with pictures. We decided to provide public profile pictures of the users to provide a sence of community and a safe environment where users will be familiar with the event hosts prior to meeting them. We beleive this feature distinguishes itself from other applications because it de-formalizes the process for students. As college students we do have a barrier where it comes to remote learning and the barriers that technology has where you dont need to see the teacher to learn. We chose to apply pictures to promote an environment where we challenge those barriers. Additionally, the selction of a level of importance features have changes so its clear that a color is selected by outlining the button with a color, and changing the color of the text to match the button. The layout before(as shown in fig 9) was outdated and we found that it was extremely hard to read during our user testing sessions due to the varying font sizes. We solved this by maining a contrasts with the background and text colors.
Hi-Fi Events page (Figure 10)
Help page
Lo-fi Help page (Figure 11)
Hi -Fi Help page (Figure 12)
Hi fi Help page 2 (figure 13)
After feedback and through testing we determined that our Help page (Fig.11) had too many buttons that were quite similar to the setting page. We removed most of them to keep the ones that were important to have on a page where new users need guidance or aid. Figure 12 is the updated protoype to include Common FAQ, customer support, and an About section where the team behind the app could explain the app, its mission, and team. We added an option in figure 13 for users to be able to see what common FAQ looks like prior to clicking the button to read through them all.
Settings
Lo-fi Settings (Figure 13)
Hi-Fi settings (Figure 14)
The lo-fi setting (fig 13) included too many options for users that were overwhelming to read. Through user testing we also found that it was taking longer to complete a task because it required alot more reading. In the Hi-Fi (fig 14) we chose to maintain primary locations of our application in the event that users might need to change or aid with such as their account, notifications, Calender, Schedule, and Forum
Add Event Page
Lofi (Figure 15)
Hi-fi Add Event page (Figure 16)
To promote usability, we wanted to ensure that users were able to add an event without any challenges and barriers. in figure 15, our lo-fi allowed users to add the duration of the event as well as the event prioirity level. We deemed this an unnecessary barrier to adding an event because the goal is to have them select the event they want from the forum and add it to their schedule which will then show up in their event details page (as seen in figure 10). In this way, we simplified the events page to speed up the process as well as increased the font for visibility and consistency.
New Additions to Final Prototype
New Additions to Final Prototype
Inbox and Messaging
Inbox (Figure 17)
Text Box (Figure 18)
Our lofi prototype did not offer a space where students could communicate with each other. As a team, we found that this would be challenging and provide an unnecesary barrier to students who need to determine a suitable match. The goal of this application is to provide a way in which we can promote time management and productivity from the aid of peers. We found that being able to connect with peers in one location would save the time and hastle for students to locate peers on another application. This feature aligns with our mission and we agreed this feature is necessary for our audience(students) to have. In the figures above, we present a newly added inbox(fig. 17) and messaging center (fig.19) that allows users to recieve messages and message back.
Student Search
Student search (Figure 19)
Student Profile (Figure 20)
We decided to illustrate what a student search page would look like (as shown in fig. 19). This would provide users the opportunity to locate a match easier by giving them the ability to narrow down their search by class, student, location, or obligations and interests. The information is public to the user which can be seen in detial on the student profile (fig 20.). The profile allows users to see the peers bio, major, year, and obligations. Users will be able to send a connection request to the student by selecting "Send a connection request" button. In our lofi prototype, we did not offer this screen and there was no way to connect users with a suitable match. Using contextual inquiry, we were not able to task users with adding a connection because there was no option to. To resolve this we updated the screens to include the option.
Forum/ Add post page
Forum (Figure 21)
Lo-fi Add post (Figure 22)
Hi- Fi Add post (Figure 23)
Through our prompts within the user testing session, we determined there was no way for the interiewee to add a post to the "forum page" (fig 21). We then redesigned so the button at the top right of the forum page (fig 21) would take them to the "New Post" screen (fig 22). We then updated and made refinements to simplify adding a new post with less requirements, as seen in figure 23. The process went from 5 requirements to 3 to improve time management as well as accelerating the process to match, thus promoting usability.
Other Screens
Other Screens
These screens were refined to maintain consistency of button sizes on each screen and design changes. We included a loading design on the home page as part of branding.
Sign up page
Home page
Log in Page
Full Lo-fi and Hi-fi Prototype (Figma)
Page updated
Google Sites
Report abuse