hero-sadeemFPO.jpg
 

Sadeem responsive website

 

Sadeem (سديم)

Sadeem is a reality contest to find the next Gulf region social media influencer. It works similarly to traditional reality contests, only it's completely online. All audience viewing, interactions, and scoring take place via social media platforms. Those interactions––watches, likes, shares, and comments––generate a contestant's Sadeem score, which determines who survives the challenges and who becomes the Sadeem champion.

 

Problem

Social networks are designed to tell their version of your story, which created functional and narrative gaps that needed to be addressed: contestant submissions, easily locating and watching video content distributed across multiple social accounts and platforms, tracking the details of contestant competition and elimination, along with tracking a user's rise to "Superfan" status.

 

Solution

We designed and launched a Sadeem companion website, which fuses dozens of social accounts worth of content into a single experience. Here hopeful contestants can signup for Sadeem, fans can track their favorites contestants' content and progress, and maybe even witness their social support earn them Superfan status.

 
 
 

Team

San Francisco: Design – 1 UI/Team Lead, 2 Interaction Designers

Doha: Product, Business, and Engineering

Beirut: Engagement and Show Production

Sadeem Team.png
 

My role: Design team lead

Coordinate efforts across Design, Product, and Business teams, conduct design reviews, guide interaction design, explore and deliver final UI designs (page, component, UI kit, assets), and prototype and animate component and page interactions.

Sadeem Me.png
 
 
 

Problem definition
 

User needs

As we researched and conducted regional workshops and interviews to better understand our users' perceptions, habits, and needs with digital products, social media, and reality contests we uncovered common user truths: 

  • Reality shows: authentic and unscripted over fake and glossy

  • Social platforms: Instagram and Snapchat over Facebook
  • Technology: Website over mobile app(!)
 

Doha, Qatar workshop user quotes (left), contest ideas (middle), and social media consumption habits (right)

 
 

Business goals

Positioning Sadeem completely on social media platforms has many advantages: massive existing user base, organic community engagement, content management and marketing tools, interaction analytics, and more. But through project team discussions, we helped identify where social fell short: contestant applications and content consumption. Business also highlighted the need for stronger story-telling control.  

• = when users should purposefully be migrated to site

Sadeem-Prob-ContentStreams.jpg

How much content can we reasonable assume our users can track? Perhaps there's a better way!

 
 
 

Marketplace trends

When looking into mobile-first, digital products with strong social media presences, we were inspired by tent poll brands like GQ and Condé Nast as well as younger products like Nowthis and Arré, who demonstrated communication transparency, social respect, and vibrant and vital design aesthetics.

 

Competitive analysis

 
 

User research
 

Personas

From our research insights and regional marketing firm data, we created Personas defining four core sadeem users

 

User journeys

Newbie and Passive User: what is Sadeem? what's going on right now? 

Fan and Superfan: I want more of contestant/challenge content? How do I become part of Sadeem? What is a Superfan?

Social media platform use by Persona

 

Daily journey for a Superfan

 

Superfan journey from social to site

 

All Persona journeys throughout show phases by engagement type

 

Solution exploration
 

UX exploration

Design challenges

  • Our team assumed that users who come to the site are interested in Sadeem but would initially require more detail about the show 

  • There are distinct show phases but Business needed help defining and communicating them to users

  • The Content team hadn't content prior to the design phase so we helped explore tone and messaging options with them

  • Strategy for user migration, content marketing, and social interactions were unknown, which presented many design challenges...

Information architecture

When a user arrives on site, how might we leverage our Personas and User Journeys to define top-level pages and elements which ease navigation and content consumption?

 

Wireframes

How might we craft site pages and elements, which support each other and deepen the Sadeem experience?

 

Messaging

Content team was still defining Arabic "white language" for site and social. How might we help them find the right tone for an Arabic Gen-Z audience?

 

Mapping show phases

Users may get confused about how sadeem works as show phases change. How might we help them better understand the game play?

 

User Interface exploration

Building off of UX designs, our UI explorations focused on:

Social asset adherence

Use social media platform asset sizes and ratios as the core of our UI design, to streamline content production, which lived on both social and site 

 

Exploring color

The original brand colors were created for content, not interfaces and felt muddy. We were inspired by what we found in our Competitive Analysis and explored more vibrancy and cooler color options. We ultimately settled on a  palette, optimized for UI and harmonized with the original brand. 

 

Exploring graphics

We also extended the graphic playfulness from the brand guidelines and worked closely with our team in Doha and Beirut to consider cultural propriety. 

 

Layout exploration: Mobile + Desktop

Many iterations and graphic treatments were explored to ensure the site felt fresh,  youthful, mobile first, but also worked well across all breakpoints.

 

Evolving components with hooks

It was important to consider how the UI would evolve as the show progressed. This module announces new contestants each day and uses a counter to motivate users to return tomorrow to see the next new contestant(s).

 

Copy stress testing and guidance

With no content samples or strategy documentation, our team created guidelines for the show Production team to get the best site presentation results for when they wrote title and description copy.

 
 
 

Solution

The site design is completely in Arabic, with right-to-left language and screen orientation. Its color palette is vibrant expressing the gulf region's eclectic Gen-Z audience. It borrows visual language from the social sites that the contest natively lives on. And it weaves together content from multiple social platforms and accounts to tell the inspirational and dramatic story of Sadeem.

 

Mobile User Interface designs

InVision prototype

Arabic language only, right-to-left screen orientation

 
 

Emoji stickers bring social language through to website

 

UI Kit and component system

 
 
 

Success definition
 

Show

  • 10m YouTube views, 100m Facebook views
  • Likes/subscriptions: 1m Facebook, 250k YouTube, 150k Instagram, 20k Twitter

Site

  • Monthly visits: 70k
  • Time on site: 2 mins
  • Watch duration: 3 mins 
  • Bounce rate: 65%

Success 👍

 

Results and takeaways

Strategic definition is the difference-maker

After Season 1, the metric showed that our goals were solidly met across the project and website. The project retrospective uncovered some good insights towards solving some of our MVP challenges, including creating a fully defined content, go-to market, and social strategy. We also recommended that a larger social media and website content management team would help achieve some of business' more exciting social interaction and site storytelling goals.