Role
Design Lead
Team
Suraj Ramchandran, PL
Diego Hernandez, SWE
Anzhou Wang, SWE
Max Pinhiero, SWE
Ansh Marwa, SWE
Anna Ji, UXD
Cynthia Cao, UXD
Overview
Form Fillout
Narratives Page
Micro-interactions
Context
These 'merit forms' are a key part of the faculty evaluation process—the results influence important decisions like salary adjustments, promotions, tenure, and other aspects of their progression as university faculty members. Serving as a reflection of the past year’s achievements, the form was a long and tedious document, requiring faculty to navigate a complex and cumbersome 10-page packet at the end of each year.
A section of the preexisting merit form
Image
The Problems
Long and complex 10-page form at the end of every year.
Manual tracking of all activities of the year by faculty.
Arduous review process (100+ forms) for the merit committee.
These were the primary issues with the existing system. Our goal was to simplify it, making it easier for faculty to manage their submissions and enabling the merit committee to review them efficiently.
User Groups
As shown above, there were two main user groups suffering from these complex forms—the faculty and the merit committee.
Faculty
Responsible for submitting their activity records for the year
Merit Committee
Tasked with reviewing and grading these submissions
The Process
To improve both user groups' experiences, we worked closely with our client, Mark Sivak, to define the goals for the project. Mark Sivak, a Northeastern faculty member and merit committee member, had first-hand experience with both sides of the issues, and served as a great resource for information.
A snippet of the client meeting and notes.
Image
The Approach
After numerous conversations, we established our project goals—one for each user group—and translated them into actionable solutions detailing how we would achieve these objectives.
Faculty
Creating a simple and accessible activity documentation process
Updatable activity documentation platform/web app
Merit Committee
Optimizing the review process of activities submitted by 100+ faculty members.
A new organization of information for the merit committee.
A continuation from the semester prior..
The project had begun the previous semester, and much of our focus had been on logistics rather than design. Our initial priorities were organizing the information architecture, reinterpreting the Northeastern brand, and presenting basic information. As a result, many design decisions lacked intentionality and weren’t very effective, so our semester kicked off with redesigns.
Faculty Facing Platform
The activity documentations
Revamping the layout for smarter screen space usage
Original composition
Final composition
Our first task was to redesign the low-fidelity screens from the previous semester, starting with the composition of the app’s core feature—the activity submission form. The diagrams above show the initial and final redesigns, though several key steps shaped these changes.
The step-by-step process
1. Submission description location
2. Button locations
3. Navigation bar layout
We took 3 main steps to redesign the composition of the page:
Reevaluation of the information on the page.
With many details to cover—task qualifications, form instructions, and value calculations—it was crucial to organize the information clearly and keep it easily accessible. We used collapsible modules instead of mere blocks of text to group information more effectively, which made much better use of the space on the right.
Separation/Chunking of information.
Next, the information was placed in the side section and actionable items on the left, but this left the main form area too minimal and incomplete.
Navigation repositioning
The navigation was moved from the top to the left side and reduced the width of the information section, creating a streamlined three-column layout. This improved the overall organization and visibility of subpages and content.
This new three-column layout also streamlined the narrative submission process, providing space for a preview and a clear call to action, which enhanced both functionality and flow.
Form submission screen
Image
Application Sitemap
Utilizing the new layout: Organizing information and streamlining pages
HOME SCREEN
SUBMITTED FORMS
DASHBOARD
TEACHING
CREATIVE
SERVICE
NEW FORM
EDIT FORM
SUBMIT
NARRATIVE
VIEW
SUBMIT
Original sitemap
HOME SCREEN
SUBMITTED FORMS
DASHBOARD
TEACHING
CREATIVE
SERVICE
NARRATIVE
FORM/EDIT
SUBMIT
EDIT FORM
SUBMIT
Simplified sitemap
Professors only needed to write one narrative per category, summarizing the activities they submitted and highlighting key aspects of their semester. By adjusting the sitemap and user flow, we made it easier for them to move smoothly from activity submissions to the corresponding narrative. To enhance this connection, we added two key features: a narrative preview on the submissions page and access to their ‘favorited’ activities directly on the narrative page.
Narratives flow change before
Narratives flow change after
Flow of previewing narratives and activities
Video
UI Design
Quick and compact information: Activity Cards
Playing around with composition
We explored different display formats, such as lists and cards, and tested various screen compositions. Ultimately, we chose cards to highlight each activity as a distinct entity, making it easier to present more information without overwhelming or confusing the user.
Final Submissions Page
We organized the project's hierarchy by the significance of each activity rather than by date, prioritizing tasks based on their weight to ensure we address the most impactful ones first. Additionally, we tailored the information to meet user needs, incorporating feedback from clients and input from faculty.
Merit Committee Facing
Designing for a quick user interaction: grading activities
The variance in compositions
Faculty activity composition
Merit committee activity composition
The merit committee would need to quickly go through and check their submissions, so I decided on a list layout to minimize the time spent reviewing each activity. Since certain submissions required more space than a single row could provide, we added an expanding feature that allows for a quick preview of the content. This ensures that committee members can access the necessary details efficiently while maintaining a streamlined review process.
Interactivity of the activity cards
Expanding and collapsing activity cards
Video
The final accept and reject UI was executed once I had left the team, shown above. However, there were aspects of the design that could be improved—the new designers mentioned that the buttons had to feel "editable", since the merit committee could change their decision on the activity, and represented it by keep the color of the buttons unchanging. This left the design feeling unfinished and slightly unintuitive, so I designed it as a toggle instead.
The change in UI intuitively allowed users to understand that the options could be switched back and the status of accept and reject was clear
Accept
Reject
Accept and reject toggle with text
Interactive
Accept and reject toggle simplified
Interactive
User Research
Professor Cards
Iterations, iterations, iterations!
Iterations of professor cards
This screen was designed for professors, as the client requested a feature that allows them to preview their scores and comments directly on their cards. We iterated on various compositions and experimented with different amounts of information on each card before ultimately selecting the most effective layout.
Professor Name
Tenure
Service
9
Teaching
7
Creative
6
7.3
Professor Name
Tenure
Service
9
Teaching
7
Creative
6
7.3
High fidelity of the final professor card
Professor Name
Tenure
Service
9
Teaching
7
Creative
6
7.3
comment goes here, short description to include goes here. Maybe resizeable box to match content. Not scroll.
Comment active on the final professor card
The selected layout presented the most compact amount of information while providing a distinct contrast to the activities page. Additionally, it maintained a sense of continuity with the faculty side of the application, creating a cohesive user experience across different sections.
Comment preview interaction
Video
Reflection
The resulting learnings and growth
Team photo!
Photo
Teaching is the best way to learn
Through this process, I had my first experiences in a leadership position as the design lead for the project. It had only been a year since I was introduced to UX, and I still had an immense amount of knowledge to acquire. However, within just one semester, I developed a strong sense of ownership over the product and gained a much deeper understanding of what UX truly entails. Leading other designers, collaborating with front-end developers, and communicating with the client greatly motivated me to understand the project better, refine my design methods, and improve my decision-making. I approached my design decisions with intentionality, backed by research and client input, and engaged in countless iterations that explored the full range of my creativity.