ND Foundations

A community-based web app.

ND Foundations is a mobile-first app prototype designed for students, prospective students and faculty in the University of Notre Dame's Department of Art, Art History and Design. It is meant to serve as a one-stop resource for the Department, particularly in its detailed information about Riley Hall and West Lake Hall, the art and design buildings on campus.

The main challenge of this project was to determine exactly what information to include and how to logically organize that information. This project was my first experience working with Webflow, which is also the tool I used to create sophiajhooper.com.

Role Co-design and development
Date April 2017
MEDIA Web app
TOOLS Illustrator, Photoshop, Webflow.com
Live Prototype ND Foundations
Course VCD 3: Web Design
Co-Designer Lauren Weldon

Concept development.

After an initial in-class brainstorm, we sent a survey to students and faculty in the Department to learn how we could maximize our app's utility. Their insights not only guided our information gathering but emphasized the importance of user-friendly design. With this in mind, my partner and I decided to use six categories and expandable information cards to most effectively showcase the app's resources. We also dubbed the app “ND Foundations,” inspired by the two-course Foundations sequence every art and design student must take.

Artwork creation.

To divide and conquer, my partner began constructing the app's framework while I tackled the artwork. I created a series of icons to represent our six categories – Resources, Maps, Passcodes, Directory, Courses and Food – using a consistent stroke weight, curved corners and similar shapes to achieve balance and cohesion across the set.

I also used the architectural floor plan for West Lake Hall to create a stylized and simplified map for our app prototype. Similar to the category icons, I used lines with equal weight and curved corners in my design.

Final solution.

The final ND Foundations app prototype features a home page with a scrolling news banner. The app-like category buttons demonstrate our mobile-first design thinking and provide easy navigation to each section. Our color scheme was inspired by Notre Dame's school colors and the interior design of West Lake Hall.

Beyond our six categories, the app's information is organized using interactive tabs and sub-tabs. The information cards feature “show more” buttons to reveal additional information and prototyped “share” buttons to send cards via text or email.

Once inside the app, a drop-down menu with a unique icon animation facilitates easy navigation between categories.

My floor plan artwork is utilized and made interactive in the Facilities section. Users can simply click on a room to learn more about its functions and resources.

Finally, a prototyped Secure Login page simulates a vital layer of security before accessing passcodes to various art and design resources on campus.