Project Overview

 
 

The Problem: 

A startup enlisted the expertise of Citrusbits to develop an app to utilize live streaming capabilities to help communicate their vision of enabling users to discuss and debate on critical issues with objectivity and respect.

My Role: 

Wireframing, prototyping and visual design

TOOLS: 

Marvel(Prototype), Sketch (Wireframes, Visual Design, UI/UX Deliverables), Zeplin (Development Handoff)

Team:

Bradley Jefferson (Product Manager), Kristian Tumangan (Lead UI Designer), Tayyab Mahood (Dev Manager), Zaeem Zafar (Tech Lead), Muhammad Sohail (Dev)

 

Kicking Off

 

Before diving into designing the UI and the overall experience of the app I worked with the Product Manager assigned to the project to distill the core functionality the app must have in order to meet the client’s vision and user base (18-34 year old demographic) they were targeting. We also worked alongside the development team to fully understand the video framework we would be using to execute the video streaming capabilities of the app.

 
 
 

Key Insights:

1. Utilize the target audience’s knowledge of live streaming platforms to engage in discussions that cover critical topics affecting society today?

2. Establish a respectful and enlightening space for discourse. Assigning roles within conversations helps keep discussions civil and open to participants.

3. Understand the development team’s framework to execute the live streaming and video on demand capabilities within the app.

EXPERIENCE REQUIREMENTS:

1. Navigation: The debate events hosted within the app must be easy to navigate and easy to find.

2. Roles in Debate Events: Users participating in discussions are assigned roles: Moderator and Speakers, to help keep discourse clear to the audience.

3. Respect: Moderators not only moderate conversations but also ensure all participants of the app adhere to community guidelines.

 
 
 

the Solution:

To successfully execute the client’s vision, the CitrusBits team went with Agora’s in-app call and video messaging SDK as a framework to host the live stream debates. We created a schedule design inspired by television guides to accommodate the debate programming schedule the client would host on their platform. The product and design team synced on the development of the app architecture and user stories to build out the user experience requirements for the app.

 
 

Wireframing, UI, and Prototype

 

With the user stories developed and a better understanding of the live streaming framework the engineering team used, the design team was tasked in 4 weeks to establish an experience that would be design against the user stories created for the product.

 

WIREFRAMING:

Wireframing within Sketch was essential in laying out the basic architecture and content layout of the app.

 

User Flows:

User Flows were utilized to not only help the client understand key user interactions within the app, but also help communicate the user interactions with our development team working 12 hours ahead of our U.S.-based team.

 

Design System and Prototype

Once we locked our architecture and user interactions with the client, I then established a design system and visual design style that communicated the client’s branding style. I created a prototype deliverable to the client communicating the basic functionality of the app on launch.

 
 
 

Learnings

 

Understanding 3rd party vendor SDK capabilities and building a design and product cadence with an engineering team based in Pakistan. Even though the product and design team members had plenty of ideas, we had to consider restraints on the third party SDK the engineering team was utilizing. With the CitrusBits team spread out globally, communicating product functionality visually in the past was clunky and sometimes lost in translation. To help remedy this, I helped establish the practice of providing user flows as deliverables we can share not only to the developers, but to our clients as well.

Next Steps:  

  1. Support bug fixes and provide design guidance when needed.

  2. Establish a Phase 2 plan and timeline with the client to launch other functionalities not within the MVP scope and launch.

 

View More Projects