Recast

responsive web applications

Overview

Recast is the fair content distribution and payment network where publishers can expand their reach and revenue without barriers, and fans can enjoy flexible and affordable access to the content they love. Learn more about Recast here.

Recast web applications I worked on:

Recast Publish
Recast Admin Panel
Recast Streaming / Video player
Recast Wallet and Payment Solution

My role

UX designer

I was responsible for identifying user, business and system requirements and designing elegant solutions for existing and new features on Recast web apps.

Tools: Sketch, Adobe Xd, Material UI, Miro, Jira, Slack, Google Meets, Userbrain

Team: Designers, Product Owners, Business Analyst, Testers and Developers

Timeframe: since May 2022

Type: full-time, remote, B2B

Work

During my work at Recast, I witnessed the company's transformation from a video streaming platform to a comprehensive content distribution and payment network. I was involved in various aspects of this transition, including updating system designs and branding, conceptualising and implementing new features, reaching out to diverse user demographics, and navigating the dynamic landscape of a startup environment.

New features I designed for Recast Publish:

Arrange Content - for managing content and sections on the channel page and channel widgets
Balance View - to check balance and access cashout history
Stream Keys - to create and manage stream keys
Channel Pass - for creating and managing channel passes displayed on the channel page or widgets (embeds)
Channel Trailer - for uploading and managing channel trailers displayed on the channel page
User flow for Widgets - feature allows to create and manage widgets (embeds) with videos and live events and host them on various websites
Vendor onboarding - new sign-up process for new vendors and affiliates

New features I designed for Recast Admin:

Config page - for managing package details on vendor profiles
Affiliates management - enables managing affiliates assigned to a vendor
Widgets management - enables managing widgets (embeds) on a vendor profile
Channel Passes management - enables managing passes on a vendor profile

My other daily work involved completing tasks such as updating brand details across the design system for Publish and the Admin Panel, designing new tables, reorganising content sections, improving stream setup experience, or visualising user data through graphs.

Research methods

I employed various research and design methods throughout my work on multiple projects, making it difficult to select just one to highlight. Below, I present a selection of methods used, along with a few visual examples, to provide an overview of my work at Recast.

Workshops

I participated in and conducted workshops for stakeholders, users, and team members. Depending on the initial requirements, I utilised various techniques to gather valuable feedback from the participants. Here are a couple of examples.

Card Sorting

I used this method to identify requirements and discover solutions for a new navigation structure on the Recast Publish application. I planned this research to be fully online and prepared cards with currently used labels and terms, but advised users to feel free to suggest changes or remove them if needed. I conducted a card sorting session on a Miro board:

Participant 1

Participant 2

Participant 3

Participant 4

Personas

A persona in UX design is a fictional representation of a typical user based on research and data. It helps designers understand users' needs, goals, behaviors, and preferences, allowing them to design products and services that better meet user needs. I created personas to better understand current and new groups of end-users.

During the workshops, I collect information to create or update personas. Workshops with the marketing team were a great source of information on the currently targeted users and clients.

Persona 1

Persona 2

Persona 3

Feedback on Personas

3 Amigos

I was frequently invited to participate in 3 Amigos sessions (a collaborative meeting involving three key roles: the product owner or business representative, the developer, and the tester or quality assurance (QA) engineer). During these meetings, I presented visualisations of features and collected valuable feedback on technical challenges or alternative solutions emerging from a technical point of view.

User journeys and user flows

I created multiple user journeys and user flows to better understand user-system interaction, as well as technical challenges, especially when working on completely new features. I based the user flows on requirements provided by Product Owners and Business Analysts, as well as on the analysis findings of the current system structure. I used user flows to communicate basic system functions and user interaction, and to refine and discover more requirements at the very early design stage. Here are a couple of examples I created using Miro:

1. User journey draft for 'Arrange Content' feature

2. User journey for new Publisher sugn-up

Wireframes and Mock-ups

I have created multiple wireframes, mock-ups, and prototypes tailored to the specific design stage and complexity of each feature. These tools were instrumental in visualising concepts, gathering feedback, and providing developers and testers with the necessary details for their work. Below are a few examples of visual representations showcasing selected features.

Wireframes

1. 'Arrange Content' feature for desktop

2. 'Arrange Content' feature for mobile

3. 'Arrange Content' feature for desktop

4. 'Dashboard' feature for desktop

5. 'EPG (Electronic Program Guide)' feature for desktop

6. 'EPG (Electronic Program Guide)' feature for mobile

Mock-ups

1. 'Video table' for desktop

2. 'Video table' for mobile

3. 'Arrange Content' feature for desktop

4. 'Arrange Content' feature for mobile

5. 'Channel Pass' feature for desktop

6. 'Channel Pass' feature for mobile

7. 'Balance View' feature for desktop

8. 'Fan Data' feature for desktop

Team

I worked with designers, a senior designer, a business analyst, product owners, developers, testers, and marketing and communication teams. Teams were reorganised depending on the project scope, so I had individual meetings, stand-ups, 3 Amigos, or workshops with people from all of the Recast teams.

I worked with wonderful people making impossible things work.

Learnings & Challenges

Initially, working with multiple applications was challenging due to differences in their design systems and the upcoming business rebranding. I handled assets from both the old and new brands, and in collaboration with the senior designer, we successfully updated the design system for public-facing applications and built a new design system incorporating the new brand's visual elements.

While working on multiple features and applications simultaneously, I enhanced my ability to prioritise and manage both related and unrelated tasks effectively. I collaborated with stakeholders and developers to ensure a cohesive and efficient development process. For example, we successfully updated and built design system components using Chromatic. Additionally, I improved my ability to be flexible and creative in making necessary trade-offs for a smoother development process.

The business model and product functionalities constantly evolve in a start-up environment, leading to targeting of new user types while maintaining the current user base. This created opportunities for me to apply various user research methods and adapt them to limited resources and time.