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
- adobe-xd
- amazon-web-services
- google-sheets
- json
- python
- react
- tabula

Log in or sign up for Devpost to join the conversation.