Sadeem (سديم)
INFLUENCER COMPETITION
Role: Senior UI Designer — Lead + design manager | Product: Responsive website
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
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.
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
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.