MSU Libraries Color Studybedichda/img/portfolio... · Prompt Identify the impact of color on the...

MSU Libraries Color StudyDaniel, Irfan, and NickAL 366: Managing Experience Architecture Projects

PromptIdentify the impact of color on the Libraries home pages. On the Main Libraries’ home page. There are some boxes that are white with a border and some that are grey. The web designer made the boxes that contain ‘ lesser ‘ content grey with the thought that it would fade and be less noticeable. However, we believe that because the background is white, that the white boxes fade and the grey boxes stand out.

We set out to design the composition that emphasized the most important content.

Our Process● Initial Research

○ Proto-Personas, Hypothesis, and Proposal development.

AssumptionsThe white boxes that contain the more important information are not as noticeable due to the white background. The grey boxes, because they are different from the white background, stand out and attract user’s eyes to the less important information first.

Our Process● Initial Research

○ Proto-Personas, Hypothesis, and Proposal development.● 5 second user surveys

○ Initial reactions and optional surveys.

Client’s Assumption ConfirmedUser testing provided the following conclusions:● The less important information should be moved to the white boxes, which

blends with the white background.● Grey makes the content’s container stand out. Therefore, the important content

should be placed there.

Our Process● Initial Research

○ Proto-Personas, Hypothesis, and Proposal development.● 5 second user surveys

○ Initial reactions and optional surveys.● Heuristic Analysis

○ Organisation and interpretation of feedback

Our findings: Mental Model

Analysis● The more contrast the color creates, the more attention it grabs.● The areas of the page that are more useful to the user.● The areas of page-focus dictated by the libraries’ eye-tracking studies.● Greater desire for an accordance with the MSU brand.

Our Process● Initial Research

○ Proto-Personas, Hypothesis, and Proposal development.● 5 second user surveys

○ Initial reactions and optional surveys.● Heuristic Analysis

○ Organisation and interpretation of feedback● Design Iterations

○ Multiple revisions per stack.

Iterative design process

Our Process● Initial Research

○ Proto-Personas, Hypothesis, and Proposal development.● 5 second user surveys

○ Initial reactions and optional surveys.● Heuristic Analysis

○ Organisation and interpretation of feedback● Design Iterations

○ Multiple revisions per stack.● Further usability tests

○ In-depth and initial response to design-comps.

User feedbackOrange links...attract my attention a lot

We all look at the grey content first

Show hours [ clearly ] so people will stop asking her ( Librarian ) about it

Make sure you keep the boxes aligned. We all like that better

I use the search bar the most

"Support the libraries" shouldn't be on the page because we already give this school so much money

[I] look towards the center first… the grey definitely draws my attention. As-is is the worst composition by far. I like the 2 line hours because of the grouping

Grey symbolizes disabled or unactivated

Iterative design process

Original Composition

Our resultsMSU green (heading) & 65% of MSU green over white (body).

Our recommendationsSingle-column with hierarchy corresponding to user-feedback. Below is the mobile version mockup.

RecapWith these new comps it accomplishes:● Conformity● Hierarchy of content with emphasis on important content● Quick easy mobile access designed around what people use most● This makes for improved content strategy, and an improved user experience

Questions?