MOCK UPS Synthesized thru web team discussions Leadership Team Meeting: 10/28/2013 Jesse Woo RCSB front end developer

Context •  Within web team, members summarized elements they “liked” and “disliked” of

regularly visited sites and members created “imagined” mockups of the RCSB PDB. •  These hi-fi designs are inspired from the team’s feedback and discussions. •  The hi-fi mockups presented are not final. •  Much discussion still needs to happen.

•  There are FOUR designs. •  You might like certain elements from design A & like other elements in design B. •  “Pick and Choose” process. •  Specific Web content will be defined/updated later with help from our outreach team. •  Please focus on the following: layout, information architecture, meeting goals. •  On to the FOUR design mockups…

Mockup 1 E-Commerce

•  Top bar navigation (All)

•  Deposition is prominent •  Inspired by Amazon and other E-

commerce sites – two column layout (EP, AP, CZ)

•  Carousel to display different features, information located in one area. Just enough moving content (MG)

•  Explore section: new icons replace “pie charts”, clarity

•  Larger images to entice users to explore, bring about interest

•  Web content similar to what we currently have, but ordered, giving boundaries and structure.

Mockup 2 Compact Header / 6 Actions

•  Compact navigation and search bar (PR)

•  Layout with 6 top actions sections that leads to HUB pages (MZ, MG, PR)

•  “Bold” buttons guiding user to core functions of the site (PR)

•  Responsive site (PR)

Mockup 3 3 Content Columns

•  Top bar navigation (All)

•  Search bar is prominent (AP)

•  Three column that has features, 6 actions for targeted users, and dynamic content

Mockup 4 Large Masthead

•  Top bar navigation (all) •  Banner to show all

structures PDB has in databank (PR)

•  Large images like marketing sites (CZ)

•  Search bar inside the banner (CZ)

•  No special plugins, no flash, no startup videos

•  Carousel will start based on user clicking on thumbnails (EP)

OPEN DISCUSSION Next steps…

EXTRA Secondary & Tertiary Pages

Mockup v1 Browse Fly out window

•  Browser fly out window useful for users who are new to our site, don’t know exactly what molecule to look for – similar to Amazon (CZ, AP)

Mockup v1 Search Results Page

•  Left hand section used to filter search results similar to Amazon, J.Crew, Zappos (MZ, CZ, AP)

•  Given the long list of search results, results half will scroll while filtering half is locked in placed (MG)

Mockup v1 Structure Summary Page

•  Structure Summary Pages similar to the product pages of E-commerce sites like Amazon, Zappos (CZ, AP)