SVA MFA Product Design Site Redesign
Role: UI/UX Designer | Team: Esther Kim, Allan Chochinov, The Collected Works | Duration: 3 months
Project Summary
The SVA Products of Design website is a site that aims to inform prospective students about the program, and efficiently lead them to the most important points of information, including the unique offerings of the program, curriculum, and ultimately to the apply page.
Design Challenge:
A few of the main problems we had to tackle were the accessibility of the site, as well as the information hierarchy and overall visual design.
Solutions:
Through rounds of design system evaluations, consultations with SEO experts, and rebranding, significant improvements were made to the website to satisfy ADA compliance, create a more modern aesthetic, and provide a more user-friendly experience.
Design Process:
Design System Evaluation
For the initial phase of the project, I conducted a site audit and design system evaluation. From this, I curated a list of issues that we would have to address in the redesign process. A few of the main problems found are listed below:
Site Mapping
Based on the evaluation and competitive analysis, I briefly built out a site map to visualize an optimized organization and information architecture for the site. This provided a great framework to go off of as I designed new layouts and reorganized the information throughout the site.
Initial Ideas
Prior to entering the design phase, I drafted up some recommendations and suggestions to present to the client. The list below does not cover the entirety of suggestions, but covers the main points we addressed.
Style Guide
One of the difficult parts of this project was determining the new colors and typeface for the site. The client and I discussed possibilities of an entire rebrand, but eventually we decided to keep to the original branding with some minor adjustments.
Initially, we considered a more playful, rounded font since the department advocates for unbounded creativity and exploration. However, we opted for a more structured font of Inter to keep a clean, professional look. To hint at the creativity and also the incorporation of technological aspects in the program though, we opted for PP Supply Sans for H1’s and H2’s.
Color was difficult to finalize, taking into account the current brand identity of the site, along with WCAG compliance. The primary brand color for SVA MFA Product Design is orange— however, the current shade, as well as many shades of orange that the client and I both liked did not pass WCAG compliance. Other colors were considered, but we both felt that the department was not ready for a rebrand, and thus we landed on #FF5901.
The final design style guide can be seen below:
Wireframing
Finally, we entered the design phase. A few weeks were spent on building out Lo-fi wireframes, focusing on organization and information architecture. Once those designs were approved, I delivered Hi-fi wireframes which were then migrated over to the live Squarespace site upon approval. Multiple rounds of design reviews and revisions were conducted.
Lo-fi Wireframes:
Hi-fi Wireframes:
Final Reflections
Throughout this whole design process, I learned a lot about the dynamics of working directly with a client, and the how pitching ideas and design reviews work. I also got to work with an SEO expert throughout this process, which was very insightful in understanding the importance of adjusting designs and layouts to optimize SEO.
Being my first solo freelance UX Design project, I was very satisfied with the final product as well as the lessons I learned along the way.