Space Chat Preview.png

Space Chat

Visual Design | Interaction Design

Background

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."

Scope

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.
  • Chat.
  • See when others are typing.
  • Create a channel.

Landing Page

Desktop HD.png

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

Avatar Picker.png

Storing user-uploaded images was out of scope, so users are prompted to choose an avatar from a list. 

Empty State, Option One

Empty State 1.png

User Joined Channel Toast

Empty State, Option Two

Empty State 2.png
Toast.png

Chat & Is Typing State

IsTyping.png

Create Channel

Create Channel.png

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. 

Sources

  • Icons are from the Space Icons Set by Agata Kuczminska, though colors have been altered to fit the color scheme.