Pilot Fish Redesign

ROLE

UI/UX Designer

TEAM

Cross-functional (Design, Frontend, Backend)

TOOLS

Figma, Trello Board

DURATION

2 months

OVERVIEW

Heading

PilotFish is a private, student-focused mobile app that connects people through shared wellness goals and interests.

PilotFish helps build healthier, more socially connected communities starting with the college campus. Designed with privacy and emotional safety in mind, the app allows students to create a profile, share their wellness interests, and discover others nearby who enjoy the same healthy activities, from running and yoga to mindfulness and walking groups. PilotFish encourages low-pressure, meaningful connections in an increasingly self-reliant world, reminding us that while personal growth is important, we are better together.

My Contribution

I led the visual redesign of the PilotFish mobile app, working closely with engineering teams to ensure the updated UI was modern, cohesive, and technically implementable. My role focused on refreshing the app’s visual identity for a student audience—introducing a calming color system, simplifying the layout, and ensuring design consistency—while preserving the original user flow. I produced high-fidelity mockups and supported development with clear documentation and design assets.

Why was the Redesign Needed?

College students often struggle to find trustworthy, organized, and student-centered platforms for subleasing. Existing tools are fragmented and don’t reflect the unique rhythms and concerns of student life, such as academic calendars, trust between peers, and housing logistics.

Outdated Design: The visuals didn’t reflect the needs or expectations of today’s university students.
Inconsistent UI Patterns: A lack of visual hierarchy and standardized components led to a disjointed user experience.
Brand Misalignment: Students and stakeholders felt the design didn’t match the platform’s focus on trust, health, and personal connection.
Implementation Gaps: Without a cohesive design system, development was slowed by guesswork and inconsistency.

The redesign aimed to bring modernity, warmth, and polish to the interface—making it more appealing and easier to use for its student audience.

THE REDESIGN

Before & After

This section offers a side-by-side comparison of the original and redesigned screens. Each comparison highlights specific visual and structural improvements including updates to layout, color, typography, and component consistency. All of the steps that helped modernize the interface while preserving the existing user flow.

Welcome Screen

The welcome screen remained largely unchanged in structure, but received updated styling and colors to better reflect the modern UI. Margins were adjusted to prevent the text from reaching the edges, improving visual balance and readability.

Sign-up

This screen was visually refreshed with softer, less boxy input fields and improved spacing. While the layout stayed the same, the new color scheme and type hierarchy gave the screen a friendlier, more approachable feel.

Login

Along with general visual updates, I added new login options for Google, Facebook, and Apple to streamline access. A “Remember Me” checkbox and subtle input icons were also introduced to enhance clarity and usability.

Matches

This screen was fully redesigned with a card-based layout for better image display and a top search bar with filter and menu icons. Navigation moved to a fixed bottom bar with clear labels for Programs, People, Messages, Profile, and Settings. Quick filters were retained, program cards now feature interactive icons, and a floating action button lets users create new programs.

People Matches

People Matches, previously nested under Program Matches, is now a dedicated screen. Updates include smaller profile images beside names and class years, expanded space for activity icons, and a new linear match percentage indicator. A top search bar, filters, and menu icon were also added for consistency with the Programs screen.

Search Function

The search bar, as mentioned previously, received a full visual style update. Additionally, program results now display in a compact list format with smaller preview images, titles, and descriptions, making it easier to scan and compare options at a glance.

User Profile

This screen was visually cleaned up to highlight key user information. The gradient header and redundant name display were removed, and the user’s name was moved just beneath the profile image. Editing is now handled through a single, centralized button rather than multiple section-based controls.

Profile Viewing

This layout mirrors the updated User Profile but is optimized for viewing others. The edit button is replaced with a message button linking to the Messages screen. Selecting a match opens this page with a full-size profile image at the top, and a modern block button in the top-right corner provides quick access to safety controls.

Messaging

While the layout for this section stayed largely the same, I applied the usual visual updates for consistency. Also, a new prompt encourages users to enable notifications if disabled, and a plus button in the bottom corner lets users easily start new conversations.

THE PROCESS

Primary Concerns

At the start of the project, I reviewed the original screens to identify key visual and usability issues. This section outlines my initial concerns along with suggested updates to improve clarity, cohesion, and overall user experience.

Welcome Page:
a. Lack of images for identification
b. Unclear icons
c. No Filters

Login/Sign Up
a. Images look like buttons
b. Buttons too low on the screen
c. Overall cleanup needed for legibility

People Page
a. Clean up (style does not match)
b. Add compare schedule feature
c. Update Icons

Main Page/Matches
a. Images do not crop (not fitting)
b. Color scheme not cohesive
c. Creating a group is challenging
d. Component blocks look dated

Search
a. Results do no show up
b. Sort-by feature does not work
c. Add filters instead of group buttons

Profile Page
a. Clean up needed (smaller photos, typography illegible)

Ideation Sketches

Before starting on the wireframes or mockups, I first sketched out early layout ideas to explore how to make the interface feel more intuitive, cohesive, and better aligned with student needs. These early sketches not only helped clarify spacing, grouping, and element position, it also allowed me to get some initial feedback on some of the suggested changes

Digital Wireframes

The next step was to create some low-fidelity wireframes which allowed me to test revised layouts without the distraction of color or typography. I reviewed these wireframes with internal teams to ensure no major changes would interfere with the existing app structure, which remained stable throughout the redesign. The main change that came from the review was removing the "create program" button fro the center of the menu as it was not the focus.

FINAL PRODUCT

Hi-Fidelity Screens

These are the final high-fidelity mockups developed from the updated style guide. Displayed together, they showcase a cohesive, modern design system applied consistently across the app’s core screens, tailored to the needs of student users and ready for development handoff.

Next Steps

Moving forward, the clear next step would be to expand usability testing with real university students to gather feedback on the visual redesign and interaction updates. While the new design system improved cohesion and clarity, insights from actual users will help validate assumptions and guide potential microinteractions or feature refinements. This would require the front-end and back-end coders within the team to implement my designs into the actual app, ensuring the transition from mockups to a fully functional product is smooth and faithful to the intended user experience. Another step would be to document edge cases and responsive states to ensure the design performs well across different screen sizes and accessibility needs.

Takeaways

This project was a valuable exercise in visual problem-solving without altering core UX flows. Working within the existing constraints of the app, I learned how much impact a cohesive style guide and subtle layout improvements can have on usability and perception. It also reinforced the importance of clear communication across design and engineering to make sure that style changes I made could be cleanly translated into code without disrupting functionality. Designing for students also reminded me to prioritize simplicity, clean visuals, intuitive navigation, and a smoother, faster experience that feels familiar and easy to use.

Back to Top

Pilot Fish