FinishLine Mobile

Overview

FinishLine Mobile is an adapted version of FinishLine Desktop that allows members to use it on the go, especially at events such as test days and during competition. This initiative aims to make FinishLine more compatible to Mobile so that members can easily view the Home, Calendar, Finance, Statistics, Gantt Chart, and Projects pages in an adapted version that is clear and easy to use.

Stakeholders

Product Stakeholder: @naishahmistry, @risahilinski, @Diykum573
Software Stakeholder: Sean Walker, Chris Pyle
Reference Users: Matthew Clarke, Kevin Giordano, Ally Kolesar, Abby Speckhals

User Story

1. As an engineer, I want to engage with project-specific and general Gantt Chart views so that I can follow and update timelines on the go.
2. As a lead/head, I want to be able to see the change requests so that I can quickly review and approve them
3. As a member of the finance team, I want to be able to access the budget so that I am made aware of any changes and can review them in real time.
4. As a user in any role, I want to be able to access my project pages, review project spending, and review task and work package statuses at any time.
5. As a user in any role, I want to be able to submit and view the status of my reimbursement requests so that I can easily follow up on them and expedite the reimbursement process.
6. As a user in any role, I want to see the calendar on my phone so that I can easily access the schedule for all my meetings, design reviews, and bay times.

Success Metrics

The success of the FinishLine Mobile edits will be evident when the team can effectively use FinishLine on Mobile devices to further incorporate FinishLine into all members' workflows. This includes reviewing tasks and change requests, viewing the calendar and their events, seeing updates to the budget, and quickly making reimbursement requests.

Rollout Plan

This feature is projected to complete the design process by Dec. 20, 2025, and will be released to the development team in January 2025. The Heads and E-Board will be asked to test this feature in May 2026. This feature is expected to be fully adopted by June 2025 (by FHE/FSAE competitions).

Out of Scope

The retrospective was out of scope due to the various overlapping timelines that would be very condensed on mobile. The Admin Tools were also out of scope since they contain complex tools that would be difficult to condense onto a mobile screen and are not used frequently.

Background / Context

While FinishLine is compatible with mobile, many pages have complex formatting that makes the information on the page difficult to understand and the features inconvenient to interact with. Some issues include unnecessary line breaks, excessive scrolling to view all the information, and the inability to scroll horizontally, which results in the need to rotate the phone to view information.

To resolve these issues, we did an audit of all the pages on a mobile device to determine which pages would need minor edits and which would need a full redesign. We primarily focused on the Home, Projects, Gantt Chart, Finance, and Calendar pages, as well as supporting pages like Change Requests and Statistics.

This will provide significant value to the team because many minor tasks would be ideally addressed as they are done/on the go, such as checking what tasks, change requests, or reimbursements are pending/completed and getting an overview of what meetings a member has in a week. This will help streamline workflows since it will allow for easy connection/transition with Slack on mobile and reduce dependence on completing tasks until members have desktop/laptop access. This will also simplify processes during competition, as all information relevant to the competition will be accessible on mobile to share with other members and judges. From a product design and development perspective, this will also bridge past and future designs, as we have Guest Mode available on mobile, while all member-specific features are only functional on desktop. Features that are currently in the planning or design stages are also better suited for mobile (ex. Operations Dashboard), and having a pre-existing Mobile version of FinishLine for members will allow us to seamlessly integrate new mobile-specific features into FinishLine.

Acceptance Criteria & Mock-ups

Sidebar

Sidebar should occupy the full screen when opened.

Home Screens

Member View

• The bar at the top consists of buttons that the user can click through to see information on their tasks, work packages, announcements, and updates. The page should always default to "Tasks", and the selected tab should have its button highlighted in bright red.
• Tasks should be sorted by priority first, then by number of days overdue/days left.
• Clicking on any task, work package, or notification cards will take them to the main page for that task, the work package home page, or the work package/event/task associated with the notification.
• Clicking on the hyperlinked text after "Blockers:" on the Work Package cards should take the user to the home page of the blocking work package.
• The Updates button should always be highlighted in a dark red and contain the number of unseen notifications in parentheses. If there are no unseen notifications, then it should be greyed out like all other buttons.
• The "Previous Updates" section should only show seen updates from the past month.

Heads/Leads View

• Clicking "Confirm Availability" will take the user to the When2Meet-style page noted in the Calendar section.
• Clicking on the card for a Change Request will take them to the page for the corresponding Change Request.
• Features mentioned in the "Members" view still apply.

Admin View

• All screens that do not have any information to display should follow the design in the fourth mockup, but the text should correspond with the data that is not displayed/display what is expected on FinishLine Desktop.
• All features from "Member" and "Heads/Leads" views still apply.

Projects

Projects Landing Page

When a user clicks on "Projects" from the sidebar, they will be taken to the following screen.

• Only the "All" section will contain the search bar and filter. "My Favorites", "My Team", and "I'm Leading" (corresponds to "Projects I'm Leading" on Desktop) will follow the design in the first mockup.
• Clicking on the bar for an active work package will direct users to that work package's home page.
• Clicking anywhere else on the card will direct users to that project's home page.

Clicking on the plus icon in the top right corner will launch the following pop-up from the bottom of the screen.

• Note: This form should be scrollable in case the user adds multiple links on the "New Project Screen" pop-up.
• As the user adds work packages, the title of the pop-up (ex. "Work Package # 1") should also update.
• "Project Lead", "Project Manager", and "Change Request ID" should be searchable dropdowns (can type into the field and will provide a dropdown of matching results to select from).
• Calendar/Date fields should be displayed as the same calendar when creating a new graph (displayed in Statistics Section).

Overview

• Clicking on the three dots in the top right corner brings up this pop up. It functions the same as the action button on desktop projects page.
• Note: This will be on all project subpages

• When switching between subpages, clicking on the red underlined page brings up the drop down showing options of other sub pages.
• Note: Each subpage will have this drop down.

Tasks

BOM

• Clicking on one of the items in the list shows the modal which is a more detailed preview.

Scope

Changes

Gantt

Clicking on the "Gantt" tab from the dropdown will direct users to the screen below. The default view will show two months - one month before and after today. The remainder of the page will have the same functionality and designs outlined in the Gantt Chart section.

Change Requests

Parts Review

When users select "Parts Review" from the dropdown, they should be taken to the first screen below. All sections besides "All" will follow the design in the first mockup (cards do not show a preview of the CAD file).

• Note: The buttons in the header may vary based on user, as leadership and other roles will have different categories to filter the parts by than general members. If the category titles do not fit in one line, the row with the buttons should be horizontally scrollable.

Users will be able to view and review submissions on the Mobile version of Parts Review. They will not be able to add new parts. When users click on a card from the previous screen, they will be taken to the screen below to view all the submissions. They can click on the actions button to access tools to review, approve, and edit the submission.

• Note: All of the content on this screen is not expected to fit immediately on a mobile view and should be vertically scrollable. By default, the "History" section should be collapsed.

When users select "Review" from the Actions Menu, they will be taken to the following screen.

• If the user uploads a file as a part of their review (third icon in the horizontal bar above the file), then the user should receive a confirmation banner/notification that their file was successfully uploaded.
• The user should be able to zoom in/out in the file.

Work Packages

The Overview, Scope, Changes, and Change Requests pages on all Work Packages should follow the designs for their corresponding pages at the Project level.

Gantt Chart

When the user clicks on "Gantt" on the Sidebar, they will be taken to the following screen. The timeline should default to a two-month view with today's date being centered (surrounded by one month before and after today). This example does not show the blue line that runs down today's date, but please refer to the Gantt Chart section under Projects for a reference.

• Project-level dropdowns will have the same style and functionality as on mobile. Please refer to the Gantt Chart section under Projects to reference designs for Work Packages and Tasks that would appear under the dropdown.
• Users can slide across the timeline using one finger. Users can customize the sizing of the timeline by using a pinching motion to zoom in/out (zoom in will show more weeks/months on the screen at once, zoom in will stretch the weeks out). This is meant to help users be able to more clearly view smaller work packages or tasks on the Gantt Chart.

Clicking on the Filter icon will launch the following pop-up.

• Note: The Teams options will be customized based on the selected division to avoid overcrowding the pop-up.

Clicking on a Project bar will launch the following pop-up. The "See More" button will take the user to the Overview page of that project.

Clicking on a Work Package bar will launch the following pop-up. The "See More" button will take the user to the Overview page of that work package.

Clicking on a Task bar will launch the following pop-up. The "See More" button will redirect the user to the "Tasks" page under that project with the pop-up for that task already launched.

Calendar

• This is the default view. You can scroll up and down to see past and future days.
• There is a filter at the top that allows you to see only your events, rather than club-wide events

• Clicking on an event shows this preview.
• Editing the event is the same view as adding a new event with all the fields filled out.

• On the default view, there is a backlink that brings the viewer to the month view.
• If you click on a specific day it brings you back to the daily view.

• When you click on the new event button, you will get this screen that allows you to add a new event.

• Changing the event drop down will change the available fields when scheduling an event.

• This demonstrates the fields for a manufacturing event. All of the types of events are consistent with the new calendar design.

Finance

When the user clicks on a specific Finance choice in the sidebar, they will be taken to these following pages.

The first is the Balance page. It is possible to view their team's total budget broken down by approval status (pending leadership, pending finance, submitted to SABO, reimbursed, and available). They filter by subteam (Mechanical, Electrical, Software, Business), date range, and account code. The donut bar and the account code list below shows per-line balances with +/– controls to create change requests that reallocate funds between accounts. A dropdown lets them toggle between "Total," "Budget," and "Cash" views.

The next is Spending and Allocation, which is the detailed spending view organized by project area (e.g., Aerodynamics, Mechanical PowerTrain, Simulation). Each project area gets its own donut chart showing how money is distributed across sub-categories (Underbody, Bodywork, Motor Cooling, etc.). Clicking into a sub-category drills down further, swapping the chart to show that sub-category's spend by approval stage (Leadership, Finance, SABO, Reimbursed, Available) — which is demonstrated by different set of colors.

The next is reimbursement request - Users see their own submitted requests ("My Requests") or all team requests ("All Requests"), each showing the RR number, who submitted it, who it's assigned to, the SABO ID, dollar amount, date, and a color-coded status badge (Reimbursed, Pending Finance, Pending Leadership, Submitted, Denied).

This is the pop to create reimbursement requests that will pop-up once you click the plus sign. Projects and categories are being combined into one to save space but if not possible, then please keep them side by side.

Vendors and Sponsors:

Add button used to add sponsors and vendors - leads to pop-up modules below. In vendors, you can see different rankings accordingly on side. Make smaller if possible.

To add Sponsors/Vendors and also to update tasks:

The tasks page and the second page of adding sponsors should both be scrollable for easy use.

Change Requests

When the user clicks on "Change Requests" on the sidebar, they will be taken to the following landing page.

• Note: All tabs will follow the same design. "To Review" corresponds to "Change Requests To Review", "Un-Reviewed" corresponds to "My Un-Reviewed Change Requests" , and "Approved" corresponds to "My Approved Change Requests" on Desktop.

Clicking on the Filter icon will launch the following pop-up.

• If no checkboxes are selected under "Time Range", then the screen will display all change requests that have a Date Submitted, Date Reviewed, or Date Implemented value in that time range. If only one or multiple of the checkboxes are selected, then it will only show Change Requests that have the corresponding value in the given time range.
• Individual dates can be selected by having the same Start and End date or only entering the Start Date.
• The "Custom Selections" field will filter the change requests based on the columns that are available in the Desktop Filter that are not explicity listed in the remainder of the filter popup (ex. ID, Submitter, Reviewer, etc). The "Custom Selections" section can be used in the same manner as the Desktop Filter.

Clicking on the plus icon in the top right corner will launch the following pop-up from the bottom of the screen to create a new Change Request.

All Open Change Requests will be displayed using the following design. Clicking on "Add Proposed Solution" will launch the "Proposed Solution" pop-up above. Once the new proposed solution(s) are submitted, they will be directly displayed on this screen. The three dots in the top right corner will act the same as the "Actions" dropdown on Desktop and will give users the option to review or delete the request. If they user wants to delete the request, they should be presented with a confirmation message.

All Accepted Change Requests will be displayed using the following design.

All Implemented Issues, Other, and Definition Change Requests will be displayed using the following design. Implemented Stage Gate Change Requests should only have WBS, Submitter, Review Notes, and Implemented Changes under "Details" and will not have a "Proposed Changes" section. The three dots at the top of the screen should provide the options under the "Implement Change Request" dropdown on Desktop.

• Note: This is not expected to fit on one screen without scrolling. The expectation is that if there are multiple proposed changes, the user will likely have to scroll down to see all changes.
• Under Proposed Changes, all previous/old content will be highlighted in red. All proposed changes that have been implemented will be highlighted in Green directly under the previous content.

All Implemented Activation Change Requests will be displayed using the following design.

Statistics

Clicking on "Statistics" on the sidebar should take the user to the following page, which contains a list of cards for each graph collection. Clicking on the plus icon in the top right corner will open a mobile-adjusted version of the pop-up used to create a Graph Collection.

.

Clicking into a Graph Collection Card will take the user to the following page.

• Clicking on a bar/point/section in any graph on this page will launch the same pop-up that you get when you hover over a bar on FinishLine Desktop, but it will be scaled to fit the mobile screen and contain an "x" icon in the top right corner to close it. Clicking on another bar/point/section can also close the existing pop-up.
• Clicking on the pencil icon for a graph will open a filled out version of the "Add Graph" modal below, but with the title "Update Graph".
• Clicking on the trash icon for a graph will launch a confirmation pop-up.

The "Edit Collection" (pencil icon in the top right corner) button will launch the following modal.

The "Add Graph" button (plus icon in top right corner) will launch the following modal.

Teams

• Note: The Budget section contain the same pie charts as those on the Finance - Budget screens. They will support the same interaction (clicking on the project's segment on the chart or the project name on the legend will show the Reimbursement breakdown pie chart for that given project).

No source files, tests, or entry points are identified. Begin by reviewing the existing FinishLine Desktop pages and the mobile mock-ups, then map the requested Home, Projects, Gantt, Finance, Calendar, Change Requests, Statistics, and reimbursement behavior to the code. Done means the in-scope member, lead, and admin flows work on mobile as described by the acceptance criteria.