AIP Publishing
My Role
UX Designer
Team
Robert Als - Lead Web Developer
Rich Pandolfo - Product Manager
Sara Rotjan - Marketing Director
Timeline
Jun - Aug 2021, 3 months
Tools
Figma
Balsamiq
Project Overview
AIP Publishing's search website, Scitation, hosts high-quality research, academic articles, and resources in physics.
As part of a company R&D project, I led the redesign of the landing page, playing a critical role in identifying current pain points, scoping the project, and proposing solutions to stakeholders in technology.
Step 1 of 5 – Project Kickoff
Identifying Current Issues
How are users behaving?
Starting off, I asked myself initial questions – Who are our users? How do they use the website? What frustrations do they run into?
Using Crazy Egg, a web optimization tool, I analyzed data from 18,000 users. The heatmaps below show user interactions, with warmer colors representing higher engagement.
User Interaction Heatmaps
Two crucial themes:
Heavy Reliance on Search
Most users only click on the search bar, highlighting its importance, but also revealing that other resources aren't being utilized.
Visitor Abandonment
Almost all users drop-off the page once they scroll down, showing a need to make content on the page easier to understand and use.
Visitors abandon the website quickly, missing out on valuable resources and tools beyond the search bar.
Outlining project goals
Based on my findings, it's clear that users are primarily familiar with using the search bar and lose interest as they scroll, resulting in little engagement with other resources and information.
From this, I turned my insights into goals for the redesign.
Increase Engagement
Redesign access to resources to enhance usability, mitigate drop-off rates, and encourage deeper exploration.
Prioritize Current Users
Maintain the prominence of search functionality while enhancing other resources.
Design Efficiently
Refresh the visual design, improve page organization, and reduce scroll length to help users find information quicker.
Step 2 of 5 – User Research
Identifying Current User Needs
What are our pain points?
Next, I collaborated with the product and marketing team to present my data findings and gain insights into our user's needs.
We hosted a session to create an affinity map, grouping pain points into key categories. This highlighted redesign opportunities and acted as a guide in my design process.
Affinity Map
Who are our users?
After creating a card sort, my next objective was to better understand who our users are, where they come from, and what goals they have on the homepage.
The technology team provided a role chart, but it was technical and high-level. I translated it into two user personas and ideal-state flow charts to ensure the redesign would address goals of key users.
Anika
Motivations
Pain Points
User Persona 1
Josh
Motivations
Pain Points
User Persona 2
Step 3 of 5 – A/B Testing
Testing Redesign Ideas
Low-fidelity iterations
Next, I created a foundation of the new landing page. I ventured to see what competitors in the industry are doing and how they structure content, resources, and search features.
From my findings, I designed two iterations that propose different solutions to search features, resource navigation, and organization above and below the fold.
Stakeholder feedback
I was eager to get feedback on my redesign ideas, but had limited access to real-world users. Without direct feedback, I risked missing insights that could impact effectiveness and results.
Working within a 3-month internship timeframe required quick adaptation, so I looked inwards within our organization. I arranged 1:1 sessions with product and marketing teammates to test my two redesigns using a combination of A/B testing and role-based feedback.
A/B Testing
Stakeholders navigated each design, sharing feedback on usability, initial impressions, and preferences about each.
Role-Based Feedback
Stakeholders assumed the role of an end-user, such as a student or professors, and evaluated each design based on their needs.
Stakeholder Testing Board
Low-Fidelity Wireframes
Both versions were strong, but Design B promised to enhance resource discovery, user engagement, and market appeal.
Step 4 of 5 – Visual Design
Putting It All Together
1. Rebranded Design
I translated Design B into a high-fidelity design, focusing on my goal of creating a more engaging and rebranded experience.
Drawing from stakeholder feedback, I implemented suggestions such as sophisticated visual design, clear call-to-action buttons, and a carousel feature.
High-Fidelity Preview
Search bar relocated to the top with other navigation, allowing for more space above the fold.
Card carousels through resources, providing access and discovery to lesser known products.
2. Simplified Information
A key component of the redesign was making information below the fold easier to use, as each Publishing Partner section filled up the entire screen.
I researched ways to best present information-heavy content and adopted a card UI approach. This reduced total scroll length and made it clearer for users to navigate the available resources.
Stack vs Grid
Stacked layout allows space to showcase resources within partners, facilitating exploration.
Grid layout provides users with a visually appealing way to compare different partners.
3. All-in-One Search
Given the popularity of the search bar, a primary focus was to enhance its functionality.
Previously, 'Advanced Search' and 'Citation Search' were separated across different pages, disrupting the journey. I created an all-in-one search bar that brings these filters to the forefront.
Video Loop – Search Bar
Users can fine-tune their search, improving precision, relevance, and efficient experiences.
Adding filters allows users to access more specific and updated resources in the database.
Step 5 of 5 – The Result
Wrapping Up
Desktop & Mobile Mockup
Presenting the prototype
At the end, I presented my project and high-fidelity prototype to stakeholders. While I wasn't able to get feedback from end-users, I achieved my goals of improving current functionality, access to resources, and creating a more powerful landing page.
"My colleagues on the technology team were impressed with Hunter’s ideas and will move them to live production."
Robert Als, Web Development Lead
70% Decrease in Scroll Length
By restructuring and redesigning information, I was able to reduce the entire scroll length of the new page by 70% compared to the current page.
Breakpoints for Technology
Stakeholder feedback highlighted the need for a mobile version, so I created large/small breakpoints by adjusting spacing and responsive elements.
Next Project
MoneyManager
Simplifying personal finance for young adults by interviewing classmates and prototyping solutions.
