Website design for a new college that merged three pre-existing schools.

Product Details

Role
UX/UI Designer
Year
2022

Web Design

Bethel College

My Role: Lead UI/UX Designer

The Problem

Create a full website for a new college by merging three pre-existing schools, including content, branding, and the application process.

Background

The stakeholders initial intention for showcasing the different schools and their offerings was convoluted at best, and the timeline asked for the site to be completed within a month; from concept to development.

Overview

Research

While the concept for this product was direct from the beginning, we used a brief research phase that included interviews and competitive analysis to identify any blind spots. As a result, we outlined several challenges that would need to be resolved.

Challenges

Create smooth navigation throughout the product to help the user find the school and info they were looking for easily.

Blend the visual identities of the three schools into one cohesive style.

Ensure that communicating the content for three different schools in one place is not overwhelming or confusing.

A beautifully simple website that aids the user in navigating the multiple offerings of multiple schools, and makes the application process as attractive and smooth as possible.

MVP

Information Architecture

Sitemap

To ensure a strong navigation and create understanding with stakeholders a sitemap was created. We worked to minimize the amount of pages in the site while making it possible to access each element from multiple locations.

Wireframes

The site was designed in low and mid fidelity wireframes to map out the structure of the content on each page. We went through several iterations before the final solution was created. Considerations were made for desktop and mobile views of the content.

Brand Design

Typography

H1
Extra Bold - 42pt
H2
Semi Bold - 32pt
H3
Regular - 18pt - Caps

Primary Colors

Secondary

Style Guide

All three individual school brands were assessed and compared to the parent organization’s brand guidelines. The style guide was then created to merge the visual goals of each brand into one aesthetic. A very simple color palette was chosen and paired with a single typeface. The final outcome seeks to communicate the relationship between tech, art, and scholastic pursuit.

Buttons

Structure & Visuals

The final product strikes a balance between simple structure layouts and visually appealing compositions. Content is easily navigated through the use of consistent layouts that are optimized for usability. The application process is always accessible without being bothersome. Copywriting was carefully crafted to encompass the three schools while remaining descriptive.