Tools
Figma, G-Suite, Canva, UserTesting.com
My Role
Product Intern
Timeline
(3 months)
June 2024 - August 2024
Team
2 Product Managers,
1 Technical Project Manager,
5 designers, 3 Marketing Strategists
This case study is still a work in progress! Come back later for a completed case study.
When users get the content they love, they stay.
Context
How might we make the onboarding process more intuitive and re-discoverable, allowing users to personalize their news feed?
The Philadelphia Inquirer is an award-winning newspaper company that focuses on local sports, politics and community stories that keep Philadelphias engaged and informed. Their commitment to in-depth coverage is showcased in a variety of formats, from their swipeable stories, license plate animations, and onboarding flow.
Problem Discovery
The Inquirer hosts a large variety of stories, which made it a diverse voice for Philadelphians.
But what if that range of stories isn’t displayed in a way that feels manageable and digestible?
My task was to redesign the “apply” page, where students can learn about our application process.
I took it upon myself to create a design that was dynamic and informative by providing more accessibility to resources.
My personal goal was to increase diversity by upskilling any student interested in engineering.
Final Result Sneak Peek
Extra, extra! Check out the Inquirer’s latest front page!
1.Header
Establish the tone, call to action, and
summary of the page quickly and in one screen.
2.Application Timeline
Visually communicate the application process so that all kinds of applicants understand the materials and interview date expectations.
3.Role Descriptions
Summarize the differing roles and responsibilities an applicant can expect to have before applying to a role, being able to sift through the different positions in order to have an efficient experience comparing opportunities.
4.FAQs
This was my first product management project, too. Let’s see how it all started!
Provide detailed responses to common questions students ask about the application process. We aim to lower the barrier of entry for students with little engineering recruitment experience by providing a library of resources that an applicant can review and prepare with.
Mapping the Process
I hypothesize that personalization would lead to longer session durations.
UX Audit
User Interviews
Synthesis
Research
Find Brand Voice
Develop Content Requirements based on Research
Content
Brainstorm design variations for layout
Get feedback on product and re-iterate
Design
Who are the redesign stakeholders?
Who are we designing for?
Defining Usability Problems
First, what problems did I, as someone who just moved to Philadelphia, notice on my first impression of the app’s onboarding flow?
Role Descriptions: Drop down menus have a lot of white space, not effectively using the real estate available on the screen.
Timeline: Is there a way we can visually communicate the differing application timelines for freshmen/upperclassmen?
FAQs: How can we use the blank space better, and provide more detailed responses to questions to help students with the application process?
Verifying Hypotheses
What if it’s just me? I had to verify that users noticed similar issues too. So, I conducted 10+ user tests on a tool called usertesting.com.
Upon reviewing the common language of different pages from the previous website, I found that DTI’s voice is:
💪 Community-Centric
⭐ Collaborative & Inclusive
🖊️ Professional & Encouraging
🗣️ Inspirational & Purpose-Driven
User Testing
In school, I was only taught how to conduct standard, moderated user tests. However, I found that in industry there wasn’t enough capital or time to do that, and that companies needed another way to effectively collect findings from customers that didn’t require finding users, setting up a time to work with them and sitting in a Zoom call for 30 minutes.
✔️ all information is necessary and relevant
✔️ minimalistic interactivity, easy to skim
✔️ branding is clear due to word choice
✔️ strong identity evident in aesthetic
I quickly learned that survey writing was very important, especially if you are conducting unmoderated user tests.
As a previous English major, I was no stranger to drafts and revisions; but the changes I learned at the Inquirer taught me the importance of detail-orientation. I learned was how important meticulous details were. When you’re not there to moderate, every punctuation, connotation and reference had to be crystal-clear, or you would have wasted time and resources because of a simple syntax or directional error.
draft 1 img
draft 2 img
✖️ quite text-heavy
✖️ no consistent layout
✖️ lacks details with some information
✖️ less user control for information gathering
comparison summary
🌱 brand growth through dynamicity and interactivity
🌱 explore layout possibilities
🌱 condense information
🌱 create helpful content to inform the user of DTI’s values and openings
Creating Personas
I listened to a few hours of recordings and jotted down some recurring quotes*.
People were (emotion, why, tie back to product)
*though in cartoon form, these are actual quotes pulled from videos pulled from the usertesting site, hidden for privacy. Please let me know if you’d like access to the case study that has the unfiltered video recordings left in.
Defining Product Goals
What contingency plan would mitigate and address the onboarding issues people had?
☕ TODO
🌈 TODO
Finding 1
Combined Timeline and FAQ Brainstorms: Flow Iteration
Ideating A Design Solution
As you can see in the original video, the timeline and FAQs were separated. To create a more condensed view, I thought it would be best that users are able to see when their application materials are due and any important information together, in the same view to prevent too much scrolling.
I was stubborn to keep the FAQ and timeline portion combined so that there was less scrolling, but that was less standard, and risked hidden information. So, I separated the two, deciding that they served purposes so different that scrolling was necessary.
Timeline section
FAQ section
✅ allows for a clear visualization of the application process
✅ considering development and business, this is a flexible design that allows for multiple recruitment events as needed
✅ maintains live event updates for visual communication
✅ provides essential information without hiding anything
✅ provides a mini version and a maxi version for user control
✅ vertically aligned, allowing for easier reading
✅ allows for a clear visualization of the application process
✅ considering development and business, this is a flexible design that allows for multiple recruitment events as needed
✅ maintains live event updates for visual communication
✅ provides essential information without hiding anything
✅ provides a mini version and a maxi version for user control
✅ vertically aligned, allowing for easier reading
✔️ all information is necessary and relevant
✔️ minimalistic interactivity, easy to skim
✔️ content suffices if a user visits outside the application cycle
Combined Timeline and FAQ Brainstorms: Flow Iteration 2
Strengths
Areas of Improvement
✖️ quite text-heavy
✖️ no consistent layout
✖️ lacks details with some information
✖️ less user control for information gathering
Opportunities
🌱 brand growth through dynamicity and interactivity
🌱 explore layout possibilities
🌱 condense information
🌱 create helpful content to inform the user of DTI’s values and openings
✔️ progress bar allows users to have live recruitment updates
✔️ provides space for location, date, time and event title
Strengths
Areas of Improvement
✖️ the second modal box hides information
✖️ the question mark and coffee button are not intuitive nor standard which may confuse the user
✖️ horizontal scrolling conflicts with the use case where there are multiple recruitment events
Opportunities
🌱 animation exploration allowed us to convey information with interactivity instead of words
🌱 sections in the FAQ that included recruitment help allows equal opportunity to underclassmen who are applying for the first time
“Finding 2”
This is one of our biggest takeaways during our user research. With this in mind, I wanted to make sure that it was not only easy to digest the differing responsibilities per role, but also to compare them so that students can see which position would best suit their needs.
Role Descriptions: Iteration 1
✅ shows all the information without hiding it previously with a dropdown menu
✅ condensed role description into bullets to make it easier to parse
✅ more detailed than before, able to visualize responsibilities
✅ more noticeable application button than a link to a google form before
✅ feels more interactive and dynamic than the site previously with an influx of textual information
Early designs of sifting through specific open positions to learn more about them.
“Finding 3”
A large part of our user base - underclassmen - were unfamiliar with coffee chatting and its importance to the application cycle in both DTI and in the industry. It was important for me to help students learn what is was, and more importantly, how to do it to provide a learning opportunity for budding students.
Coffee Chats: Iteration 1
One of DTI’s unique characteristics is its emphasis on the importance of community to encourage a culture of coffee chatting people outside your team to learn more about others.
✔️ all information is necessary and relevant
✔️ minimalistic interactivity, easy to skim
Strengths
Areas of Improvement
✖️ quite text-heavy
✖️ no consistent layout
✖️ lacks details with some information
✖️ less user control for information gathering
Opportunities
🌱 brand growth through dynamicity and interactivity
🌱 explore layout possibilities
🌱 condense information
🌱 create helpful content to inform the user of DTI’s values and openings
Coffee Chats: Iteration 1
One of DTI’s unique characteristics is its emphasis on the importance of community to encourage a culture of coffee chatting people outside your team to learn more about others.
Coffee Chats: Iteration 2
This would be the next step upon clicking one of the menus, randomly generating students (that switch upon refresh so each designer gets a chance to be featured). Applicants can filter through subteam, then by interest to find out who to chat with. 👉
Coffee Chats: Iteration 3
✅ provides a more concise view of the above iteration,
✅ increases real estate by replacing the space amodal box takes up, and maximizes the size of member cards
✅ reduces subteam division by encouraging applicants to talk to all types of students with different filters
❌ can be confusing to understand as it stretches beyond traditional design practices
❌may have difficulty randomizing different people as the team grows and evolves
✔️ all information is necessary and relevant
✔️ minimalistic interactivity, easy to skim
Strengths
Areas of Improvement
✖️ quite text-heavy
✖️ no consistent layout
✖️ lacks details with some information
✖️ less user control for information gathering
Opportunities
🌱 brand growth through dynamicity and interactivity
🌱 explore layout possibilities
🌱 condense information
🌱 create helpful content to inform the user of DTI’s values and openings
With the application page’s main features designed for, how can we create a direct yet engaging landing page?
Landing Page
How can we attract users to scroll through our site, maintain flavor and providing favorable call to actions?
Through user testing though, I found that the buttons are not as intuitive as it may seem to a designer who knows the product inside out. Especially with no captions to denote what each icon meant, it would be hard to navigate. The designs were also text heavy.
✅ simple yet still flavorful, with the heading’s confident voice that exudes DTI’s brand.
✅ summarizes text from above iterations in fewer lines
✅ maintains consistency and style of the other designers’ design choices
🌱 could do with a call to action right from the start in case a user wants to apply right away
With Summer 2024 wrapping up, what is our end result?
A side by side comparison helped me realize the difference I’ve made. I re-designed the onboarding flow, making it more condensed and intentional.
❌ lacks brand voice and feel
❌ missing clarifying information
❌ missing visual cohesion
✅ understandable, easy to read
✅ information is concise and skimmable
✅ more cohesive layout
✅ more organized yet plentiful information
✅ increased access to the resources available
✅ creatively presented information with interaction
✅ utilizes a blend of creative and standard visual design
KPI Measurement Plan
Once implemented, I’ll work with the data team to measure impact through pre-discussed KPIs.
I had the pleasure to talk to the data department before my internship ended to learn how they track meaningful results, filter significant and insignificant trends, summarize their findings, translate it to those with less technical background and make suggestions. Such findings have helped me develop my product thinking skills and how to collaborate with data to make informed decisions about the product’s future.
KPI 1
kpis located in folder in summary doc
KPI 2
of users from testing were able to complete all tasks.
KPI 3
of students claim that the page is more informative.
That was one of my favorite summers ever.
What had this experience left me with?
A clearer understanding of product processes in uni vs industry experiences.
Developing product intuition by learning to prioritize tasks in sprints.
A newfound appreciation for product in the media, journalism and news space!
Reflection
I couldn’t even describe how many things I learned. I learned techincal PM skills like Jira structuring to Asana board-making to softer skills like product intuition and prioritization. I learned about ideation in a product lens rather than a design one, and how to manage a team’s workflows and workstyles.
This was my first experience with product management, and I learned so, so much.
Brainstorming means to allow myself permission to be more experimental. However, I had to balance fundamental design standards. By reviewing common practices of other designers, I felt more confident about challenging standard design to allow my designs to be creative and still intuitive.
Survey writing is an under-rated skill that changes the game for user testing.
As a Product Intern working at a newspaper company with a very young digital product department, I found that there was so much emphasis on the sports fanatics that consumed much of Philly culture. By pulsing the public, I heard about so many perspectives from users that aren’t as vocal, like mothers who are researching the best school district or new Philadelphians who are trying to learn the most about their new city.