Kat Whitfield Design
Kat Whitfield Design

Shaper's Peak Community College

Project Introduction

In this project, I created a fictitious community college to create a few sample web pages for, but with a few twists.

I wanted this project to take marketing and user experience constraints into consideration to reflect some of the real design challenges faced in a corporation or agency.

As nice as it is to take pretty stock images and schnazzy on-page effects, sometimes in terms of appealing to a target market, working with an existing CMS, or accommodating screen readers, the design needs to change accordingly.

Project Introduction

In this project, I created a fictitious community college to create a few sample web pages for, but with a few twists.

I wanted this project to take marketing and user experience constraints into consideration to better reflect the real design challenges faced in a corporation or agency.

As nice as it is to take pretty stock images and schnazzy on-page effects, sometimes in terms of appealing to a target market, working with an existing CMS, or accommodating screen readers, the design needs to change accordingly.

I based this project around 4 marketing personas a community college might have. I chose a community college for a few reasons:

  1. I always found education websites (even for some major universities) to be horribly confusing to navigate and wanted to try my hand at it.
  2. I didn’t know much about community colleges starting this project. Working at an agency I usually start client work knowing little about their industry, so this provided a more realistic challenge.
  3. It seemed like a site that would attract vastly different types of potential customers, making for more distinct personas.

Marketing Personas

Prospective Students – Becca / Mike

Age: 17-20

Income (Parents): Low – Lower Middle Class

  • Did poorly in high school and/or cannot afford university.
  • Typically works a part-time, minimum-wage job.
  • Not a lot of direction in life, not sure what the next step for them should be after high school.

Parents – Scott / Evelyn

Age: 42 – 50

Income: Middle Class

  • Worried about their child’s future – they didn’t get into university and don’t know their other options.
  • Worried about the shame they and their child will feel about him not getting accepted / going to a community college.
  • Concerned that child’s poor performance in high school means they won’t find the drive to support themselves independently / get a job.
  • Still would like their child to go to college, but worry it is too late if they do not get accepted in high school.

Veterans – Rachel / Jose

Age: 25 – 35

Income: Low – Lower Middle Class

  • Married, often with at least 1 child or 1 on the way.
  • Retired veteran transitioning to civilian life.
  • Primary concern is being able to continue to provide for their family.
  • Looking for practical solutions. Not afraid of hard work.
  • Often has difficulty adjusting to civilian life – lack of camaraderie / support / purpose / structure provided by military service.
  • Unfamiliar with the process / paperwork involved in applying to college / finding an appropriate program. Need guidance.

Retirees – Rosa / Billy

Age: 60 – 85

Income: Middle to Upper Middle Class

  • Retired from a relatively successful career. (decent retirement savings and spare time)
  • Not ready to be ‘put out to pasture,’ they are looking to stay sharp and spry.
  • While not often on the top of their mind, finding a new sense of community is something lacking in their post-retirement life.
  • As goes with being elderly, often have issues with vision and mobility.
  • Concerned that they will feel out of place at a community college, as it is typically associated with young adults.

Map out Persona Desires

I began by organizing all of the above concerns and desires into concrete ideas that could influence the page structure, and how the information is presented in terms of copy and images. This could have been done in a much neater fashion using any number of flow chart / mapping programs, but I find I concentrate on the work much better away from the computer.

Writing out the surface concerns, then delving in a bit deeper to the real emotional needs. Example here with the High School Student persona.

Chart mapping the flow from the home page to the persona pages. Easier to translate into the wireframes from this perspective.

Once I had these desires wrapped up into some neat packages, I had a target emotional appeal for each of my pages.

Home Page

Wireframe (Click for full image)

Wireframe (Click for full image)

Finished Home Page (click for full image)

Finished Home Page (click for full image)


In doing research on community colleges, I was surprised at just how hard it was to get a grasp on what exactly they offered. And if you did know what they offered, how on earth did you get started? Obviously some of the issues with this aren’t due to incompetence on the college’s part, but more of a function of having a site with tons and tons of content that aren’t all related to each other.

I imagine that it’s like starting out with a really nice, neat and manageable house. Then you want to add on a guest room. Then you want to add on a sun room. Then you add a rental that the tenants do up however they like. Over time you get a ton of mismatched pieces that don’t really flow cohesively with the original thing…well unless you spent the extra time and money making sure that they did.

Regardless, the home page should prominently show the main offerings of the college, with access to other features in an intuitive manner. Using the insights from the 4 most common personas at the college, I designed a home page that served each of their needs

The wording is very intentional. One of the bigger fears / concerns established by our personas was that community college was a shameful choice compared to university. Throughout the website we are establishing community college as an intentional choice by the future student – not just because they had no where else to go.

More concerns are addressed in the third section, while still displaying important features of the college. Some concerns overlap. For instance, the ‘student groups’ box covers:

  • Parents fear of child missing out on an ‘authentic college experience.’
  • Veteran’s desire for a group / community to belong to.
  • Retirees looking for new experiences / a new community

The other boxes here also cover overlapping goals. While I did not flesh out these particular pages, they would have contained specific, separate call-to-actions for each group the box applied to.

Colleges generate a lot of news. I feel like I often see news stories that wouldn’t resonate with the customers they are trying to attract (Chancellor so-and-so will be in China next week to talk to donors! How interesting!). By all means, post those news stories, but the prime real estate on the home page probably should be devoted to the interests of your most desired markets.

To that end, I think a simple system of tagging news stories with the persona who would be interested in them would make this an easy task. Have the front page show only news stories tagged with your top 3-5 personas. Have other pages that display news stories (which we will see in a second) only show stories that would appeal to their specific persona.

Here we are clearly displaying that getting a job is a primary concern for 75% of our key personas. This goes into trying to drive that the potential customer is making a smart, intentional choice to go to community college. I wanted this site to say “You’re practical! Look how smart you are, foregoing a theoretical, expensive education for a real-world, job-acquiring, affordable one.”

Retiree Page

The finished page (click for full image) was preceded by a rough sketched layout and more formal wireframe.

The finished page (click for full image) was preceded by a rough sketched layout and more formal wireframe.

A review of what we established as important concerns to this persona group:

  • Does anyone like me even attend a community college?
  • Are times flexible / not looking for huge commitment.
  • Not ready to be old! Want to keep enjoying life.
  • Will I be able to keep up?
  • High potential for needing mobility / vision / hearing assistance.

For better legibility, the Retiree-focused page has some design differences:

  • Text is 100% black, no use of other colors.
  • Increased line spacing and font size.
  • All courses / workshops are listed on the same page.
  • Accommodations section has headlines separating the resources.

This was done to make the page as easy to read as possible.

Some other elements that are addressed include:

Typography & Color: The smallest font size is 16, most are above this. The text is the highest contrast possible, I refrained from using blue which is often difficult to read for elderly users.

Page Structure: Line spacing increased for easy reading. All courses are listed on 1 page to accommodate screen readers, and so elderly users don’t need to click around as much. Additionally, the headlines on the accommodations section make it faster to navigate the page and find what the user wants with a screen reader. All unnecessary images would contain no alt text for the same reason.

Common to all persona pages, the right-side news / events / community sections have curated content for the target persona(s) of the page. In this case, much of the news is focused around the sense of community found within the college and senior-specific opportunities.

High School Grad / Veteran Page

Click to view the full page 

Click to view the full page 

This page mainly focuses on the high school grad, but there is some carryover to the veteran desires. The focus desires of this page are:

  • Can I afford this? What financial aid options are available?
  • Is there anyone who will help me navigate all of this?
  • Not sure what to do with life since graduating high school / retiring from military.
  • Can I succeed at this?
  • For veteran – need to find a new job to support family, quickly.
  • For high school grad – some shame at not being accepted to college like their friends.

As vision impairment isn’t so much of a concern on the other pages compared to the retirees, more colors are used, such as the school blue for headlines. Once again, emphasizing in the copy how smart of a decision community college can be.

There is a lot of stigma against trade jobs, despite being great options for many people, especially those not interested in academia. This page has a fair amount of copy to remove some of that shame. Also included is a quote from a famous figure for both authority and social proof to further solidify the case for trade jobs to potential students.

Parents / Veterans Page

Click to view the full page

Click to view the full page

The main concerns of the parent personas were:

  • Will my child succeed if he goes to community college?
  • Still desperately want child to attend 4-year university if they can.
  • Child needs structure, is that offered?
  • Still want child to have the “college experience.”
  • Don’t only failures go to community college?

This page's goal is to make it clear to parents that their child can go to college even if they didn’t do so well in high school. 

This is supported by news stories showing current successful professionals who got their start in community college. 

Next, we address the need for guidance on the student, parent, and veteran side of things. I was surprised at how difficult it was the find out exactly how one applies to a community college, let alone transfer over to a 4-year university after. My goal was to make this as simple, and non-intimidating as possible.

Additionally, in every page, some images and headings can be clicked on to take the user to a dedicated page about their subject. For instance, the “Find your University” would take you to a page that lists the universities and the programs they offer.

Parents and Students 

Click to view the full image

Click to view the full image

The primary purpose of this page is to show parents and potential students that community college is a perfectly viable path towards a happy and successful future. The huge concern of potential students not knowing what career they should pursue is addressed as well. 

The copy is crafted to assuage those fears, emphasizing that there will be someone dedicated to helping the students discover what they want to do with their lives.

The "meet your instructors" section is provided for parents who want to be reassured that their child is getting a quality education. It also serves to continue differentiating Shaper's Peak from normal 4-year universities. 


Themes & Design Choices

This project took plenty of research, both regarding the nature of community colleges, common fears of their attendees, and the most effective design principles to draw them in. 

I made a few deliberate choices in the “feel” of the college. I was trying to really sell it as the place where practical people go to get a job. A no-nonsense kind of institution that won’t waste your time with things you don’t need to know to succeed in a real-world career. To that end, I tried to make all of the imagery of people doing something, or at least be in the middle of doing something. I tried to avoid cheesy stock photos of people in business suits or with backpacks smiling at the camera.

(Although those definitely have their place, and I did use a handful in the project)