Inspiration

For our data portal, we turned to Stanford Open Data Portal and the Open Data Handbook to get up to speed with what a data portal is and how to build one.

Visually, we looked to the branding of Delaware State University to ensure our design is in line with the university’s. We chose this approach to create a sense of familiarity with an existing brand.

Team Members

Alejandro Ramos - data management and backend Brandi Nichols - frontend wireframing and design, copywriting Vishnu Nandyala - frontend development

What it does

  • Provides access to datasets in machine-readable format
  • Allows users to submit their own datasets for others to use
  • Provides tips and resources to encourage others to dive into data

How we built it

Data Collection

  • Sourced datasets from Delaware State University’s Fact Book
  • Scraped data using Tabula and cleaned using Microsoft Excel
  • Stored metadata in a spreadsheet
  • Wrote a python script to convert metadata spreadsheet from csv to json locally.

Backend

  • Set up an AWS S3 bucket to store datasets and metadata
  • Created IAM user accounts with the ability access and add datasets. This is important to ensure datasets don’t get deleted and establish integrity of the organizations over time.
  • Use React to access datasets and display on the front end

Design Approach

  • Ideation and Inspiration: Viewed the Stanford Open Data Portal and other data portals to better understand what was most efficient for the information architecture of a data portal Planning: Transitioned from sketching wireframes to creating a digital wireframe prototype
  • Logo design and Colors: Created logo design based on need for modernity and trustworthiness for users. Blue was chosen as a primary color because it portrays a trusting and calming environment for the user. This was important being that digital spaces and information can be harmful or misused. Red was used as an accent color because it was needed to display affiliation with DESU. The various shades of blue did not show affiliation with DESU, therefore the red was needed for the official and established connection with Delaware State University. Simplicity or modernity was utilized to not overwhelm the user, whomever they may be and encourage exploration and discovery of our data.
  • Result: Final prototype and digital wireframes were created in Adobe XD

Frontend

  • Used React build to connect to the backend

Challenges we ran into

  • Connecting the front and back end
  • Figuring out how to manage access to data storage
  • Trouble getting the site to deploy successfully
  • Limited frontend and React experience

Accomplishments that we're proud of

  • Seamless prototype = simulated easy access to and interaction with data
  • Brand consistency with school logo → strong school affiliation = user trust in data and our organization
  • Setting up a serverless backend with admin accounts to data storage and access
  • Building a data portal virtually with people I just met! A great overall experience to get to meet and create something with this team

What we learned

  • The process of setting up a website from start to finish
  • What Amazon Web Services offers for backend setups

What's next for DESU Open Data Portal

  • Formalizing the data portal by establishing a connect with a department at Delaware State University
  • Adding a wider variety of datasets that go beyond the university
  • Encouraging community members to get involved or submit their own datasets
  • Adding tools to allow users to create visualizations in browser

Built With

Share this project:

Updates