College Track
Overview
Our team needed to create an action-oriented design to increase conversions throughout the site. We identified three personas that were targeted for conversion: Partners, Students/Families, and Potential Staff. Each of these needed to have its own narrative with its own call-to-actions for involvement in the College Track program.
Client
College Track
Sector
Non-Profit, Education
My Role
Product Designer
User Research, Interaction, Visual Design, Prototyping & Testing
Background
College Track's primary focus is to support and empower students from underserved communities to succeed in college and beyond. College Track provides academic and personal support to students, helping them navigate the college application process, obtain financial aid, and succeed academically. Its programs aim to improve educational outcomes and increase opportunities for low-income and first-generation college students.
Learn more about what College Track does.
I was the sole designer on this project.
I began the process by inventorying their current site, conducting research, creating sitemaps, and working alongside College Track’s director of marketing to gather new content. Next, I designed wireframes to help the client visualize patterns and dedicated areas for content and imagery. The existing College Track website was bulging with information; resources, references, and guides, but lacked organization. My goal was to improve the overall site flow and implement an intuitive user experience. My challenge was to organize and streamline a large bundle of rich content while retaining the liveliness and visual brand of College Track’s new brand direction. I designed the site responsively for all screen sizes and our developers built the website in WordPress with a custom backend.
The Process
My process for the website redesign was based on the Information Foraging Theory. When users look for information on the site, they attempt to maximize the rate of information gain over time: they want to get as much information as possible in the minimum amount of time.
Understanding the Problem
While College Track claims to put students at the center of their college journey, users online have expressed difficulties and issues with the usability of College Track's site. Critical information was not discoverable, there was no clear delineation between the types of users (parents and students), and the current brand was outdated.
Kick-off
In the initial kick-off meeting, we mapped out the project scope and gathered information about the market and target audience. For this, I used:
- User journeys and personas
- Competitor analysis
- Brand research
Market Analysis
This analysis helped me determine the ideal user(s) for the updated College Track website.
- Conducted a competitive analysis of programs within the college access and completion space
- I reviewed 27 programs – which broke out as 13 national and 14 regional competitors
- My analysis of the competitive set had two core points of focus:
- The programs themselves – mission, components, geographies, success stats, etc.
- The programs’ brands – taglines, tone, personality, brand identity, etc.
Information Architecture
I built the information architecture after holding several brainstorming sessions. There were a lot of categories and subcategories to cover while keeping in mind how each user would use the site.
Mapping out the Navigation
Look at me go!
Whiteboarding
This was a crucial step for myself and the development team. Together we were able to map out custom post types and how some of the needed functions would dictate design.
Whiteboarding Session
The Design System
Inspired by the Atomic Design Methodology, we collected all the elements from the site to build a reusable library to create a unified design aesthetic.
One of my main goals was to ensure the site would look well and function on any device. Each page was designed with small screen sizes in mind. I determined how each section should flow and respond to various device sizes.
Brand Guide
Developing the Design
I created high-fidelity mockups and template tables for easy hand-off to the developers. This was essential to ensure the developers had all the necessary information to build the features correctly. This included detailed information about the design, such as dimensions, colors, typography, and layout. It also had information about the interactions and animations that the website required, assets, prototypes, style guides, and design rationale.
By providing these items to developers, I ensured that the development process was smooth and efficient and that the final product met the design requirements and expectations.
Hover on the screens to view the entire page
Conclusion
Results and Takeaways
The narrative behind the site pushes through design boundaries, just like College Track is removing limitations for underserved communities. The design reflects their forward-thinking and innovation. The hero section shows College Track as the center of the college foundation for students, a beacon, or guiding light, that helps navigate the course. This beacon radiates energy, empowering students along their journey.
The philosophy section is a snapshot of who they are and why they do what you do. This establishes College Track's authority amongst viewers.
After learning more about who College Track is, visitors will know who they aim to serve. This has been broken down into the three primary personas identified in the research stage. Students, Parents, and Donors. Each section gives a short overview with a no-guessing, clear interaction choice.
After the initial site launch, there were parts of the site that we continued to update and maintain. The original designs adapt well to new and changing content thanks to carefully planned templates.
More Projects
