Back
RUTH ZHAO
My Role
UX/UI Lead — Interaction Design, Interface and Visual Design, User Flows, Rapid Prototyping
Timeline
2 weeks, launched October 2024
Overview
As the organization that runs Penn Mobile (an app used by over 80% of the student population at Penn), Penn Lab’s purpose is of convenience and efficiency.
As we developed more apps, we quickly discovered several features were simply easier on desktop. I led the design direction of the desktop web application of Penn Mobile and initiated the process of development in the team.
This website is currently in development to be published the Spring of 2025.
00
The Problem
Identifying context
01
Penn Labs had multiple standalone apps with inconsistent designs and separate access points, creating a fragmented user experience.
To address this, we developed Penn Portal: a web-based hub consolidating all features into one cohesive, desktop-focused platform.
This project also aligned with the simultaneous development of a unified design system, fostering collaboration across teams.
Preliminary envisioning of design system
Develop a hub for Penn Labs products
Built to be scalable and expanded upon
Breakfast
Lunch
Dinner
Five new changes Five new change Five new ...
Penn alters financial aid application to simplify process, limit paperwork
THE DAILY PENNSYLVANIAN
Monday
7:30 - 10:30
7:30 - 10:30
11-4
11-4
5-9:30
5-9:30
Tuesday
7:30 - 10:30
11-4
5-9:30
Wednesday
7:30 - 10:30
11-4
5-9:30
Thursday
7:30 - 10:30
11-4
5-9:30
Friday
9-2
2-4:30
5-8
Saturday
Your Reservations
JMHH 203
12:30pm - 1pm
Cancel
ARB 432
4:30pm - 7:30pm
Cancel
Primary Actions
Nav Bar
Home
Announcement
Daily Pennsylvania Publications
University Calendar
GSR Booking
Dining
Laundry
Settings
Dining Balance All Details
Dining Halls + Café menus
Book GSRS
View GSR Bookings
Available Laundry Rooms
A. Previous Mobile Flow
Primary Actions
Dining Balance All Details
Dining Halls + Café menus
Book GSRS
View GSR Bookings
Nav Bar
GSR Booking
Dining
Subletting
Laundry
Settings
Home
Dining Balance Preview
General Study Room Reservations
Daily Pennsylvania Publications
News
Class Schedule
University Calendar
B. Proposed Desktop Flow
User Flows
02
Navigation
For our user flows, we envisioned how the Penn Mobile designs would translate into desktop interfaces — specifically, we wondered what elements we wanted to change and what we wanted to keep.
The proposed desktop flow had a heavier emphasis on home page links to minimize clicks to get to a location.
Because users were shown to most commonly use dining hall and GSR reservation features, shortcuts were added in the home.
1.0. On right: Preliminary User Flows
Penn Portal
Penn Labs — September
2024
> Dashboard
October 11, 2024
See more >
Hi there Sarah!
Dining Balance
Dining Dollars
Dining Swipes
Dining Swipes
Analytics #2
Current GSR Reservations
Class Schedule
Analytics #1
Home
Dining
GSR
Subletting
Penn alters financial aid application to simplify process, limit paperwork
Five new changes Five new change Five new ...
THE DAILY PENNSYLVANIAN
Penn alters financial aid application to simplify process, limit paperwork
THE DAILY PENNSYLVANIAN
Five new changes Five new change Five new ...
UNIVERSITY CALENDAR
Grade Type Change Deadline
October 25th
Family Weekend
October 25-27
Family Weekend
October 25-27
Family Weekend
October 25-27
Family Weekend
October 25-27
Family Weekend
October 25-27
Family Weekend
October 25-27
> Dashboard
October 11, 2024
Hi there Sarah!
Dining Balance
UNIVERSITY CALENDAR
Grade Type Change Deadline
October 25th
Family Weekend
October 25-27
Family Weekend
October 25-27
Family Weekend
October 25-27
Family Weekend
October 25-27
Family Weekend
October 25-27
Family Weekend
October 25-27
Dining Dollars
Dining Swipes
Dining Swipes
Analytics #2
class schedule
Analytics #1
Home
Dining
GSR
Subletting
Penn alters financial aid application to simplify process, limit paperwork
Five new changes Five new change Five new ...
THE DAILY PENNSYLVANIAN
Penn alters financial aid application to simplify process, limit paperwork
THE DAILY PENNSYLVANIAN
Five new changes Five new change Five new ...
> Dashboard
October 11, 2024
Hi there Sarah!
Dining Balance
Class Schedule
Dining Dollars
Dining Swipes
Dining Swipes
Analytics #2
Analytics #1
Home
Dining
GSR
Subletting
Penn alters financial aid application to simplify process, limit paperwork
Five new changes Five new change Five new ...
THE DAILY PENNSYLVANIAN
Penn alters financial aid application to simplify process, limit paperwork
THE DAILY PENNSYLVANIAN
Five new changes Five new change Five new ...
UNIVERSITY CALENDAR
Grade Type Change Deadline
October 25th
Family Weekend
October 25-27
Family Weekend
October 25-27
Family Weekend
October 25-27
Family Weekend
October 25-27
Family Weekend
October 25-27
Family Weekend
October 25-27
2.1 Home / Class Schedule Focus
2.2 Home / Dining Balance Focus
2.3 Home / Dining Balance with GSR Focus
A. Home Screen
Wireframes
Building
Wireframes were all created first in grayscale - focusing on values, hierarchies, and interactions rather than color and rendering.
We explored iterations of the home page and made a new system of reserving study rooms for desktop specific actions.
03
Book a GSR
Home
Dining
GSR
Subletting
Huntsman Hall
10/16/24
242
243
245
246
9:30
10:00
10:30
11:00
11:30
12:00
12:30
1:00
1:30
2:00
2:30
3:00
Book a GSR
Home
Dining
GSR
Subletting
Huntsman Hall
10/16/24
242
243
245
246
9:00
10:00
10:30
11:00
11:30
12:00
12:30
1:00
1:30
2:00
2:30
3:00
toast success
Book a GSR
Home
Dining
GSR
Subletting
Huntsman Hall
10/16/24
242
243
245
246
9:00
10:00
10:30
11:00
12:00
12:30
11:00
11:30
CONFIRM BOOKING
Book Now
241
3.2 GSR / Variation 1
3.2 GSR / Variation 2
3.3 GSR / Success Toast
B. Book General Study Room (GSR) Screen
In our designs, we heavily emphasized the atomic design philosophy system that allowed us to structure our information hierarchies.
Molecule
Atom
Organism
Template
Atomic Design Philosophy
04
Penn Portal Iteration 1
Penn Portal Draft
Design System Draft
Penn Portal was a ‘test’ for the new design system, allowing us to envision the final cohesive look for Penn Lab products in one place. This created a feedback loop between Penn Portal and the developing design system!
Cross Team Collaboration: Design System
Logistics
While developing the high fidelity designs, we had to collaborate with the team working simultaneously with the design system.
Because of this, I worked closely with the design system team and was involved in it’s development in addition to Penn Portal.
A. Color and Grayscale
Breakpoint
Class infix
Dimensions
Small
sm
< 768px
Medium
md
< 1200px
Large
lg
< 1400px
Extra Large
xl
> 1400px
Heading 1
Family: Inter
Weight: Bold/Semibold/Regular
Size: 48px
Letter Spacing: 0%
Line Height: 120%
Heading 1
Heading 2
Family: Inter
Weight: Bold/Semibold/Regular
Size: 40px
Letter Spacing: 0.1%
Line Height: 120%
Heading 2
Heading 3
Family: Inter
Weight: Bold/Semibold/Regular
Size: 32px
Letter Spacing: 0.1%
Line Height: 120%
Heading 3
Subheading 1
Family: Inter
Weight: Semibold/Regular
Size: 24px
Letter Spacing: 0.25%
Line Height: 125%
Subheading 1
Body 1
Family: Inter
Weight: Bold/Semibold/Regular
Size: 16px
Letter Spacing: 0.5%
Line Height: 150%
Body 1
Caption
Family: Inter
Weight: Semibold/Regular
Size: 12px
Letter Spacing: 1.5%
Line Height: 150%
Caption
B. Typography and Layouts
Showcase
05
Display
B. GSR Booking Screen
B1. GSR Booking Screen Menu
B2. GSR Booking Screen Confirm
A. Home Screen
C. Dining Screen
C1. Dining Screen Hours Select
C2. Dining Screen Retail and Halls
Takeaways
06
Reflection
The Penn Portal project emphasized the importance of unifying fragmented systems into a cohesive, scalable platform to enhance user experience and foster collaboration across teams.
By rapidly prototyping and addressing user needs, we successfully transitioned to a desktop-focused solution, laying the groundwork for future growth and design system integration.
Cross-App Ecosystem Integration
Unified Design Solutions Are Crucial
Scalability Matters in Design
Balancing User-Centricity with Development Goals