Inside F&M

Your Guide To Streamlined Camous living

Timeline

  • February - April 2024 (7 Weeks)

My Role

  • Independent UI/UX Class Project

THE PROBLEM

The Inside F&M app fails to be the all-in-one campus tool students need, leaving them constantly switching between platforms for essential resources.

This constraint plus the inesthetic UI is frustrating and discourages more students from adopting the app for daily use.

THE SOLUTION

Enhance functionality and improve visual design!

Centralized Access to Features

  • A single hub for essential campus resources

  • Quickly identify and access what you need

  • Stay organized wth quick navigation to core resources

  • SAVE TIME!!

Stay on Top of Your Classes

Steamlined Dining & Balance Overview

  • Enjoy easy access to dining menus and meal planning

  • Quickly check and manage meal swipes and balances

  • Be empowered to control your dining experience on campus

Stay on Top of Your Classes

  • Instantly view essential course information

  • Hassle-free outreach to professors

  • Prioritize tasks with an at-a-glance view of today’s schedule

  • Get real-time tracking of the campus shuttle

  • Check estimated arrival times and routes

  • Improve your campus travel

OVERVIEW

Project Kickoff

The Inside F&M app, created by Gregory Morford, served as a central hub for Franklin & Marshall student information. However, as its use grew across campus, inefficiencies became evident.

As a frequent user, I shared the frustration of many peers over missing fundamental features like accessing the dining menu, tracking the shuttle, or viewing personal calendars—tasks that required leaving the app.

To address these gaps, I led the end-to-end design process to streamline the app's features, improving usability and making it a true one-stop resource for students.

THE PROCESS

  • Discovery

  • Define

  • Ideate

  • UI Design

  • Validate & Iterate

RESEARCH

Discovery: Start with the user — what are their needs and feelings…?

User Interviews + Feild Study

I chose user interviews to capture the detailed and nuanced experiences of students, giving voice to their individual narratives and challenges.

To deepen this understanding, I conducted a field study—observing students in real-time as they navigated the app. This approach allowed me to ask relevant questions and understand how their pain points emerged naturally, providing actionable insights into their day-to-day interactions with the app.

Define

Students value having an intergrated tool but need need additional features to improve this experience

…frustrated with the apps’ user interface and the lack of essential functions necessary for navigating life at F&M.

Analysis (affinity mapping)

I categorized my data into 3 major clusters that would inform the “How Might We” process.

Theme 1: Enhance Convenience

Theme 2: Minimize Frustration

Theme 3: Optimize Functionality

How might we

“improve Inside F&M to better serves students as the essential convenience tool they need?”

PERSONAS & JOURNEY MAPPING

"Busy Brian" | 21 | Business Major

Junior and Investment Club President

Goals:

  • Organization scheduling and school calendar tracking

  • Efficient campus navigation

  • Quick access to campus essentials

  • A centralized experience

Pain Points:

  • Switching between apps is time-consuming and frustrating

  • No access to meal planning or balance tracking

  • Difficulty finding essential features; some were non-existent

I need a central, intuitive tool that streamlines access to necessary features, minimizing the frustration of navigating between multiple apps and ensuring quick, efficient access to information.

I then created this journey map to analyze the app's user experience across different stages and identify areas for improvement. The goal was to pinpoint friction, frustration, or confusion, and propose solutions like streamlining authentication, simplifying features, and focusing on user-centered design. This ensures the app is intuitive, efficient, and meets user needs.

DESIGN

Ideation

I prioritized features based on research insights, consulting students to ensure user-centered design.

I then used a 3 X 3 impact matrix to prioritize features effectively by evaluating their potential impact against their feasibility.

3 north stars guided me:

  1. Focusing on what matters most

  2. Managing Complexity

  3. Iterative Development

DESIGN

Iteration 1

Using solutions from the ideation workshop, I started to map out the steps that users will take to achieve specific goals within the app.

This first iteration was hard because of three main reasons:

  1. I was treading the line between implementing every user input while maintaining design clarity

  2. I was learning by doing

  3. I was exploring different design apps

Iteration 2

I proceeded to iterate on the design by playing with a deep, mature gradient and Heiti SC font.

Problems

Gradient & Font Issues

  1. Visual Fatigue: Too dark and straining.

  2. Dated Appearance: This does not align with current minimalistic design trends.

  3. Focus Issues: Drew attention away from important content or elements.

  4. Font Style: Too thin

  5. Hierarchy Problems: Feels cluttered or overwhelming.

  6. Accessibility Issues: Non-compliance with WCAG guidelines

Testing and Validation

Major Improvements to my design

1

2

3

4

Home Screen Refinement

Enhanced Campus Map + Shuttle Tracking

  • Added tooltips to provide my user with dynamic and relevant information

  • Introduced shuttle tracking to support students’ navigation

  • Highlight key stops to improve user utility

  • Balanced Color Palette: White Background makes the interface more modern

  • Consistent Branding: Based on user feedback, the light theme and softer typography offer a cohesive experience

Improved Layout

  • Switch to toggle offers a clear and natural flow for users

  • Based on user feedback, tabs, and sections offer a more natural flow

  • Added quick actions panel for faster and more intuitive navigation

Switched to a card layout

  • Originally, information was presented as plain text blocks

  • My user needed a structured and readable design

  • Key information is visually separated for easy scanning

Final Design

The Old vs The New

The old design

The new design

The Style Guide

REFLECTIONS AND LESSONS

What l learned + Growth Areas

This was my first UX Design project and l am incredibly grateful for the experiences and memories made. But, it was more than a technical journey—it was a transformative experience. Here’s what I learned:

  • Design is About More Than Aesthetics

    • I initially saw UX design as a technical process, but I quickly realized it’s a deeply empathetic practice. Understanding the user required me to step into their world, connect with their emotions, and uncover what truly matters to them.

  • Active Listening Transforms Insights

    • Listening is more than hearing; it’s about fully engaging with what users say and how they say it. I learned to pay attention not just to words but to expressions and subtle cues. These details often hold the key to understanding user needs.

  • Let the Story Flow

    • Allowing participants to share their thoughts uninterrupted opened the door to richer, more authentic insights. I learned to prioritize listening over steering conversations, creating a space where users felt safe to share.

  • Focus on Insights, Not Just Data

    • Asking, “Why does this matter to the user?” shifted my perspective. This approach helped me uncover the bigger picture and make design decisions that start, revolve around, and end with the user’s needs.

  • Iterate and Design Inclusively

    • Iteration taught me to refine my ideas with purpose. Learning about accessibility standards like WCAG reinforced my belief in inclusive design. I’m committed to designing for all users, ensuring every interaction feels intuitive and accessible.

You made it to the end.

Thank you for reading!

Switch gears:

EIGOPDT Case Study