Howdy Rev! Rev Tracker

Website: hero with 3D model and download buttons
Website: introduction with glassmorphic frames and cycling text
Mobile: log in page
Mobile: camera capture page with intuitive UI, ability to easily take photos on the fly
Mobile: ability to select from photo album to upload to app, custom UI buttons
Mobile: uploading photos to the community, ability to add caption and rate photos.
Mobile: personal collection of user's own posts, keeping track of past experiences
Mobile: photo feed with community submitted posts and ratings, ability to review posts
Mobile: integrated maps tracking page, using photo and location data to display Reveille's path

Description

Howdy Rev! Rev Tracker is a comprehensive and fun A&M mascot activity feed for mobile devices! Users can easily share photos of Reveille with the A&M community, and keep track of where she is in order to interact with the beloved mascot more. The mobile app allows students to share unique experiences, engage with the community, and celebrate A&M tradition! The mobile app is supported by a website that seeks to generate awareness for the app and provide a centralized space for the community and various helpful resources, and utilizes Notion databases to efficiently store and access data from community and personal posts using Notion's API.

Inspiration

We were inspired by highly popular photo-sharing apps such as Locket and BeReal, mobile apps with simple and effective UI/UX that allows users to easily take and share photos in unique ways. We integrated this design philosophy into our mobile app through easy to understand UI layouts, welcoming color palettes, and the ability to instantly take a photo on the fly to ensure that users don't miss out on crucial moments when Reveille is seen!

Problem Statement

Many students at Texas A&M are thrill to hear of the school's amazing mascot Reveille, but often have very little chances to meet her in person. This app seeks to solve this problem with a highly effective and engaging app that allows the community to share photos of Reveille and attach location information. This not only increases the amount of Reveille photos that can be enjoyed by Texas A&M students, but also encourages the student body to interact and be more active on-campus, as well as increase chances of spotting Reveille through the dynamically updating map component, which uses the information from photos and location data to update Reveille's path through campus. Finally, Notion is intended to be fully integrated into our project, using its API to easily and efficiently store data from community and personal posts to Notion databases.

Accomplishments that we're proud of

Fully functional MVPs for both the website and mobile app: website deployed with Vercel, mobile app functionality integrated using Figma prototyping.
Clean, responsive and welcoming UI layouts and style: glassmorphism, soft pastel colors with subtle but noticeable A&M identity.
Unparalleled mobile app UX: well-thought-out page flows, smart transitions between pages, ease of use and intuitive navigation.

UI/UX Design Principles

Style - Glassmorphism with pastel colors of red/maroon, pink, and cream. Color palette ratio following the 60-30-10 rule for UI design.

Explanation - We decided upon a glassmorphic UI style with soft pastel colors to convey how the mobile app is a comforting experience that seeks to bring joy and relaxation to its users. This is supported by using clear frames with rounded edges and soft inner shadows. The palette is applied to the mobile app and website using the 60-30-10 rule to determine how much of each color (primary, secondary, accent) takes up the page. This ensures the UI's color scheme feels balanced and harmonious, improving overall experience. Additionally, the buttons and many interactive components on the mobile app were designed with soft drop shadows and subtly colored inner shadows in order to present them as slightly 3 dimensional without compromising accessibility, in order to appear less harsh and make the UX feel tactile and responsive.