Kyle Burkhardt, Lead Data Annotator The RCSB PDB at Rutgers University
MOCK UPS - jessewoo.github.iojessewoo.github.io/pdf/rcsb/20131025_HomepageMockup.pdf · Context •...
Transcript of MOCK UPS - jessewoo.github.iojessewoo.github.io/pdf/rcsb/20131025_HomepageMockup.pdf · Context •...
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)