A responsive website
uniFIND is a responsive website that helps incoming college students find the right college for them. It aims to solve the common problem where high school graduates feel lost about which college they should attend by providing them with all the information they need to help them decide on a college that suits them.
Helping students find colleges
The uniFIND responsive website is designed for incoming college students who are still deciding on which college to attend. Incoming college students would want a responsive website that provides many types of information about a college on one page so that they are easy to compare. They may also want to be able to save colleges to view them later and a way to quickly navigate to the college website.
Multiple ways of finding colleges
The uniFIND responsive website features more than one method of finding and viewing colleges. In addition to searching colleges by name, users can find colleges by checking the college ranking. The uniFIND responsive website presents, in an ordered list, four categories in which colleges are ranked: number of applications, acceptance rate, graduation rate, and student population. Users can select and view a college from any of these four lists in a similar fashion as searching by name.
A prominent feature available on every college in the uniFIND responsive website is the save feature, represented by an interactive star icon. To save a college for viewing later, the user simply clicks the star icon next to any college's name and that college will be saved to the user's profile. The user can then navigate to the profile page and revisit any saved colleges.
Accessibility considerations
The uniFIND responsive website presents a clear hierarchy for text throughout all pages which allows for screen readers to accurately relay information to the user. Another aspect of the uniFIND responsive website that empathizes with the user is the lack of hover menus. The omission of hover menus of any type means there are no invisible elements throughout the whole website. The closest element to hover interaction is the gold border around the selection in the college search, which only serves as a visual indicator to remind the user of their position.
Visual feedback
A few interactive elements have animations attached to them. Such interactive elements include the star icon for saving colleges and the four categories of the college ranking. When the user clicks the star icon to save a college for later, a small animation is played in which the star expands. When the user navigates between the four college ranking categories, a bar indicator under the currently active category travels to the next category. These small animations are intended to show the user that their action had taken place and responded to.
Design process and wireframes
Initially, I wanted users to have many options for searching for colleges from the homepage. In addition to the nav-bar at the top, there would be a search box, a hero image, a mini version of the college ranking list, and a few college recommendations on the homepage.
I quickly realized that all of these elements on the homepage would be too much and cause the homepage to feel cluttered. College recommendations would not make sense if the uniFIND responsive website did not even know anything about the user. Some information like college ranking would have a larger and more detailed display in a separate page. The nav-bar would feel redundant if a lot of information from other pages were displayed on the homepage and could be accessed from outside of the nav-bar. Ultimately, a homepage packed full of sub-elements made it seem like a webpage for advertising colleges.
Refining the design
A clean and easy-to-read design is more effective in helping users search for colleges and learn more about them. Data that can otherwise look overwhelming is instead presented in an organized fashion that is supported by visual hierarchy in the form of color, font size and weight, and spacing.
Before
After
Mobile version
A responsive website is a website that can scale to any screen size. The uniFIND responsive website was designed for large, desktop-sized screens first. Scaling the website down to fit mobile devices meant rearranging some elements, recreating the navigation, and reducing the size of images. Text are displayed on more lines overall and there are less columns of information. The mobile experience consists of more vertical scrolling and images are much smaller than the desktop experience.
What I learned
I learned that responsive design allows you to design on a large screen and easily translate that same design to a smaller screen. The most important takeaway for me is that once you have a clear and concrete design, you can apply that design anywhere, no matter the screen size.
Style guide
The purpose of uniFIND is to help incoming college students find the right college. The horizontal bar motif used throughout the uniFIND responsive website symbolizes the higher education that colleges represent. The bar is always shown to be below another element—usually text—to act as a stepping stone or riser for the element above it.
The colors chosen for the uniFIND brand identity include a goldenrod color, a dark gray, and a light gray. The goldenrod color was chosen because it represents achievement, success, and victory, fitting for the subject matter of moving forward to higher education. Gray and light gray were chosen to support the brand identity and remain neutral, used for supporting text and background elements.
Barlow was chosen for the typeface because it has the characteristics of sturdiness and rigidness which suggest proof of accomplishment and unbreakable will.
Try the prototype!
The uniFIND responsive website is available as a high-fidelity prototype below.