DJ Interface and SportsCast

A couple of web apps I created to enhance the listener experience for our beloved radio station.

WVUM has a robust lineup of DJs and shows, coming on at all sorts of odd and even hours. People out there need to know who's spinning! Enter the aptly named:

DJ Interface

This interface provides a simple 2-click setup for DJs to display their show on the website.

1. Select / search your show name in the dropdown
2. Click submit, and now the world can see you

It's written in lightweight HTML and JavaScript, and makes use of Google Firebase for the backend. It's deployable anywhere and currently hosted on our website so our DJs can even produce remotely.

The purpose is simple, but with our ever-rotating roster of both DJs and webmasters, it had to be easy to use and maintain. And it is!

SportsCast

WVUM is also the premiere destination for UM sports listening. To enhance the fan experience, we wanted to show real-time game info, and we've done just that.

The needs were similar to the DJ interface: a simple UI so that minimal training is required for our casters, and of course the public-facing side has to be instantly readable. The execution was a bit more complicated, though, because we wanted record keeping as well - not just instantaneous information.

I initially created it in PHP, before coming to the numbing realization that our website CMS did not support it. So, I restarted from scratch, this time using the same trusty Firebase methods as our previous interface (just with a much more complex database now). And it was another success! Another easily packageable/deployable, lightweight JavaScript app.

The main functionality is finished, but work is still ongoing. The roadmap has more game info options in the pipeline. You can check the progress on Github.

I loved these projects. I got to go through the entire design and build process for each, getting to work both my technical and creative muscles. You can still see them in action at wvum.org/listen.

GeoMuse Prototype

An exercise in design.

This was a fun project to create a mockup of a mobile app being created at UM. The function is to aid users in exploring an area - UM's campus in this case - for art. Being only a prototype, I was able to focus solely on design and UX.

Sketches

Wireframes

I prioritized ease of navigation. The app is meant to be a complement to the larger activity of sightseeing and exploring. That meant there should be no digging required to find any information. Nothing in the app is more than 2 screens deep, and there is always lateral movement available with no dead ends that require users to back out to switch screens.

I also had consistency in mind. I sought to keep the layout similar or identical where possible among different screens, so that even when performing different actions there is minimal attention/learning required. I wanted to make clear where the user is at all times and to keep the information layout and hierarchy as simple as possible with minimal layers.

If you use a wider viewport, you can try an interactive prototype!

Interactive Prototype

Ye Olde Barre

A 3D bartending game with a custom controller.

This project was something way out of left field for me. It was my first real foray into Unity and games in general, as well as into physical computing. At this stage, it's mostly a proof-of-concept. I do plan to use this as a foundation to build a more complete experience in the near future.

The game includes liquid simulation to allow the player to pour drinks, add some garnishes, throw things, and mix strange colored liquids. I was hardly comfortable with Unity and C# coming in, but really built up some chops through building these interaction systems and the environment.

After building this virtual experience, I set out to create a physical controller for it using an Adafruit Circuit Playground Express. I put together a contraption out of cardboard, tape, 3D-printed parts and hot glue that would allow the user to point at and manipulate objects in the game.

From a pragmatic perspective, I could have stuck with mouse & keyboard, VR, or a gamepad with better results and a more accessible game. But in this case, I went against my practical UX instincts to make something just for the sake of it. I ascribed to the "because I can" mentality here, rather than the usual "keep it simple" and "make it useable."

Assets used

• Simple Liquid
• Arduino-Unity Communication Package
• Tavern Assets
• More Tavern Assets
• Procedural Cables
• Fruit models
• Bubble Effects

Web Studies

Mini web design experiments.

These are some small projects I've created either for a course, to study a new concept, as a piece of a larger project, or for fun.

CSS Grid Art

See the Pen CSS Grid Art by bryantconrad (@bryantconrad) on CodePen.

Practicing everyone's favorite tool, CSS grid. A cute dog graphic created entirely in grid. It's even interactable through jQuery!

jQuery Slides

See the Pen jQuery Slides by bryantconrad (@bryantconrad) on CodePen.

A quick & dirty sample website layout I made, mostly to play around with jQuery to make sliding covers.

Circle Animations

See the Pen Circle animations by bryantconrad (@bryantconrad) on CodePen.

The first draft of the initial logo animation you saw on this site! Based on Katherine Beherec's Circle Fill animation.