UI/UX design for a cyberinfrastructure ecosystem
Powerful cyberinfrastructure is required for 21st-century research and easy-to-use web interfaces are needed to use these tools.
After a successful web design and development project with the National Center for Supercomputing Applications (NCSA) at the University of Illinois, Q LTD was selected to design and build a new website and develop a comprehensive web style guide for ACCESS (Advanced Cyberinfrastructure Coordination Ecosystem: Services & Support) – an advanced computing and data resource supported by the National Science Foundation.
Background
An example of collaboration and coordination at its best, ACCESS is made possible by lead university partners – Carnegie Mellon University, University of Colorado Boulder, University of Illinois at Urbana-Champaign and the State University of New York at Buffalo – and their sub-awardee institutions, plus a host of resource provider institutions and organizations. Together these groups provide a powerful collection of supercomputers, visualization and storage systems, collections of data, software, networks, and expert support for scientists, engineers, social scientists and humanities experts across the United States.
Four ACCESS service groups provide researchers with allocations (time) on these systems, training and documentation, operations management, as well as metrics and statistics on current projects.
Very complicated. Yes! Coordination between all these entities is not an easy task. Our team worked closely with the ACCESS Coordination Office which facilitates coordination and communication across the project. An additional layer of complexity is that each service group has a separate website design and development team and each website has very different content needs.
The challenge
Providing a seamless user experience for ACCESS visitors across all areas of the project.
The solution
Working together with the ACCESS Coordination Office and the NCSA Communications team, our design and development team – Christine Golus, Matt Restorff, and Emily Cedar – dug into understanding how ACCESS functions. We provided a site map with easy-to-understand, intuitive labels and developed universal navigation that all service groups (separate subdomains) would use providing visitors with one-click access to the various websites.
Using the bright, modern ACCESS branding provided by the NCSA Communications team as our starting point, we then developed a user interface design for access-ci.org that integrated typography, color, and pattern into a bold, effective page layout. The home page includes questions visitors might have when they first come to the site: “How is ACCESS structured and organized?”, “How can I apply for time on ACCESS resources?”, etc. The user interface design includes standards for header, footer, breadcrumbs, and in-page navigation.
We then built access-ci.org on the WordPress platform using responsive development techniques and following Web Content Accessibility Guidelines – WCAG 2.0 Level AA standards – to ensure that the website is accessible to people with disabilities.
To bring continuity across the four service group websites, we provided a comprehensive user interface style guide. This included global navigation and global footer recommendations for the subdomain sites showing how the universal navigation and global navigation designs work together in both desktop and mobile states. In addition, we provided specifications for components such as tables, accordions, call-to-action elements, buttons, etc. as well as detailed page measurements for margins, columns, padding, and font sizes.
In addition, we coordinated a small analytics project for ACCESS. A shared Google Tag Manager code was installed across all subdomains so that all service groups can easily see basic visitor information and site analytics via a Google Looker dashboard.
The result
An integrated experience for ACCESS visitors and set of user interface guidelines that the various ACCESS service teams can use and build upon.
The design and build process for the ACCESS project continues to be iterative. As new needs surface, we provide design specifications that the various ACCESS teams review, approve, and implement.
Collaboration and a team approach were key to this project and continues to be critical to its success. Each ACCESS service group had key input and recommendations. It was important for our design and development team to listen, suggest, refine, and then gather alignment across teams. Again, not an easy task. In the end, our efforts are in service to the ACCESS researcher with the hope that access to these powerful cyberinfrastructure tools will aid their work and ultimately help us better understand our world and improve our lives.
See ACCESS News for scientific discoveries that ACCESS has enabled.
Visit our portfolio to see more of the work.