Visual Design | Interaction Design
Hudl puts on an event called Skunkworks -- three days for the product team to work on nearly anything they'd like -- twice a year. Some groups focus on an innovative idea, whereas others just want to experiment with new technology or learn new skills. My group fell into the latter category -- the group was largely comprised of devs who wanted to experiment using GraphQL subscriptions by building a chat app. Since this was merely a way to get familiar with the technology, the app would have minimal functionality, and didn't need to be built for any real purpose. Since I enjoy experimenting with gradients and bold colors, I suggested we create a space themed chat, creatively named "Space Chat."
As mentioned in the background section, the app was meant to be very minimal, and it would need quite a few additional features in order to be enjoyable to use. Below are the supported workflows.
- Log In or Sign Up from the same workflow (no authentication).
- Create an avatar.
- Join a channel.
- Toast notifications when an individual joins a channel.
- See when others are typing.
- Create a channel.
As authentication was out of scope, upon entering your call sign the app checks if a Call Sign exists, and then logs you in as that Call Sign or creates a new Call Sign accordingly.
Choose an Avatar
Storing user-uploaded images was out of scope, so users are prompted to choose an avatar from a list.
Empty State, Option One
User Joined Channel Toast
Empty State, Option Two
Chat & Is Typing State
Creating any metadata such as a description was out of scope, so channel creation is kept simple by using a text input on the channel view.
- Icons are from the Space Icons Set by Agata Kuczminska, though colors have been altered to fit the color scheme.