Chalk

Interaction and Visual Design

Summer 2019

Project

I worked with Chalk for approximately three months during the spring and summer of 2019 to design the core user experience for their upcoming iOS application.

Role

The team for this project was comprised of Chalk's Co-Founder/product manager, an iOS engineer, and myself - assuming the role of product designer.

I was responsible for design ideation, iteration, prototyping, and high fidelity mockups throughout all stages of the project, and worked both independently and with the team in their SF office.


Problem

The core messaging user experience was powerful but overly complicated, proving difficult for new users to learn and tricky for power users to control. This was something that Chalk found in their initial user testing, and I was able to confirm as I tried to understand the app.

Goal

The goal of this project was to simplify and make this core user experience component more intuitive to learn and more efficient to control.

Solution

Chalk's value proposition was found in the three core modes of communication in the app.

In Text mode, the app functions similarly to your standard messaging application. Users can send and receive text messages.

In Listen mode the user still sends text messages, but can hear their friends speaking via the phone's speaker or headphones.

In Talk mode the users microphone is on and they can communicate via voice for rapid fire group conversation.

In addition to these three modes, there is an anchoring setting that allows the user to lock the app in listen mode for a set period of time, even while in the background.

My final solution reworked the interaction model to feature a primary action button in the bottom left corner of the screen that served as a method of accessing the modes of communication.

When a new mode is entered, a contextual button would appear next to the action button to let the user control settings specific to the current mode such as anchoring time in listen mode and muting in talk mode.

Other data driven details of the reworked UI/UX include rings around the group avatars to indicate other users’ active modes, colored message bubbles to further provide context on what mode the user is currently in, as well as a redesigned header to better comply with mobile design standards.

My design decisions were arrived at largely through qualitative user testing data and you can read more about my process below.


Process

Through discussions with Chalk, I learned that the most important user to design for was the late teenager/early 20 something group chat user who was always attached to their phone.

Ideation

I began making some quick sketches with a “no idea is too crazy” type mindset and through discussions with Chalk, narrowed the ideas down to a more practical set.

The primary interaction models I would focus on from here were the action button model, full screen swipe model, and volume slider model that you can see above.


Prototypes

From these sketches I quickly jumped into some higher fidelity interactive prototypes to gather qualitative user testing data and better communicate ideas to stakeholders.

User testing these prototypes brought some important learnings to the forefront. The volume slider model was discoverable, but was initially a bit confusing to users. The full screen swipe was not highly discoverable and conflicted with many common iOS gestures already ingrained in users. Finally the action button model had decent discoverability, but would require some tweaking to have better usability.


Decision Making

From these prototypes I lead the team in a decision making graph.

This graph plotted each idea in terms of how easy it would be for users to adopt against how well it would fit in Chalk’s development timeline. From my user testing and the teams best estimates, the action button model was show to be the winner.


High Fidelity Details

From here I began developing some high fidelity mockups and working on details such as the icons for the modes.

Through a handful of iterations these details came together to form the final product discussed in detail above.

Designed and Developed by Gavin Nelson
© 2020 Gavin Nelson