KnightLife
An app designed for UCF students to discover and attend events happening within their communities.
About the Project
KnightLife, a collaborative endeavor, was brought to life by a dedicated team of five members. The primary goal of this application is to serve as a comprehensive information hub for the UCF community, providing updates on events and involvement opportunities. KnightLife aims to facilitate connections within the community, offering a springboard for interaction. It empowers students to discover and engage with new communities, while simultaneously providing a robust platform for event hosts to promote their activities.
The project’s lifecycle spanned eight months and was strategically divided into two distinct phases, each lasting four months. The initial phase was dedicated to design, followed by a development phase. On this page, you can delve into our meticulous design process.
Duration: Design Phase - 4 months, Develop Phase - 4 months
My role: Product Manager
Design Methods:
Tools: Figma, Google Docs, Unsplash
Table of Contents
Overview
Our Goal
KnightLife’s main objection is to connect students and faculty members with a platform to find and post about UCF events. This social media app will allow users to discover and stay up to date with events, organize their schedule, follow friends, clubs, and school organizations, and promote events they are organizing.
Industry Analysis
There are currently no event social media platforms tailored specifically to UCF students in the market. However, there are similar products which we are able to pull inspiration from. UCF does provide an events page that displays all events for the year. Unfortunately, not many students are aware of this page and do not use it to their advantage. Creating an app specifically for finding events will create more awareness and be a more engaging product for young college students. Other examples include Zupp and Eventbrite. Both display coupons for users to use in their area, in regards to events and deals. It does not display UCF-specific events, but just general events happening in Orlando.
Target Users
Our users of this app include UCF students, faculty, alumni and local businesses. All users will have access to either viewing or creating events, depending on their account type.
Account Types
Our app will have two account types: personal accounts and creator accounts. Personal accounts are for users looking to attend events and will be owned by an individual person. Creator accounts will have the ability to create events and are intended to be for clubs and organizations. Due to their diverse functionality, Creator accounts and Personal accounts are designed to have different User Interfaces.
Personas & Use Cases
We created four fictional characters, the project’s official personas, that represent different users within our target audience. Their purpose is to help us remember who we’re designing for.
Click any persona to view their full profile.
Use Cases
To better understand the systems that will need to be in place for our planned features, we have constructed sample narratives for each specific use case, starring one of our personas.
Here are a few of our use cases:
Testing plan
General Objective
To ensure usability, we will conduct some tests with our target users to get early feedback. Specifically, we want to have researched evidence that the product will offer users:
-
A comprehensive mental model of an event-based social platform,
-
An intuitive solution for finding, saving, scheduling and getting involved in UCF events, and
-
An accessible experience for any UCF student or faculty member.
Each phase of testing will be aimed at deconstructing any problems, concerns, or feedback to optimize our solution to accomplishing these goals.
Phase 1: Survey
Test Tasks
Each participant will complete each of the following tasks and rate the level of difficulty for that task:
-
Create an account.
-
Create a profile.
-
Follow a creator account.
-
Save an event to your calendar.
-
Find and open the next upcoming event happening in your calendar.
-
Unsave an event from your calendar.
-
Post on a saved event.
-
Create an event creator account.
-
Switch to your event creator account.
-
Create an event.
-
Change the time of the event you created.
-
Change the color theme of the app.
At the end of the survey, each participant will also answer two free-response questions:
-
Provide any additional comments you wish to share. What did you get stuck on? What was something you liked? Something you disliked?
-
(Optional) Are you willing to be contacted for further testing? If yes, please provide your name and email below.
Responsibilities
Each team member will recruit six or more participants that are willing to fill out the online survey. Each team member will be responsible for ensuring that at least six of their surveys are filled out successfully completely, and are recorded.
Location
These surveys will be filled out remotely by participants.
Procedure
The team member must complete the following steps for each participant:
-
Inform the participant that they will be attempting to complete a set of tasks on the high-fidelity prototype of our app and that they will be rating each task on a scale of 1 to 5 (1 being the hardest, 5 the easiest). At the end of the survey, they will be asked to answer one short free response question and will be given the choice to opt-in to be contacted for further testing at a later date.
-
Send out the following survey and prototype links for fulfillment.
-
Ask that the participant notifies the team member upon completion.
-
Ensure that the participant’s responses were recorded.
-
Thank the participant for their time in completing the survey.
Phase 2: Think-out-loud Protocol
Test Objectives
The objective of this test is to hone in on the tasks that participants found most difficult from the last phase by analyzing the user’s reactions and thought process as they complete the task. In this phase, we may test new solutions based on information gleaned from the previous phase, or we may further test an area without any adjustments from the previous phase so that we can better understand the issue.
Participants
We will survey at least five participants. These may be family members, friends, professors, or any other student or faculty member who is an affiliate of UCF. They should not be participants from the previous phase. Preferably one of these users should be a faculty member.
Equipment
Each team member must have the following equipment to properly conduct their think-aloud protocol:
-
A device that can run the prototype and screen-record the user’s actions.
-
A camera to record the user’s expressions and voice as they interact with the prototype.
Test Tasks
The tasks completed in this phase will be dependent on the results from the previous phase. We will select the top five tasks that participants struggled with the most, on average. One task will be assigned randomly to each participant, so that all tasks are addressed.
Responsibilities
Each team member will recruit at least one participant and conduct the think-aloud protocol. The team member will be responsible for communicating with their participant, scheduling the test, and ensuring participant authorization for recording and transcribing for testing purposes. Additionally, the team member will be held accountable for recording both the screen and the participant, as well as editing, transcribing and taking notes on the video later.
Location
Each protocol may be done either in-person or remotely, at the discretion of the team member conducting it, as long as all requirements are met.
Procedure
After recruiting all participants, we will assign each participant one task to complete. The team member who recruited them will complete the think-aloud protocol with them.
Before beginning the protocol, the team member should take the time to thoughtfully set up the environment. The camera should be set up so that the video is not shaky and so that there is decent lighting to read the participant’s expression and body language (chest and up). The prototype and screen recording software should be up and ready to go.
If it helps, the team member may choose to take notes while conducting the protocol meeting, but it is not required.
The team member must complete the following steps with their participant:
-
Remind the participant to verbally describe what they are doing and what they are expecting from each action. If needed, give them an example by running through another app or website. Remind them also that we cannot help them while they try to complete the task, and to declare when they feel they have completed the task.
-
Turn on the camera.
-
Inform the participant that they will be recorded, and reaffirm on the record that they are aware and agree to it.
-
Give the user their task and begin screen recording. Verbally declare when starting the screen recording (i.e. “Starting the screen recording now.”), so that the video can be synced later.
-
Allow the user to complete the task in as much time as needed, until they have verbally confirmed that they have completed the task (even if they had not completed it the way we intended).
-
End the recording and thank the participant for their time.
After recording the protocol meeting, the team member should also edit together the videos and take notes as agreed by the team.
Visual Design Guide
Color palette
-
Foreground: Dark Gray: #222222 – A color that is great for contrasting the off-white background color, used for text, borders, and other foreground features. It is used for main texts and the navigation bar to contrast with the Dark Yellow (#FFC60A (Gold/Dark Yellow). The dark yellow is a slight difference from the University of Central Florida’s gold hex code found in their style guide. The design is affiliated with the UCF Community, and it must have gold accents.
-
Background: #FFFFFF (White) - Provides a clean background that has a high contrast with the foreground color of black
-
Accents: #080808(Black), #FFC60A (Gold/Dark Yellow), these accent colors are for text, button fills and strokes. The dark yellow goes onto the white background, and causes for a low contrast.
-
Additional Colors:
-
Gray: #D4D3D3 - For subtle text and background elements.
-
Yellow: #FFE17E - A lighter tint to the gold, this will go on any accent features that need to contrast the darker yellow, such as the search bar and calendar feature.
-
Old Lace: #FDF5E6 - For dividing sections, and buttons that have been pressed to differentiate from other pressable buttons.
-
Typography
-
Header Font: "Prompt (Bold)" - open-source typeface designed for use in various digital applications, including web design, app interfaces, and documents. It is known for its clean, modern, and highly readable design.
-
Subheading Font: “IBM Plex Sans (Regular)” - A sans-serif typeface, making it clean and easy to read. The design choice for this was so that the subheadings stand out from the main headers and the paragraph fonts.
-
Body Font: "IBM Plex Sans (Medium)" - A clean, easy-to-read sans-serif font for content.
Button Design
-
Primary Buttons: Rounded edges, filled in (#FFC60A), IBM Plex Sans (Medium), black colored text (#080808)
-
Secondary Buttons: Rounded edges, filled in (#080808), IBM Plex Sans (Medium), white colored text (#FFFFFF). Rounded edges, filled in (#D4D3D3). IBM Plex Sans (Medium), black font (#080808).
-
Ghost Buttons: Rounded edges, filled in (#FDF5E6) IBM Plex Sans (Medium), black font color, and stroke (#FFC60A).
Accessibility & Responsiveness
-
Ensure that the color contrast is accessible to all users, however, the dark yellow buttons and the white background have a low contrast ratio. There is an added drop shadow to these buttons that add some contrast. Although this may cause some accessibility issues, we have made sure that all readable text has a high contrast ratio.
-
From the settings page, there will be an accessibility section with the accessibility features, such as light/dark mode, and font size options.
-
The app is to be responsive for various screen sizes and orientations.
Style Guide
WireFrame / Lofi-Prototype
This is a rough blueprint of the layout, information, functions, and flow of our app. Explore the low-fidelity prototype flow of our wireframe. Creator account wireframe may be accessed through the sign-up process.
Personal Account Wireframe
Creator Account Wireframe
Hi-fi prototype
Interact with the high-fidelity prototype flow of our wireframe. Creator Account UI can be accessed through the sign-up process.
