SOPHIA LEARNING
School page refresh - case study
PROJECT OVERVIEW
O V E R V I E W
The Solution
To develop an effective solution for the Find Your School page refresh at Sophia Learning, I led a structured, multi-phase UX design process that balanced user needs with business objectives.
The project began with a discovery phase, where I collaborated with the Product Owner, Analytics team, and Marketing managers to gather insights, review performance metrics, and define the goals for the new experience. This research established a clear understanding of user needs, business priorities, and opportunities for improvement.
Next, I conducted a competitive analysis to evaluate similar experiences across the higher education and edtech industries. This research helped identify UX best practices, design patterns, and content strategies that could improve usability, engagement, and the overall transfer credit experience.
Using the insights gathered from discovery and competitive research, I created low-fidelity wireframes to explore potential solutions. I presented these concepts to executive stakeholders—including the CEO, CMO, and Marketing Directors—to gather feedback, validate the design direction, and ensure the proposed experience aligned with both user expectations and business goals.
After reaching stakeholder alignment, I conducted usability validation through Maze, using heat map and preference testing to better understand user behavior and evaluate design effectiveness. The findings informed iterative refinements before moving into visual design.
The final phase involved creating responsive, high-fidelity mockups and collaborating closely with the development team throughout implementation. The project was delivered across multiple development sprints, and I partnered with a web author during the build process to ensure the final experience was implemented accurately and maintained design consistency from concept to launch.
The Find Your School page on Sophia Learning serves as a key touchpoint for prospective learners exploring how Sophia courses transfer to their college or university. However, the existing experience had become outdated and no longer met the needs or expectations of today's users.
Several challenges were identified during the discovery phase.
Interface: The interface lacked a modern, intuitive experience, making it difficult for users to quickly find relevant information and understand their transfer options.
Content and layout: The content and navigation did not effectively guide users through Sophia's transfer process, resulting in confusion and missed opportunities to build confidence in the platform.
Conversion: From a business perspective, the page was also underperforming. Limited engagement with partner school information and a lack of personalized experiences contributed to lower-than-desired conversion rates for Sophia subscriptions.
User experience: Additionally, the experience did not fully support partnerships by showcasing transfer pathways in a meaningful and engaging way.
The challenge was to redesign the Find Your School experience to create a more user-friendly, informative, and engaging journey—one that clearly explains the transfer process, strengthens relationships with partner institutions, and ultimately increases user engagement and subscription conversions.
O V E R V I E W
About the project
The Find Your School (FYS) page is a critical entry point in the Sophia.org transfer-credit journey, helping prospective learners understand whether and how Sophia courses may transfer to their institution. While the page provides access to partner school and transfer information, the current experience presents usability challenges and is not driving the desired level of user engagement or conversion. For this project I collaborated with key steak holders, marketing managers, Product owners, analytics, developers, web authors, business analysis, project managers and a scrum master.
This project initiative will evaluate both the user experience and supporting backend capabilities to identify opportunities for improvement. Research will focus on understanding user needs, pain points, and decision-making behaviors throughout the school search experience, while also assessing technical constraints and opportunities for enhanced data management and partner integrations.
Goals:
Improve discoverability of partner schools for prospective students by location
Ensure all partner records in the source spreadsheet are tagged with accurate state abbreviations before the feature goes live
Deliver a polished, accessible experience on both desktop and mobile
The outcome of this project will be a set of validated recommendations to improve searchability, personalization, content clarity, and partner-specific experiences. These insights will inform a future redesign of the Find Your School page that increases user confidence, strengthens the transfer-credit experience, and improves key business metrics, including engagement and conversion.
O V E R V I E W
The Challenge
O V E R V I E W
Tools used
Throughout this project, I leveraged a variety of tools to support collaboration, design, and user research. I used Asana to manage tasks and communicate with stakeholders and project managers, ensuring alignment throughout the project lifecycle. Figma served as the primary design tool for creating low-fidelity wireframes, high-fidelity mockups, and responsive prototypes. I used FigJam when I conducted the competitive analysis. I collaborated with developers and business analysts in Jira to track development progress, manage implementation, and address design feedback during each sprint. To validate design decisions, I used Maze to conduct usability testing, including heat map and preference tests, allowing me to gather user insights and iterate on the experience before development.
EXPLORATION
E X P L O R A T I O N
Scope of work & responsibility
Research
To understand user behaviors, needs, and motivations and to gather insights that inform the design process
UX Design
Ensure the product is easy to use & enjoyable by addressing users' needs and problems through design solutions.
UI Design
Ensures that a product’s interface is aesthetically pleasing, consistent, and easy to navigate
Prototyping
Creating a mockup to test and visualize its design, functionality, and user interactions.
WORK PROCESS
P R O C E S S
DISCOVERY
November - December
RESEARCH Competitor analysis & Ideations
Project Timeline
DESIGN
January - February
UI Design Main flow & Future concept
DELIVERY
March - April
INTERFACE Interactions & Final design
RESEARCH PROCESS
R E S E A R C H
Competitor analysis
During the competitive analysis phase, I evaluated the Find Your School experiences of three key competitors: StraighterLine, Study.com, and edX. The goal was to identify industry best practices, uncover opportunities for improvement, and gather inspiration to inform the redesign.
To structure my research, I conducted a sticky note comparison across four key categories: design, copy, content and layout, and user experience. I analyzed each competitor's page to identify its strengths and weaknesses, paying close attention to how information was organized, how users navigated the experience, and how each platform communicated the transfer process.
I synthesized these findings into actionable insights that guided my design decisions, helping shape a more intuitive, engaging, and user-centered experience for Sophia Learning's Find Your School page. After conducting the analysis, I took my findings and presented it to the marketing team for further insight and feedback. I then took that information and began working on my low fidelity wireframes.
Sticky note legend
Banner CTA added below search - interesting
Like the filtering aspect - CTA does get lost again
Pink Sticky notes: The pink sticky notes represent anything on the competitors site that has to do with design. Could be a good design feature, bad design feature, something we might want to explore creating on Sophia
Yellow Sticky notes: The yellow sticky notes represent any and everything copy related. Do you like the competitors copy? Do you think they are speaking to the users well? Anything you would change?
Green Sticky notes: The green sticky notes represent anything content or layout related. Does the content flow well? Would you change anything about the layout or content?
Blue Sticky notes: The blue sticky notes represent anything UX related — how the experience feels for the users, any changes you would make on the competitors site that you feel we should have on ours.
EdX
Sticky notes sorted
Card design - Individual cards with a slight design
Overall copy on this competitor does feel straightforward - slightly redundant
Overall page is pretty flat and static - not eye catching
Throughout the pages they have banner CTAs for added info for the user
FYS search is right as the user lands on the page - Sophia’s should be below the overview
If we want to do this on Sophia we could make ours designed better
Banner component
50/50 component - nice design with the angled image
Each section describes the purpose of the top school category
Resource section - larger cards may not work for Sophia too similar to resource library look
Users can search what schools have their degrees - nice feature
Adds trust for the user when scrolling page
Boxes aren’t designed as well. Don’t feel modern
Hero does feel overwhelming - a lot going on
Banner design - would be beneficial to break up pages
Copy doesn’t explain a lot - user could be confused
Two box display for more content or links - breaks the page up
“Trending” section - Sophia could benefit from having our own - maybe?
User has to type three letters before school list shows up
Main takeaways
Below are the main key takeaways from the competitive analysis. I organized them into three different categories — high priorities, medium priorities and low priorities.
High Priorities
These take aways are top priority. We want to implement them within Q2 or early Q3
Medium Priorities
These take aways aren’t as top priority but still want to implement within the next few quarters
Low Priorities
These take aways are not as important to implement but could be beneficial at other times
“Featured partner schools” section nice touch but gets lost
Currently have a new FAQ in development
Should update our boxes on our grid wall to be more modern
Not much copy on page
“Top” Schools sectioned off into different categories - Pro
We should keep our “in component” scroll for the user experience
Straighterline
Study
Maybe beneficial if we have a sale?
Updated FAQ theirs is a 50/50 version - don’t think we need to change ours
50/50 section with check marks - could consider building a component like this?
Copy in overview section feels straight forward as a user
Testimonial component within the FYS page - pro
Logo wall really long - too long. User has to scroll far
Create an updated Two box component
Currently the Sophia Component Library has a 2 box design but we could update this to be more modern and for multiple use cases
ACE badge image
Create an ACE badge image for the ACE accredited section
Existing components
Should utilize new components that have been built over the past year
Testimonials
Add testimonial (existing) component to the page for new users to hear current users stories
Transfer credit badge
Create a badge for transfer credit schools to display throughout sections - add more legitimacy for users
Lorem ipsum dolor sit
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
The design of the overview section is straight to the point and a nice touch with the icons
Same design as our partner “list” view - Should keep
Hero with “stat” design - quick way to show Sophia’s legitimacy
Note easy to find. Under the “Collages” tab but not clear as a user
“Popular courses” section - Sophia would really benefit from having a component like this
Under some schools they showcase a discount
Transfer Credit badge - nice design and breaks up list view
This section takes users to other pages within the site
Scrolling logo component - not automatic like ours - frustrating experience
Bring over resource component
Currently we have designed a new “Helpful Resources” component for the course page and think it will be beneficial for the FYS page - will keep the user engaged
Update “overview” section
Need to make it known to the user what the page is for right as they land on the page but want to do that in a visually appealing way
Page layout
Keep page consistent and straight forward for user
Popular courses filters
For the popular courses section there maybe could be a filter for users to decide if they want certain categories of courses
Updated partner grid
Find a way to update the component grid wall slightly - keep in-component scroll but maybe make tiles more modern? Add tags?
Lorem ipsum dolor sit
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ability for users to learn more about what the transfer capabilities are
Another banner design - breaks the page up and catches the users eye
Like the filtering system they have - CTA does get lost
Add a “Top School” component
Straigherline has “Top Nursing schools” etc. sections throughout the page - We should do something that showcases different sections of school (i.e. nursing, business etc.)
Banner component for major call outs
We currently only use “Call out banners” on the Blog but think it would be beneficial to have on the site for additional info
Dynamic page
Add more dynamic elements to the page for more interaction with user - Already have search functionality updated and path steps component but need to add one more element
Page length
Competitors pages are a bit too long, I think ours should not be too long because that would be a frustrating experience for the user - want to keep that in mind
Copy v. imagery
Design note - keep a healthy balance of just the right copy to explain to the user what is needed and imagery to break the copy up
Lorem ipsum dolor sit
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
INFORMATION ARCHITECTURE
I N F O R M A T I O N A R C H I T E C T U R E
Ideation & sketch
After completing the competitor analysis, I began ideation sketches to shape the overall look and functionalityAfter completing the competitive analysis, I transitioned into the ideation phase to explore the overall structure and user experience for the refreshed Find Your School page. I began by sketching concepts to establish the page's information architecture, focusing on creating a clear, intuitive layout that would simplify the user journey and make key transfer information easy to find.
These early concepts allowed me to evaluate different component placements, content hierarchy, and interaction patterns before committing to a final direction. Building on the strongest ideas from the sketching phase, I translated the concepts into low-fidelity wireframes, creating a foundational design that could be reviewed with stakeholders and iterated on based on feedback. of the savings calculator. My primary goal was to keep the user experience simple and efficient by minimizing the number of input fields. I envisioned a split-screen layout, with input fields on the left and results displayed on the right, ensuring users had everything in one view for convenience. During the sketching process, I realized that only two input fields were necessary, so I opted for sliders instead of manual inputs to streamline the experience and reduce the potential for user errors. This approach ensured a fast, intuitive interaction for the user while maintaining clarity and ease of use.
Hero section: gives overview of page
Jumplink nav for smooth user experience
Overview and legend for the partner school search
Search tool for user to search if their school is a partner with Sophia
Partner school gird wall for users to visually see a list of the partner schools
Overview of Sophia’s Accreditation
Steps section for the user to see how to sign up for Sophia
Helpful resources section for more Sophia links
FAQ section for the user to have questions answered
I N F O R M A T I O N A R C H I T E C T U R E
Medium fidelity wireframe
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Partner grid wall showcases the partner schools with logos and a CTA
New steps design — has an animation effect to keep the user engaged
Jumplink component stays static as the user scrolls down the page - gives easy access for the user to jump between the page
Updated search section to be more visually appealing to the user and an easy experience
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
USABILITY TESTING
U S A B I L I T Y T E S T I N G
Heat map
After creating the high-fidelity mockups, I conducted a heat map test using Maze to validate the proposed design and better understand how users interacted with the page. The objective was to identify where participants naturally focused their attention and clicked throughout the experience, ensuring that the content hierarchy, navigation, and overall user flow were intuitive.
The insights gathered from the test helped validate key design decisions and highlighted opportunities for refinement before the designs were finalized for development.
Lorem ipsum dolor sit amet consectetur adipiscing elit. Quisque faucibus ex sapien vitae pellentesque sem placerat. In id cursus mi pretium tellus duis.
Lorem ipsum dolor sit amet consectetur adipiscing elit. Quisque faucibus ex sapien vitae pellentesque sem placerat. In id cursus mi pretium tellus duis.
Lorem ipsum dolor sit amet consectetur adipiscing elit. Quisque faucibus ex sapien vitae pellentesque sem placerat. In id cursus mi pretium tellus duis.
Lorem ipsum dolor sit amet consectetur adipiscing elit. Quisque faucibus ex sapien vitae pellentesque sem placerat. In id cursus mi pretium tellus duis.
Lorem ipsum dolor sit amet consectetur adipiscing elit. Quisque faucibus ex sapien vitae pellentesque sem placerat. In id cursus mi pretium tellus duis.
Lorem ipsum dolor sit amet consectetur adipiscing elit. Quisque faucibus ex sapien vitae pellentesque sem placerat. In id cursus mi pretium tellus duis.
Lorem ipsum dolor sit amet consectetur adipiscing elit. Quisque faucibus ex sapien vitae pellentesque sem placerat. In id cursus mi pretium tellus duis.
Lorem ipsum dolor sit amet consectetur adipiscing elit. Quisque faucibus ex sapien vitae pellentesque sem placerat. In id cursus mi pretium tellus duis.
DESIGN PROCESS
D E S I G N P R O C E S S
Color palette
#D0DF00
#000000
#3F826D
#F9F9F9
#055973
D E S I G N P R O C E S S
Fonts & typography
Sofia Pro font family
#250E62
#FFFFFF
#F9F9F9
P22 Mackinac Pro
COMPLETED PROJECT
K E Y T A K E A W A Y S
Final Designs
The final phase of the project focused on creating the high-fidelity designs and presenting them to key stakeholders for final review and approval. After completing discovery, conducting competitive research, collaborating with cross-functional teams, and iterating through wireframes and prototypes, I translated the validated concepts into a polished, production-ready design.
Following Sophia Learning's brand guidelines, I designed the experience using the established color palette, typography, iconography, and UI components to ensure consistency across the platform. My primary objective was to create a cohesive, modern, and intuitive experience that simplified the school search process while clearly communicating Sophia's transfer credit value.
Beyond improving usability, I aimed to create a visually engaging and welcoming experience for all audiences—including prospective and returning learners, as well as current and prospective partner institutions. The final design balanced user needs with business goals, delivering a streamlined experience that strengthened the brand, increased confidence in the transfer process, and supported higher engagement and conversion opportunities.
PAGE STATISTICS
26%
Increase in subscriptions
31%
Increase in conversion rates
56%
Increase in page visits