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

19
MSU Libraries Color Study Daniel, Irfan, and Nick AL 366: Managing Experience Architecture Projects

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

Page 1: MSU Libraries Color Studybedichda/img/portfolio... · Prompt Identify the impact of color on the Libraries home pages. On the Main Libraries’ home page. There are some boxes that

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

Page 2: MSU Libraries Color Studybedichda/img/portfolio... · Prompt Identify the impact of color on the Libraries home pages. On the Main Libraries’ home page. There are some boxes that

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.

Page 3: MSU Libraries Color Studybedichda/img/portfolio... · Prompt Identify the impact of color on the Libraries home pages. On the Main Libraries’ home page. There are some boxes that

Our Process● Initial Research

○ Proto-Personas, Hypothesis, and Proposal development.

Page 4: MSU Libraries Color Studybedichda/img/portfolio... · Prompt Identify the impact of color on the Libraries home pages. On the Main Libraries’ home page. There are some boxes that

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.

Page 5: MSU Libraries Color Studybedichda/img/portfolio... · Prompt Identify the impact of color on the Libraries home pages. On the Main Libraries’ home page. There are some boxes that

Our Process● Initial Research

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

○ Initial reactions and optional surveys.

Page 6: MSU Libraries Color Studybedichda/img/portfolio... · Prompt Identify the impact of color on the Libraries home pages. On the Main Libraries’ home page. There are some boxes that

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.

Page 7: MSU Libraries Color Studybedichda/img/portfolio... · Prompt Identify the impact of color on the Libraries home pages. On the Main Libraries’ home page. There are some boxes that

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

Page 8: MSU Libraries Color Studybedichda/img/portfolio... · Prompt Identify the impact of color on the Libraries home pages. On the Main Libraries’ home page. There are some boxes that

Our findings: Mental Model

Page 9: MSU Libraries Color Studybedichda/img/portfolio... · Prompt Identify the impact of color on the Libraries home pages. On the Main Libraries’ home page. There are some boxes that

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.

Page 10: MSU Libraries Color Studybedichda/img/portfolio... · Prompt Identify the impact of color on the Libraries home pages. On the Main Libraries’ home page. There are some boxes that

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.

Page 11: MSU Libraries Color Studybedichda/img/portfolio... · Prompt Identify the impact of color on the Libraries home pages. On the Main Libraries’ home page. There are some boxes that

Iterative design process

Page 12: MSU Libraries Color Studybedichda/img/portfolio... · Prompt Identify the impact of color on the Libraries home pages. On the Main Libraries’ home page. There are some boxes that

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.

Page 13: MSU Libraries Color Studybedichda/img/portfolio... · Prompt Identify the impact of color on the Libraries home pages. On the Main Libraries’ home page. There are some boxes that

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

Page 14: MSU Libraries Color Studybedichda/img/portfolio... · Prompt Identify the impact of color on the Libraries home pages. On the Main Libraries’ home page. There are some boxes that

Iterative design process

Page 15: MSU Libraries Color Studybedichda/img/portfolio... · Prompt Identify the impact of color on the Libraries home pages. On the Main Libraries’ home page. There are some boxes that

Original Composition

Page 16: MSU Libraries Color Studybedichda/img/portfolio... · Prompt Identify the impact of color on the Libraries home pages. On the Main Libraries’ home page. There are some boxes that

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

Page 17: MSU Libraries Color Studybedichda/img/portfolio... · Prompt Identify the impact of color on the Libraries home pages. On the Main Libraries’ home page. There are some boxes that

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

Page 18: MSU Libraries Color Studybedichda/img/portfolio... · Prompt Identify the impact of color on the Libraries home pages. On the Main Libraries’ home page. There are some boxes that

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

Page 19: MSU Libraries Color Studybedichda/img/portfolio... · Prompt Identify the impact of color on the Libraries home pages. On the Main Libraries’ home page. There are some boxes that

Questions?