Globall - Baseball Hack Day 2018

 

OVERVIEW

Globall was created during Baseball Hack Day Toronto 2018. Our team came together for the love of baseball. Baseball is not considered as much a global sport to the levels of say soccer or basketball. We wanted to showcase that the talents of baseball are growing outside the United States

PLATFORM

Desktop Web Based Application

TOOLS

React.js , next.js, node.js, Lahman DB, Sketch, Adobe Illustrator, Adobe Photoshop

SCOPE

1 day​

ROLE

The Globall Team

Frank Pinzin - Database Programmer / Specialist
Kevin LeClair - Web Applications Programmer
Jason Das - UX & UI Designer

The Challenge

Baseball Hack Day is a fun, friendly one-day hacking competition. It takes place in Boston, Montreal, Chicago, San Diego, and Toronto. It is the day where area baseball minds come together and see what cool projects can be created within a limited time. The project could be (but is not limited to) a tool, app, website, or data visualization. For the Toronto hack teams, we would have to present our final solutions to judges made of members of the Toronto Blue Jays front office and Rogers Communications.

Our team came together at this hackathon for the love of baseball. Baseball is not considered as much a global sport to the levels of saying soccer or basketball. We wanted to showcase that the talents of baseball are growing outside the United States, and that some of the greatest players have played for Major League Baseball.

The Solution

Using the Lahman Baseball Database, Globall maps out the birthplace of over 19,000 past and present players to ever play in Major League Baseball. It allows the user to see a high concentration of baseball players around the globe. It would allow you to filter by country, year of birth, key position played, and team.

We decided to execute Globall as a web browser-based application, for desktop and mobile devices. Due to the amount of time allocated for the hackathon, we opted to produce a desktop browser-optimized prototype.

Research & Process​

Comparative Analysis

We started looking at the specification sheets of the materials. There was a lot of variables, so we limited it down to key areas for the sake of time. We determined early that an intuitive search bar would be crucial. As a competitive comparison, we looked at Amazon.com and PC Partpicker. We internally wanted to create "The Amazon of Building Materials". PC Partpicker offered a price history comparison, that we wanted to adopt for OX.

Database & Search Functions

Creation of the database was done with JSON. As we started entering the database with noticed the compiling of data took long with real time search. For the sake of time we had to drop building out the client portal for entering into the database. Some information we wanted to include was not disclosed from Oxford. We had to create "dummy data" to fill in the gaps. Pricing was something that not disclosed as we learned about the process of procurement and tendering contracts in the construction industry.

Prototype & Pitch

We managed to put together a working prototype of OX. We filled our database to enable different scenarios for the materials. For instance what if a material was on low on stock? We added location of origin for materials, and possible discrepancies that would be displayed in analysis. Due to issues with server and coding bugs, the UI kit was not included in time for presentation. We then pitched OX to a round of judges. We also presented to some top executives at Oxford Properties, who saw some great potential in OX.

As our team was thinking of features for OX, we used the sticky paper method on a glass window to sort it out. Eventually I digitally recreated them as for referral for our team to use within Slack. Afterwards I created a basic user flow for the sections of OX, that needed to connect. It was a little tough putting ourselves in the shoes of someone in the commercial real estate sector. We debated if some features were necessary as an architect versus contractor.

Low & Mid Fidelity Screens

UI Design

For the sake of time and consistency, we modelled the look of OX to take cues from the current website for Oxford Properties. We wanted users to feel that they were in an Oxford work environment with familiar cues when logging into OX.

Visual designs we wanted to use stock images of past project constructions, as we knew OX would be lacking a lot of content. When it came to the materials, we wanted to keep the patterns like finishes, surfaces, and textures to a square aspect ratio. We knew some materials would need to break the 1:1 size, so product info pages would accommodate for larger images.

I pushed to use an oxen head for our logo for OX. OX was originally shortened from Oxford. As I was researching oxen, I learned they are used in the agriculture industry to haul materials around the farmland. This is kind of what OX is doing; we're hauling the building materials in one area to get a sense of cost and analysis.

As I was designing the UI design kit, our developers were running into issues with getting OX up and running certain code. We decided to keep it a bare-bone React UI.

Prototype

Using an existing Adobe XD UI Kit and referring to the Apple iOS Design System, I crafted these icons for usage. Specific colour combinations worked better than others but also required the use of Avante Garde Bk at a specific point size for legibility. Old milk jug crates inspired the logo. At the height of popularity with vinyl records, DJs would be ‘diggin’ thru the crates’ looking for records to sample beats and rhythms for new songs.

Conclusion

Key Takeaways

  • OX could potentially flag materials that are from regions with imposed government tariffs, or trade disputes.

  • Possible health and safety recall and inspection requirements needed for past construction projects.

  • The advancement of deep learning and artificial intelligence could play a big early factor in the concept stage.

  • Building a database of all Oxford construction projects with their material lists could create a more collaborative approach to future construction projects.

  • Key decision-makers particularly architects and contractors would require separate journey mapping.

  • There's potential we could develop an interior design application for smaller companies.

Results

After the completion of the hackathon and feedback from the selection of judges, we came away pleased with OX's potential. However, we needed to take into account that the current process of construction material procurement could hinder disclosing sensitive information. We hope to follow up with Oxford employees and construction industry professionals, to focus on user testing.