Building a Future-Proof Design System for One of the Nation’s Oldest Law Schools
The Law School at University of Pennsylvania required a comprehensive design system that would unify their numerous department sites and landing pages, while also ensuring long-term adaptability. This system had to be compatible with their existing custom-built CMS and cater to the diverse needs and preferences of various departments.
Role
Lead Designer, Design Manager
Team
Designer
Strategist
Lead Engineer
Frontend Engineers x2
Backend Engineers x2
PM
Skills
Project Leadership
People Management
Project Planning
Product Design, UX/UI
User Research
QA + Testing
Design Systems
About
Graduates of the University of Pennsylvania Carey Law School are renowned for being the leaders of their field. The main goal was to design a website and create a new brand that honored the Law School's legacy but also to attract the next generation of legal professionals.
UX Challenges
Working alongside strategy, we created a research plan to see the challenge from all angles: How should we design the site so that it helps visitors find what they need, stands out from the competition, and simultaneously feels authentic?
Catering to a diverse audience and showcasing an array of exceptional programs, centers, and faculty, the redesign demanded a focused and simplified approach.
Creating interactive wireframe prototypes illustrated our strategic thinking in action, enabling key stakeholders to visualize the overall structure of the site. It also gave us the space to test, experiment, and validate our UX approach before reaching the design phase.
Research Methodologies
By rooting our decisions in the audiences’ needs, we ensured that the final design looked less like a superficial facelift and more like a big, strategic step forward for the institution.
Stakeholder & user interviews
Workshops
Surveys
Competitive analysis
User Personas
The Solution
The result was a bold and modern brand with an extensive, AA accessible, and highly flexible design system. All schools and departments were unified under this design system ensuring it was easy to maintain consistency. The system provided a variety of templates and, within each of those templates, a variety of content blocks to serve the different needs of various departments.
Ensuring Future Success
To translate the design system for the Law School’s development team, we created a custom UI kit, defining styles, animations, and more. This front-end development kit helped the project stay on track while setting the Law School up for future success, as the development team can refer to the kit when adding new pages and/or sections.
Results
36%
increase in admission applicants
Zero
QA issues post-launch
Summary of Role
Collaborated with strategy on research and creating wireframes and information architecture
Comprehensive rebrand of The Law School focusing on color, typography, layout, photography, and graphic elements
Created responsive website design that included:
12 Templates
40 Content Blocks
Led weekly client relationship meetings to discuss progress and solutions
Ensured quality by leading a robust visual and functional QA, partnering with the development team
Actively worked within client’s CMS to populate content and imagery