uniFIND
Responsive Web Design
2023
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.
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.