Galaxy

AnswerRocket’s first design system

The landscape

As an engineer-driven data analytics startup, AnswerRocket has been functioning on its backend capabilities since conception. They were in need of UI and UX help to make their experiences refined, beautiful, and easy to use. To do this, we needed to first ground ourselves in a design system that would create unification across the platform and a fluid experience for end users.

The challenge was to build AnswerRocket’s first-ever design system in a digestible way for a mid-sized startup. I worked alongside a freelance UX/UI designer and a product manager. Additionally we involved a lead engineer to get feedback on application.

Project Overview
Cadenza is a platform that connects artists and fans in real time through curated, high-quality live-streamed performances. The founders of . S discovered a demand from music fans to experience a more intentional connection to their favorite artists and set out to discover ways to bring them together.

My Contributions

  • Lead product designer working alongside the Head of Design. The startup was a team of seven.

  • The product lifecycle spanned two months from conception to delivery.

The blueprint

The idea of a fan-to-artist live chat was at the center of the Cadenza product, but had yet to be designed and tested. The Head of Design and I aimed to uncover concert goer motivations and artists’ appetite for fan connection during a live show.

I conducted qualitative interviews with 10 livestream fans (current Instagram Live and Reddit users) who walked me through their chat and live experiences. Interviewees ranged from ages 18 to 42 located in a variety of major US cities and small towns.

From testing, two key insights emerged that would drive our design process:

  1. Users want the ability to support other comments that they like or believe in.

  2. Users like options for how they view comments.

Affinity Mapping

We studied responses from our customer interviews and grouped them together through affinity mapping. This highlighted some of the most important features that customers desired to see in their live feed experiences. Of these desires, the ability to sort through comments efficiently and easily was a top priority.

Competitive Analysis

Examining other features and experiences across the live stream product industry, I compared product capabilities from Reddit for its famous chat capabilities to Instagram Live for its streaming feature.

To succeed in a saturated landscape, we needed to include all of the features performing well across competitors and more. Combining comment voting and filtering from Reddit with comment liking and profile personalization from Instagram and Facebook Live, we’re able to provide the familiarity of other live channel experiences.

create an engaging chat experience for users who crave connection with their favorite artists?

HOW MIGHT WE

Sketching the vision

Based on findings from user research, I generated two design solutions for our MVP feature.

1. A Cadenza live stream user can submit a thoughtful question to the artist during the show that will be answered during the Ask The Artist show breaks

2. A Cadenza user can upvote another user's question to promote its likelihood of being selected by the artist.

I played around with what live engagement meant in the context of our product. I sketched out several iterations considering interaction from the customer and artist POV.

Simplicity is key in the loud (no pun intended) dynamic of live streams.

Wireframing

After collectively deciding on the most efficient designs for our MVP, I began blocking out the live stream experience in its entirety as our CEO wanted a fresh look for the entire live stream experience.

Since we were focusing on the chat feature for the MVP, I looked at a few different options for where future features would live, noted as Cards and Widgets in these designs.

Visual exploration

Chat variations

I pursued 3 visual treatments for the chat upvoting and downvoting experience. Through usability testing and human-centered design principles,

we opted out of using green or red for like or dislike as these generally indicate a user's action has succeeded or failed, not a preference.

The finished product

Final Assets

After refining our visual choices and iterating on the design further based on feedback from my design lead, I refined and delivered the final designs for desktop and mobile web.

Next Steps

Once the product launched, we aimed to gather feedback from show attendees by distributing an experience survey. Based on those insights and our performance metrics, we can update our designs to meet the needs of users and the business.