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

IDEATION

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

Prototyping

Mock up website: http://vignellicenter.cias.rit.edu/

Mobile app

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

Situation Analysis

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.

Target 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
Define Problems

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.

Design Insight

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.

User Flow

I also created flow chart in Adobe Muse for live prototyping

Wireframe

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

APPLICATIONS

© All Copyrights Reserved by Hui Xu

 

 

The primary objective was to design the official website for Vignelli Center for Design Studies.

My goal was to reorganize the current contents and design interface based on Vignelli's design principles and grid system to elevate user experiences in visual communication, navigation and usability.

 

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.

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 regularly met with staffs from Vignelli Center for Design Studies to get feedback and comments.

Based on the basic page layout and grid system,

I applied different color arrangement and layout adjustment to optimize the most ideal visual effect.  Below are two visual designs on 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

DESIGN ELEMENTS

- Home page

- Navigation memus

- Titles of contents

abc

Helvetica Bold

abcdefghijklmnopqrstuvwxyz

ABCDEFGHIJKLMNOPQRSTUVWXYZ

1234567890!@#$%^&*()

- Contents

- Sub menus

- Brief Instroduction

abc

Helvetica

abcdefghijklmnopqrstuvwxyz

ABCDEFGHIJKLMNOPQRSTUVWXYZ

1234567890!@#$%^&*()

#000000

#FFFFFF

- Logo

- Content

- Active menus

- Brief information

VIGNELLI

SIGNATURE

RED

#FF381D

#4C4C4C

- Active

- Home page

- Drop down menu

- Sub title

- Rollover

- Navigation menus

- Titles of contents

- Footer

#7F7F7F

#0066EB

- Inactive

 

- Click-able

  URL link

 

DESIGN PROCESS

Following Vignelli's design style, texts stick to the left corner to create a tension.

Navigation bar

Information block

A grid system was designed to organize the

main construction. It serves as a solid foundation
to keep each page layouts consistent.

PROTOTYPING