Saint Mary’s College of California
PROJECT OVERVIEW
Saint Mary’s College of California is a small, private college that not a lot of people know of. Since Saint Mary’s basketball team made it to the NCAA Championship, we were getting a lot of traffic on our about page during the games. We found that people were curious as to who we are and wanted to learn more about us. My task was to redesign the about page in order to inform and attract prospective students.
DURATION: 1 WEEK
ROLE: UI/UX DESIGNER
TOOLS: ADOBE ILLUSTRATOR & ADOBE XD
Collecting Data
GOOGLE ANALYTICS
During the NCAA Basketball Championship, people were searching terms such as What is a Gael?, Enrollment, Population, etc to locate specific pages. I also noticed that despite higher traffic on our about page, there was a high amount of bounce rates and low amount of time spend on the page.
CRAZY EGG
Based on our heatmap, a lot of the users were clicking on different links that would lead them away from the about page.
User Interviews
Since the primary audience would be high school students, I interviewed some seniors and had them interact with the page in order to understand their wants and needs.
QUESTIONS
1. What do you look for in a college?
2. What information do you expect to see on a college about page?
3. How do you measure a college’s success?
ANSWERS
1. They look for a unique experience and different opportunities to explore their major.
2. They expect to see information about the college history and their values to know what kind of educational environment they offer.
3. They measure a college’s success by the different rankings, testimonials from alumni, and careers after graduating.
User Testing
BUTTONS
The CTA buttons aren’t obvious and use wording that misleads users into assuming that it’s a tagline, leaving them confused.
INFORMATION
The page contained condensed information that was disorganized and at times repetitive. This left the users to be overwhelmed and unable to obtain all the proper information.
DESIGN
The visual elements blended together and lacked any kind of distinguishable design. This made the users uninterested in the content and discouraged them from discovering new information.
Competitive Analysis
I looked at different about pages from various universities to understand how our competitors organized their information. I then identified key elements that were functional and appealing in order to implement on our about page.
STRENGTHS
1. Large numbers all around the page indicate success.
2. Photos that showcase sense of diversity, community, and student life.
3. Each section has a distinguishable design that differentiates them from one another.
WEAKNESSES
1. Tends to be text heavy resulting into users looking over the text.
2. Including information that is uninteresting to the target audience.
3. Too many links that weren’t relevant to the user’s journey.
Persona
Sarah is a high school senior who’s looking for a college that fits her educational goals and personal lifestyle. She has an ambition to perform well in all her classes in order to get into a college that would support her career goals. She enjoys exploring unique opportunities related to her interest in order to build community with others.
GOALS
– Have fun and unique college experience.
– Wants to have a sense of strong community.
– Have a successful career after college.
FRUSTRATIONS
– Has difficulty navigating through college websites because of the overwhelming amount of information.
– Unable to learn more about people’s experience attending specific colleges.
Wireframe
SHORT INTRODUCTION
I kept the history information short since I knew that prospective students have a tendency to look over sections with heavy text.
HIGHLIGHTED LINKS
These links focus on what students are most interested in looking for and the different educational experiences that make Saint Mary’s unique.
COMMONLY SEARCHED ITEMS
Based on the google analytics, I wanted to include the words that people were commonly searching for so they would be able to easily access the information all in one page.
LARGE NUMBERS
I wanted to capture the user’s attention by highlighting notable numbers that reflect what make’s Saint Mary’s successful.
ALUMNI TESTIMONIALS
I included testimonials from alumni that would show how Saint Mary’s supported their careers.
NEXT STEPS
This section encourages prospective students to move on to the next step of experiencing the campus in person.
Final Product
RESULTS
I was able to enhance the user’s experience by making the information more accessible while improving the visual design of the page which resulted in a decreased amount of bounce rates and an increased average time spent on the page.
CHALLENGES
There were certain design ideas I had in mind for the page, but I wasn’t able to create them because of the software limitations.
TAKEAWAYS
This experience has taught me how to work around limitations by using other applications, like Adobe Illustrator, to create and add new elements that weren’t already available in our software. I also collaborated with our web developer to get the necessary coding to implement my ideas into the mobile version of the page.
Digital Design
CAMPAIGN EMAILS
When sending out emails to prospective students, I’d make header images that go with our new branding.
INTERNAL COMMUNICATIONS EMAILS
I decided to make a banner for COVID emails that would go out to students, faculty, and staff using our current branding so the users would immediately know what the email is about.
K | M 