StreamYard

Guest's media share

Qredo

Web app redesign

Qredo

Web app redesign

StreamYard

iOS native app

Company - StreamYard
Year - 2024

Role - iOS Senior Product Designer

StreamYard (SY) is a professional studio that enables users to record and broadcast across various social media platforms at the same time. The platform allows you to invite guests, moderate comments and customise your content amongst other functionality.

Qredo is a crypto start-up focused on providing institutions and traders a secure way to store their assets through blockchain technology and multi-party computation (MPC). It also offers secure Web3 transactions through its integrations with MetaMask Institutional, WalletConnect, Celestia and SUI.

Qredo is a crypto start-up focused on providing institutions and traders a secure way to store their assets through blockchain technology and multi-party computation (MPC). It also offers secure Web3 transactions through its integrations with MetaMask Institutional, WalletConnect, Celestia and SUI.

THE PROJECT

Enabling guests to share their media on the iOS app. This included sharing their screen, videos and slides.

But first of all, what is a guest? A guest is someone that a host invites to one of their shows (imagine Oprah inviting Obama as a guest to The Oprah Winfrey Show). Guests can join a Host's show via a link. Once in the SY studio they are waiting in the "backstage" until being pulled onto the "stage" where they can be seen and heard by the audience. 

As the Lead Product Designer at Qredo, I led the direction for UI and UX patterns during the app redesign, as well as the look and feel, guiding two mid-level product designers on the process.

We crafted a user-centric design strategy, establishing clear UX and UI guidelines and fostering consistency.

Guest media2
CONTEXT AND HYPOTHESIS

Customer Service insights revealed that Media Share was one of the most demanded features in the Mobile Guest Experience.

This led to the hypothesis that releasing this feature would result in increased app downloads, so it was quickly prioritised in the roadmap.

Below is an example of some of the most imporant key insights from the discovery exercise that would set up the entire direction of the project. 

Below is an example of some of the most imporant key insights from the discovery exercise that would set up the entire direction of the project. 

Below is an example of some of the most imporant key insights from the discovery exercise that would set up the entire direction of the project. 

The design phase

DISCOVERY AND FINDINGS

My first step was to understand the current experience and design considerations. I analysed previous research and talked to stakeholders to get as much information as possible. The main insights were:

  1. For a guest, understanding when they are on the stage and can be seen and heard by the audience is very important as to not get caught off guard. 
  2. On portrait orientation, and due to the nature of the mobile experience, the size of the stage area wasn't big enough to be able to properly see highlighted comments, banners, or the camera slot as a guest. For this reason, the area below the stage was reserved to show this elements on a more visible manner.

You can see these findings reflected in the designs that were previously put together by the team prior to my joinging StreamYard. 

The product design team became pioneer of the project that would see an entire re-platforming of the app.

As we set out to add new features to the existing web app, we quickly realised that it wasn't built with scalability in mind. Designing these new features became increasingly tricky as a result.

This led us to a discovery exercise where we scrutinised the current design in search of pain points and broken patterns. We did this hand in hand with the research team and the insights from Customer Service.

When we presented the first concepts to the C-level team, the excitement got them into moving the cogs to create a team of product, design and engineering to see the re-design and re-platforming project come to life. 

And so 'Purple Rain', our code name for the project, was born. 

The product design team became pioneer of the project that would see an entire re-platforming of the app.

As we set out to add new features to the existing web app, we quickly realised that it wasn't built with scalability in mind. Designing these new features became increasingly tricky as a result.

This led us to a discovery exercise where we scrutinised the current design in search of pain points and broken patterns. We did this hand in hand with the research team and the insights from Customer Service.

When we presented the first concepts to the C-level team, the excitement got them into moving the cogs to create a team of product, design and engineering to see the re-design and re-platforming project come to life. 

And so 'Purple Rain', our code name for the project, was born. 

The product design team became pioneer of the project that would see an entire re-platforming of the app.

As we set out to add new features to the existing web app, we quickly realised that it wasn't built with scalability in mind. Designing these new features became increasingly tricky as a result.

This led us to a discovery exercise where we scrutinised the current design in search of pain points and broken patterns. We did this hand in hand with the research team and the insights from Customer Service.

When we presented the first concepts to the C-level team, the excitement got them into moving the cogs to create a team of product, design and engineering to see the re-design and re-platforming project come to life. 

And so 'Purple Rain', our code name for the project, was born. 

Current
CHALLENGES

Introducing this new feature presented the following challenges:

  1. The design needed to address the extreme scenario where a banner or a comment would be displayed on the stage, and multiple media would be shared by the guest.
  2. The guests needed to be able to share and unshare their media quickly.
  3. The guests needed to understand which areas are controlled by them and which ones are controlled by the Host.
  4. The guests needed to be able to control their shared media (pausing and playing a video, navigating slides and sharing and unsharing their screens).

The product design team became pioneer of the project that would see an entire re-platforming of the app.

As we set out to add new features to the existing web app, we quickly realised that it wasn't built with scalability in mind. Designing these new features became increasingly tricky as a result.

This led us to a discovery exercise where we scrutinised the current design in search of pain points and broken patterns. We did this hand in hand with the research team and the insights from Customer Service.

When we presented the first concepts to the C-level team, the excitement got them into moving the cogs to create a team of product, design and engineering to see the re-design and re-platforming project come to life. 

And so 'Purple Rain', our code name for the project, was born. 

The product design team became pioneer of the project that would see an entire re-platforming of the app.

As we set out to add new features to the existing web app, we quickly realised that it wasn't built with scalability in mind. Designing these new features became increasingly tricky as a result.

This led us to a discovery exercise where we scrutinised the current design in search of pain points and broken patterns. We did this hand in hand with the research team and the insights from Customer Service.

When we presented the first concepts to the C-level team, the excitement got them into moving the cogs to create a team of product, design and engineering to see the re-design and re-platforming project come to life. 

And so 'Purple Rain', our code name for the project, was born. 

The product design team became pioneer of the project that would see an entire re-platforming of the app.

As we set out to add new features to the existing web app, we quickly realised that it wasn't built with scalability in mind. Designing these new features became increasingly tricky as a result.

This led us to a discovery exercise where we scrutinised the current design in search of pain points and broken patterns. We did this hand in hand with the research team and the insights from Customer Service.

When we presented the first concepts to the C-level team, the excitement got them into moving the cogs to create a team of product, design and engineering to see the re-design and re-platforming project come to life. 

And so 'Purple Rain', our code name for the project, was born. 

SOLUTIONS

Presenting shared media at the stage tab 

  1. Share action added into the control bar for quick access.
  2. A section for shared media separated from the cards related to host actions.
  3. Unifying the look of the cards related to host actions.
  4. Media controls are displayed to allow for quick management of the media.
  5. Camera preview to reduce in size until minimum width to allow space for other elements.
  6. The camera preview automatically minimises into the bottom right corner when it cannot reach the minimum width.
  7. Ability to minimise the camera preview into the bottom right corner at any time.

The product design team became pioneer of the project that would see an entire re-platforming of the app.

As we set out to add new features to the existing web app, we quickly realised that it wasn't built with scalability in mind. Designing these new features became increasingly tricky as a result.

This led us to a discovery exercise where we scrutinised the current design in search of pain points and broken patterns. We did this hand in hand with the research team and the insights from Customer Service.

When we presented the first concepts to the C-level team, the excitement got them into moving the cogs to create a team of product, design and engineering to see the re-design and re-platforming project come to life. 

And so 'Purple Rain', our code name for the project, was born. 

The product design team became pioneer of the project that would see an entire re-platforming of the app.

As we set out to add new features to the existing web app, we quickly realised that it wasn't built with scalability in mind. Designing these new features became increasingly tricky as a result.

This led us to a discovery exercise where we scrutinised the current design in search of pain points and broken patterns. We did this hand in hand with the research team and the insights from Customer Service.

When we presented the first concepts to the C-level team, the excitement got them into moving the cogs to create a team of product, design and engineering to see the re-design and re-platforming project come to life. 

And so 'Purple Rain', our code name for the project, was born. 

The product design team became pioneer of the project that would see an entire re-platforming of the app.

As we set out to add new features to the existing web app, we quickly realised that it wasn't built with scalability in mind. Designing these new features became increasingly tricky as a result.

This led us to a discovery exercise where we scrutinised the current design in search of pain points and broken patterns. We did this hand in hand with the research team and the insights from Customer Service.

When we presented the first concepts to the C-level team, the excitement got them into moving the cogs to create a team of product, design and engineering to see the re-design and re-platforming project come to life. 

And so 'Purple Rain', our code name for the project, was born. 

Guest media 1

Flow: Sharing slides for the first time

When the guest shares a slide for the first time, they are prompted to upload a PDF file (the MVP of this feature focuses on PDF files as a first iteration). That will open the native iOS file sheet. When selecting a PDF, it will be displayed on the shared media slot. 

The product design team became pioneer of the project that would see an entire re-platforming of the app.

As we set out to add new features to the existing web app, we quickly realised that it wasn't built with scalability in mind. Designing these new features became increasingly tricky as a result.

This led us to a discovery exercise where we scrutinised the current design in search of pain points and broken patterns. We did this hand in hand with the research team and the insights from Customer Service.

When we presented the first concepts to the C-level team, the excitement got them into moving the cogs to create a team of product, design and engineering to see the re-design and re-platforming project come to life. 

And so 'Purple Rain', our code name for the project, was born. 

The product design team became pioneer of the project that would see an entire re-platforming of the app.

As we set out to add new features to the existing web app, we quickly realised that it wasn't built with scalability in mind. Designing these new features became increasingly tricky as a result.

This led us to a discovery exercise where we scrutinised the current design in search of pain points and broken patterns. We did this hand in hand with the research team and the insights from Customer Service.

When we presented the first concepts to the C-level team, the excitement got them into moving the cogs to create a team of product, design and engineering to see the re-design and re-platforming project come to life. 

And so 'Purple Rain', our code name for the project, was born. 

The product design team became pioneer of the project that would see an entire re-platforming of the app.

As we set out to add new features to the existing web app, we quickly realised that it wasn't built with scalability in mind. Designing these new features became increasingly tricky as a result.

This led us to a discovery exercise where we scrutinised the current design in search of pain points and broken patterns. We did this hand in hand with the research team and the insights from Customer Service.

When we presented the first concepts to the C-level team, the excitement got them into moving the cogs to create a team of product, design and engineering to see the re-design and re-platforming project come to life. 

And so 'Purple Rain', our code name for the project, was born. 

Slides-1st time

Flow: Sharing a saved file

Previously shared files are automatically saved on the app for quick access and can be removed anytime by the guest.

The product design team became pioneer of the project that would see an entire re-platforming of the app.

As we set out to add new features to the existing web app, we quickly realised that it wasn't built with scalability in mind. Designing these new features became increasingly tricky as a result.

This led us to a discovery exercise where we scrutinised the current design in search of pain points and broken patterns. We did this hand in hand with the research team and the insights from Customer Service.

When we presented the first concepts to the C-level team, the excitement got them into moving the cogs to create a team of product, design and engineering to see the re-design and re-platforming project come to life. 

And so 'Purple Rain', our code name for the project, was born. 

The product design team became pioneer of the project that would see an entire re-platforming of the app.

As we set out to add new features to the existing web app, we quickly realised that it wasn't built with scalability in mind. Designing these new features became increasingly tricky as a result.

This led us to a discovery exercise where we scrutinised the current design in search of pain points and broken patterns. We did this hand in hand with the research team and the insights from Customer Service.

When we presented the first concepts to the C-level team, the excitement got them into moving the cogs to create a team of product, design and engineering to see the re-design and re-platforming project come to life. 

And so 'Purple Rain', our code name for the project, was born. 

The product design team became pioneer of the project that would see an entire re-platforming of the app.

As we set out to add new features to the existing web app, we quickly realised that it wasn't built with scalability in mind. Designing these new features became increasingly tricky as a result.

This led us to a discovery exercise where we scrutinised the current design in search of pain points and broken patterns. We did this hand in hand with the research team and the insights from Customer Service.

When we presented the first concepts to the C-level team, the excitement got them into moving the cogs to create a team of product, design and engineering to see the re-design and re-platforming project come to life. 

And so 'Purple Rain', our code name for the project, was born. 

Slides 2nd time

Flow: Sharing screen

Sharing the screen prompts the iOS native screen share dialogue. The guest can then stop it from the StreamYard app or the iOS bubble in the top-left corner.

The product design team became pioneer of the project that would see an entire re-platforming of the app.

As we set out to add new features to the existing web app, we quickly realised that it wasn't built with scalability in mind. Designing these new features became increasingly tricky as a result.

This led us to a discovery exercise where we scrutinised the current design in search of pain points and broken patterns. We did this hand in hand with the research team and the insights from Customer Service.

When we presented the first concepts to the C-level team, the excitement got them into moving the cogs to create a team of product, design and engineering to see the re-design and re-platforming project come to life. 

And so 'Purple Rain', our code name for the project, was born. 

The product design team became pioneer of the project that would see an entire re-platforming of the app.

As we set out to add new features to the existing web app, we quickly realised that it wasn't built with scalability in mind. Designing these new features became increasingly tricky as a result.

This led us to a discovery exercise where we scrutinised the current design in search of pain points and broken patterns. We did this hand in hand with the research team and the insights from Customer Service.

When we presented the first concepts to the C-level team, the excitement got them into moving the cogs to create a team of product, design and engineering to see the re-design and re-platforming project come to life. 

And so 'Purple Rain', our code name for the project, was born. 

The product design team became pioneer of the project that would see an entire re-platforming of the app.

As we set out to add new features to the existing web app, we quickly realised that it wasn't built with scalability in mind. Designing these new features became increasingly tricky as a result.

This led us to a discovery exercise where we scrutinised the current design in search of pain points and broken patterns. We did this hand in hand with the research team and the insights from Customer Service.

When we presented the first concepts to the C-level team, the excitement got them into moving the cogs to create a team of product, design and engineering to see the re-design and re-platforming project come to life. 

And so 'Purple Rain', our code name for the project, was born. 

Share screen

Flow: Sharing a video for the first time

Sharing a video prompts the video gallery from the guest's mobile device. By tapping on a video, they can add it automatically to the shared media slot.

The product design team became pioneer of the project that would see an entire re-platforming of the app.

As we set out to add new features to the existing web app, we quickly realised that it wasn't built with scalability in mind. Designing these new features became increasingly tricky as a result.

This led us to a discovery exercise where we scrutinised the current design in search of pain points and broken patterns. We did this hand in hand with the research team and the insights from Customer Service.

When we presented the first concepts to the C-level team, the excitement got them into moving the cogs to create a team of product, design and engineering to see the re-design and re-platforming project come to life. 

And so 'Purple Rain', our code name for the project, was born. 

The product design team became pioneer of the project that would see an entire re-platforming of the app.

As we set out to add new features to the existing web app, we quickly realised that it wasn't built with scalability in mind. Designing these new features became increasingly tricky as a result.

This led us to a discovery exercise where we scrutinised the current design in search of pain points and broken patterns. We did this hand in hand with the research team and the insights from Customer Service.

When we presented the first concepts to the C-level team, the excitement got them into moving the cogs to create a team of product, design and engineering to see the re-design and re-platforming project come to life. 

And so 'Purple Rain', our code name for the project, was born. 

The product design team became pioneer of the project that would see an entire re-platforming of the app.

As we set out to add new features to the existing web app, we quickly realised that it wasn't built with scalability in mind. Designing these new features became increasingly tricky as a result.

This led us to a discovery exercise where we scrutinised the current design in search of pain points and broken patterns. We did this hand in hand with the research team and the insights from Customer Service.

When we presented the first concepts to the C-level team, the excitement got them into moving the cogs to create a team of product, design and engineering to see the re-design and re-platforming project come to life. 

And so 'Purple Rain', our code name for the project, was born. 

Share video 1st time

Media management

The guest can tap on a media card to open controls to manage such media.

The product design team became pioneer of the project that would see an entire re-platforming of the app.

As we set out to add new features to the existing web app, we quickly realised that it wasn't built with scalability in mind. Designing these new features became increasingly tricky as a result.

This led us to a discovery exercise where we scrutinised the current design in search of pain points and broken patterns. We did this hand in hand with the research team and the insights from Customer Service.

When we presented the first concepts to the C-level team, the excitement got them into moving the cogs to create a team of product, design and engineering to see the re-design and re-platforming project come to life. 

And so 'Purple Rain', our code name for the project, was born. 

The product design team became pioneer of the project that would see an entire re-platforming of the app.

As we set out to add new features to the existing web app, we quickly realised that it wasn't built with scalability in mind. Designing these new features became increasingly tricky as a result.

This led us to a discovery exercise where we scrutinised the current design in search of pain points and broken patterns. We did this hand in hand with the research team and the insights from Customer Service.

When we presented the first concepts to the C-level team, the excitement got them into moving the cogs to create a team of product, design and engineering to see the re-design and re-platforming project come to life. 

And so 'Purple Rain', our code name for the project, was born. 

The product design team became pioneer of the project that would see an entire re-platforming of the app.

As we set out to add new features to the existing web app, we quickly realised that it wasn't built with scalability in mind. Designing these new features became increasingly tricky as a result.

This led us to a discovery exercise where we scrutinised the current design in search of pain points and broken patterns. We did this hand in hand with the research team and the insights from Customer Service.

When we presented the first concepts to the C-level team, the excitement got them into moving the cogs to create a team of product, design and engineering to see the re-design and re-platforming project come to life. 

And so 'Purple Rain', our code name for the project, was born. 

Media management

A hard turn of events

The next step of the project was to test the designs with StreamYards users but unfortunately, in mid March 2024, StreamYard was acquired by a tech company. This change would see almost the entire current team laid off later in May, and therefore the project wouldn't come to a realisation.


More projects

Checkout redesignMoonpig 2020

Student accomodation websiteNido collection 2017

FreesatWeb design

Real estate web designGeneral Projects 2017