Cañada College Digital Art & Animation Webpage Redesign
Redesign of the home page of Cañada College Digital Art & Animation program.
Target: Cañada College Digital Art & Animation Webpage
Market: Cañada College
Role: Web Designer
Software: Figma
The intended outcome:
Highlight the different programs
Enhance user experience
Grab the attention of prospective students
Showcase students' work in an engaging way
Overview
The Challenge
The Solution
Prospective students don’t really engage or feel the spark about what the Digital Art & Animation program is really about. The home page doesn’t capture the creativity or energy of the program.
As a student within de College of San Mateo district, I realized that Cañada College is one of the few colleges on the Bay Area region who offers the motion graphics class while focusing on 3D animation, and after doing my research for this project, I discovered that the current Digital Art & Animation webpage does not show what the program is really about.
How can I show prospective students what Cañada’s program is really about?
Redesign a webpage that focuses on prospective students’ experience while visiting the website:
Using images of other students to spark some excitement and curiosity.
Using rounded figures to evoke friendliness and a sense of calm and familiarity.
Incorporating all the information necessary in a fun layout with a lot of negative space, and friendly faces.
The Design Process
Background
I decided to take on this project because I believe is so important to go big or go home, and Cañada Digital Art & Animation Program needs to showcase what they truly are. When I was designing and imagining how the page should look like, all I could think was rounded shapes and a lot of space with a clean layout. I also knew I needed images of students doing what Cañada offers. There’s nothing better for prospective students to see others doing something what they want to do! That inspires!
Wireframes
After conducting my primary research, I started sketching the wireframes taking into consideration the need for a lot of space, images around the webpage, section to showcase students' projects, and all the degrees the department has to offer.
Low Fidelity Prototypes
The first round of low fidelity mockups allowed me to visualize the core user interface elements and test the visual hierarchy, spaces, and overall layout. These designs incorporated feedback from the wireframe phase and started to anticipate the brand identity and color palette, copy write, and specific information about the degrees and classes.
High Fidelity Prototypes
After conducting user testing with the initial lo-fi mockups, I refined the designs to address usability issues and feedback. The high fidelity mockups show the final iteration with not only the brand colors, images, and copy write, but also with significant improvements in visual clarity and usability.
Testing
After conducting user testing through Monkey Survey, I gathered feedback from 10 college students on both quantitative and qualitative questions. This feedback let me make some refinements to the designs, addressing usability issues and some user preferences.
Final Product
Takeaways
Friendly faces are really important to get the attention of prospective students. Also, representation really matters, so showcasing diverse people is really important to expand the search for future students, but also to align with what Cañada College is all about.
Negative space is as important as positive one. The two go together at all times. Is really important to give room to a design to breathe, so users can digest the information in a more efficient way.
Crucial to design thinking as a developer. A good amount of creative ideas are limited by web standards and coding languages, so it is important to always have a realistic design that aligns with both parts of the process.