Vignelli Center for
Design Studies
The primary objective was to design the website for Vignelli Center for Design Studies. By designing the user flow, content structure, user interface, visual elements based on Vignelli's design principles, I wanted to elevate user experiences in visual communication, navigation and usability.
My...
Role
UX Researcher
Interaction Designer
Visual UI Designer
UX Designer
Methods
Interviews
Prototyping
Usability Testing
Deliverables
UX Documentation
Adobe Muse prototype
HTML/CSS template
Launch website
Software
Photoshop
Illustrator
Indesign
Muse
Introduction
The Vignelli Center for Design Studies, is located in the Rochester Institute of Technology’s campus in Rochester, NY. It is home to the archives of Massimo and Lella Vignelli. The primary purpose of the Vignelli Center is education. On a grand scale, this facility enhances many educational programs by promoting the important Modernist design values of the Vignellis.
LOGO
Home page
Other pages
TYPOGRAPHY
- Home page
- Navigation memus
- Titles of contents
abc
Helvetica Bold
abcdefghijklmnopqrstuvwxyz
ABCDEFGHIJKLMNOPQRSTUVWXYZ
1234567890!@#$%^&*()
- Contents
- Sub menus
- Brief Instroduction
abc
Helvetica
abcdefghijklmnopqrstuvwxyz
ABCDEFGHIJKLMNOPQRSTUVWXYZ
1234567890!@#$%^&*()
COLOR
#000000
- Logo
- Content
#FFFFFF
- Active menus
- Brief information
#4C4C4C
- Navigation menus
- Titles of contents
- Footer
VIGNELLI
SIGNATURE
RED
#FF381D
- Active
- Home page
- Drop down menu
- Sub title
- Rollover
#0066EB
- Click-able
URL link
#7F7F7F
- Inactive
ICONS
Icons designed for Podcasts. Each size is 300pt x 300pt
I regularly met with the staff from Vignelli Center for Design Studies to get feedback and comments. Based on the basic page layout and grid system, I applied different color scheme and layouts to achieve the most ideal visual effect. Below are two visual designs on the early stage.
Sample 1
Critiques: - Too much space in header, lack impact
- RIT needs to be mentioned in header
- Different visual style of social media icons,
lack consistency
- Drop down menu indications are too busy
- Navigation bar can be longer to divide header,
Sample 2
Critiques: - Low legibility of logo
- Less impact of logo
- Highlights news session is too busy
- Non necessary of footer contents
- Ambiguous background color
In the progress
• Drop down menu
• Info and date information
• Mouse hover effect
• Search bar
• Sub menu indication
• Back to top
• Share
Mock up website: http://vignellicenter.cias.rit.edu/
What is a the difference between a native mobile app with responsive website?
Native mobile app
• A mobile centric experience
• Existing and the most loyal users
• Better user experience
• Incorporate the smart phone capabilities
• Notifications
Responsive website
• An optimized experience
• New visitors
• Browsing general information
• Discovering it for the very first time
“Build both a responsive website and a native mobile app in order to help reach towards capturing the attention of entire mobile audience.”
Wireframe
UI Design
- Mark as favorite
- Browse classified information
- Browse design conversations
- speaker by years
- Effective navigation
- Share events
- Add to calendar
- Download podcasts
- View transcript
Testing and iterations
Modification
The Vignelli Center for Design Studies serves as a very important educational center by extending the important Modernist design values of Massimo and Lella Vignellis. After five years of establishment, founded in 2011, now is the time to re-evaluate the communication needs for the Vignelli center. The objectives of this project was to redesign the website and create ideation for a native mobile app that will enable the Vignelli Center to expand its reach and build a powerful connection to the audience.
The target audience included students and faculties from RIT and general visitors. Out of 22 users I interviewed, including 13 students, 4 faculties and 7 visitors, 87% thought the original website was structural confusing, 94% considered the original website was hard to navigate and 96% expressed they felt disappointed due to the lack of elegance and taste of Vignelli's design style and principles.
The interview helped me identify the problem that I needed to address. Three persona were created to better understand different scenarios and goals of users. I realized that the majority of the pain points occurred due to the lack of consistency from page to page.
Persona 1 - Faculty
Britney Herranz, 41
Professor in Design
Department from RIT
Scenario
A positive, complementary relationship between the Vignelli Center and its website is extremely important for the Center’s professionalism and potential visitors. The current website of the Vignelli Center, however, not only lacks a visual identity to reflect Massimo and Lella Vignellis’ design spirit, but also has inadequate usability and utility to present information.
Goals
- Efficiently organize and archive the events, collections, projects and exhibitions in Vignelli Center for Design Studies
- Easily share contents to multiple audience
- Highlight and remark the important contents and information
- Inform and communication with students and guest speakers
Persona 2 - Student
Christine Cai, 22
Design Student from RIT
Scenario
Christine is an industrial design student at RIT. As a design student, she is always willing to going to the exhibitions and design conversations in the Vignelli Center for Design Studies from time to time. She can always get inspired and enlightened by communicating with different designers and speakers. However, sometimes she missed the speeches or events because she couldn’t find relative information in time from the website of the Vigenlli Center and sometime she had to skip the events because she had classes to attend.
Goals
- Upcoming events reminder
- Abstract of each past events to review later
- Save contents and works for the future reference
- Share to social media
Persona 3 - Visitor
Julia Parsons, 46
Creative director in a local mobile design firm.
Scenario
Julia is a creative director, working at a local mobile design company in Rochester. She has been always admired Massimo Vignelli for his legendary design works and wants to bring her design team to visit the Vignelli Center for Design Studies to take a look at some famous works of Massimo Vignelli. She has only been to RIT once and already forgot the exact location of the Vignelli Center. She is also willing to check the opening hours and make an appointment on-line to take a tour in the upcoming weekend.
Goals
- Check hours, location and contact information on-line
- Make an appointment ahead of her visiting
- Browse Massimo Vignelli’s work on-line
- Parking information
The interview result helped me understand that a positive, complementary relationship between the Vignelli Center and its website is extremely important for the Center’s professionalism and potential visitors. The current website of the Vignelli Center, however, not only lacks a visual identity to reflect Massimo and Lella Vignellis’ design spirit, but also has inadequate usability and utility to present information.
Based on the research, It is important to design a new website that can demonstrate Massimo Vignellis’ design style
and principles while simplifying the process of perceiving presented information. By using the new website, users will be able to look up information of past and upcoming events more efficient. The Massimo Vignelli’s extensive professional archives, including primary source material and finished works, which is housed by the Vignelli Center will be recorded and organized in a professional way on the website for users to browse.
VIGNELLI'S DESIGN PRINCIPLE
After researching Vignelli's published books and teaching documents the goal became to enmesh Vignelli's design principles and spirit into this website. The majority of inspiration came from his books: "THE VIGNELLI CANNON", "Vignelli from A to Z" and "Design is one". The result of this inspiration is a harmonious relationship between the various syntactical elements in this website, including grid, typeface, text, headline, illustrations and photos.
I also created flow chart in Adobe Muse for live prototyping
Following Vignelli's design style, texts stick to the left corner to create a tension.
A grid system was designed to organize the main construction. It serves as a solid foundation to keep a consistent layout for each page.
User Interface design for website
Wireframe and grid systems for responsive interface were designed to ensure the website integrated into various platforms and deliver a better user experience.
User interface design for responsive website
© All Copyrights Reserved by Hui Xu