Skip to Main Content

transportation open knowledge network (okn)

fall 2019/ winter 2020 - ui/ux design


okn login page

Login page mimics other login pages and includes login and sign up buttons. Can still access navigation bar options (about, contact) which should be the same for public and private. Users can log in with ORCID details.

okn search result page

Includes filter options to refine search. Ideally, there is an advanced search interface as well.

okn use case page

Map (or data visualization) with a sidebar for filter toggles and auto-populated information. This page includes a back button which takes users back to the Use-Case’s main informational page (shows authors, abstract about data, etc.)

okn use case result page

Metadata. Abstract (extracted if the result is a report or article) about the data, an overview of the team members involved (as well as links to their profiles), and a preview of the data visualization, map, or report. Page can be expanded to include references made by the project as well as other projects that referenced it.

okn profile page

Base informational profile, list of uploads, list of teams. Fields like name and email should auto-import if they’re being derived from ORCID.

okn user's search page

Kept this base design similar to Amundsen’s design, but offered a way for users to also see their own datasets too. Base interface organization prioritizes user preference and activity.

My role as a UI/UX designer entails creating designs for site layout and interaction. I used Adobe XD to create mockups. In addition to interface design work, I also work to create visualizations and other materials such as slide decks that are used to help the team understand the project scope, user group, etc.

design features

  • user logins for different user groups
  • data visualization pages for different use cases
  • search interface with filters and result customization