Altair

I worked at Altair from July 2020 until March 2022 as Lead Designer, shaping the foundation of our design language and product.

Why Create Altair?

The founding members of our team all have a passion for gaming and the community surrounding it. Having experienced the potential for negative mental impact first-hand and through community members, we knew we wanted to help propose a solution.

Metrics are at the heart of streaming platforms and are forced upon users, often to their detriment — creators are under constant stress to increase their metrics and smaller channels are lost within the biased algorithm of discovery mechanics.

Our Approach: Mindful Design

Focusing on creating a platform that prioritizes the mental health of creators and their communities was one of our core principles, and we wanted to achieve this through a process of mindful design decisions. These would range from mechanics being opt-in by default such as analytics, memberships being non-auto-renewing by default and giving users control over both what data they publish and what they consume.

Design Process: Discover

I conducted foundational research, exploring the problem we were setting out to solve and to understand it better. This included one-to-one discussions with over 700 people across Twitter and our private Discord community.

I also carried out competitor analysis of both larger, established platforms and others that were growing alongside Altair in order to establish common patterns and areas for improvement.

Design Process: Discover

Alongside the qualitative one-to-ones, I conducted a series of quantitative research as part of our competitor analysis. I tracked key, global analytics where available to study trends in usage for competing platforms. This would confirm our assumption of global usage gradually decreasing, linked to the reasons learned in our qualitative research.

Design Process: Define

I collated data from our user research and distilled features from the results, using this to map out priority on our roadmap. Addressing these wants and needs up front would help us gain traction, offering features that potential users are actively looking for and features that are currently missing from the alternative platforms.

Design Process: Define

I curated the community feedback into a Figma document for reference and to serve as team motivation and inspiration to look back on as we progressed. If team members were having a bad day, they could look at this document for a reminder of all the reasons we were creating the platform for which really helped boost morale and motivation.

Design Process: Define

Taking results from our research phases, our team collaborated on creating detailed documents broken down per feature.

This documentation served to inform design decisions and requirements as well as assisting engineering with functionality. I worked closely with our Product Lead in establishing these documents and revising them as needed — we reviewed the documents as a team and suggested changes and improvements; these were living documents to refer back to whenever working on a specific feature.

Having documentation kept up to date was crucial for our distributed team as it meant anybody could work independently on tasks as needed, knowing the documentation for any given feature was current.

Design Process: Develop

Before creating any User Flows, we first wanted to understand our users more so I created a set of User Personas which spanned multiple user types such as Creators, Moderators, Viewers and Curators. These were based on real community members and members of our own team to ensure we were solving real problems for real people.

The reason for accounting for our different user types was to ensure that subsequent flows and wireframes could be designed for multiple users, each offering unique flows and features depending on what users identify as during onboarding.

Design Process: Develop

Once our product spec documents were fleshed out, I started creating User Flows and Wireframes for those flows in FigJam files.

The whole team was invited to collaborate on this step but I worked closely with our Product and Community Leads on establishing initial paths, sharing with our Discord community for feedback and iterating. I found that iterating during these early stages was much quicker and exploring these flows with user testing was a valuable step in the process.

Engineers being involved at this stage was also high on our priorities in order to help collaboration as much as possible — constraints informing our design decisions could be implemented from the beginning and engineers also got more of an understanding on intended functionality without having to wait for high fidelity assets.

Design Process: Develop

Once user flows and wireframes were all approved by the team, I moved on to start creating higher fidelity assets to use throughout the product and kickstart our design system. I started with taking an initial styleguide we had contracted a brand designer for which included colour and type recommendations and tweaked them to ensure an accessible base to create with.

I then created additional branding elements such as iconography to be used globally and components in a separate assets Figma document which was published across the team library. Separating components in their own structured document helped to keep high fidelity mockups performant and help engineers find what they needed much quicker.

I frequently worked with engineering during this step to establish our design system across Figma and Storybook, maintaining documentation and parity across the platforms. This made accessing our latest components easy for the whole team, safe in the knowledge that they were using the correct versions of the correct components.

Interaction Design & Prototypes

I created rich prototypes to show interactions that were shared both as part of our user testing and feedback processes as well as with engineering to help show nuances in our interaction and improve our design QA. Often these prototypes were interactive Figma presentations, allowing for users to directly provide feedback within Figma as well as through private channels. Other times, I created videos showing the interactions to focus on a specific mechanic we wanted feedback on or the smaller details for how an interaction should function to share with engineering.

Design Impact

After sharing our initial set of higher fidelity mockups, we saw a 300% increase in our Visionary user base. Our Visionaries were paying an ongoing monthly subscription as support which would be indicative of our estimated platform subscribers at launch.

Alongside internal feedback and discussions with our private community, we ran scheduled livestreams using the platform itself that I branded as Altairations as they served to publicly show updates and get user feedback on a larger scale to use when iterating. We saw an additional 200% increase in our Visionary user base after our first Altairation in which we showcased the platform in its current form and walked through all of our decisions to that point.

With the company unfortunately running out of runway a matter of weeks away from our first launch, we never had the opportunity to measure post-launch metrics and iterate on the product which was a shame for the whole team. This left us with only being able to measure potential metrics via design impact — the 500% increase in paying users would have seen us launch with a good forecast and hopefully would have set us up for success.

Feature: Registration

Keeping required fields to a minimum was a goal for registration, leading users to onboarding, post-creation instead of requiring up front. The only optional field we included during registration was for pronouns as it was a highly requested feature by users so we wanted to make it available as early in the process as possible.

We required multi-factor authentication to create accounts as a safety measure for users and the platform as a whole; this would help us filter out and deter bad apples and automated account creation.

Feature: User Personas

Not everybody is a creator and although treated as such on other platforms, we wanted to create an experience that was tailored to user requirements and how they intended to use our platform.

For example, you may be a curator of content who enjoys finding, organising and sharing content with others so you value tools to help you collect, sort and share content with others. You may be a musician who wants to create audio for creators to use on their streams and we want to give you the tools to help facilitate that.

Whatever your focus on Altair is, our aim was to provide functionality that made your experience as seamless as possible without having to rely on external tools and products to achieve it.

Feature: User Profiles

We wanted users to be able to effectively design their own profiles, within constraints we defined to maintain coherence and a level of accessibility. We created a custom set of tools and profile modules for users to choose from, based on the persona(s) they opt in to.

This allowed for a streamlined focus for users without getting overwhelmed with a selection of modules that may not be relevant to their needs and desired experience.

Using a Notion-like block builder approach, users could drag and drop components into place — for example, a creator may want to add a schedule calendar to let people know when their next stream is likely to be and what to expect in the coming weeks and months.

Feature: Discovery

Have you ever opened Netflix, saw a recommendation and thought to yourself “How did they know I'd like this?” It's that same kind of natural discovery we wanted to replicate, removing metrics from our surfacing algorithm.

Metrics such as current viewer count are the default sorting option on other platforms and it creates pressure to focus on those metrics in an unhealthy way. Being able to randomly suggest channels regardless of their size and based purely on interests and relevance would help us keep discovery sustainable as channels grew without leaving others behind.