Plexchat API portal was a tool that provided API for building online communities with build-in moderation as a service. As the Plexchat app was built and successfully housed online communities that prioritized meaningful conversations over toxicity for the mobile gamers, the web API tool extended the possibility of integrating highly-moderated, fully customizable community chat modules for game developers and studios to build any mobile online community, with the ease of one line of code.
As one of the two designers and early employees who largely shaped the Plexchat mobile app, I was tasked to design for this web-based product MVP alone. Later, another designer joined me to support the public beta where different parts of the beta product were assigned to either of us.
MVP chat module theme configuration
User problems and MVP scope
Since hosting and supporting operations of the mobile online gamer communities for some time from the beginning of the Plexchat app, we noticed the common problem of lacking infrastructure for game developers and studios faced to support their own communities.
Building in-game chat functions with specific moderation usually were the last thought and unattractive for game developers and studios alike who wanted to prioritize building awesome game titles. External API services existed for developers to build in-app chat functions, but lacked moderation, customization, as well as operational knowledge to support gamers and prevent the common toxic behaviors in such communities.
To take on this opportunity to fill the gap from leveraging the existing infrastructure built from Plexchat mobile app, the MVP focused on demonstrating the API functions for game developers to try the service and play around with its capability really quickly, without going over length complicated documentation.
Customer journey and user flow
I interviewed multiple game developers and community operators alike, in order to articulate the critical steps for the complete user journey, from the first landing on the product website, to quickly acquiring the API to be integrated into their own product development.
user journey mapping
To follow this customer journey, the product experience was divided into 3 parts: simple registration as an admin, quick onboarding, and detailed configuration.
initial wireframe
To make the onboarding a lighting fast experience, we decided on a 3-step process to the code snippet of a pre-configured module.
MVP flow
I worked closely with the product lead and a small engineering team to bring the MVP to a live product in less than 2 months while receiving continuous feedback from selected partners.
New User Module Creation
New User Landing On Dashboard
Chat Module Profile Setting
Public beta 2.0
After receiving positive feedbacks from our selected private alpha users on the proof of concept we moved ahead with conceptualizing a public beta 2.0. It was aimed to provide a SaaS for game publishers and developers teams to integrate chat modules with their native mobile apps.
I primarily focused on growth-related features such as initial team invitation, navigation, as well as team profiles, and billing.
Registration
From our early research on the production process and organization structure, outsourcing part of the development was extremely common for the industry. To satisfy the growing registration demand, we introduced standard email registration with more guided onboarding with team setup, on top of MVP simple Google OAuth and Github login. Organizations with different permissions for their team members was also part of the scope early on to ensure security and flexibility for our targeted org structures.
Navigation & Configuration
The navigation changed as well in response to the introduction of the organization concept and team permission.
The goal was to provide a more clear breakdown of items an administrator role can modify, and more module options for different sizes of communities and use cases, such as 1:1 chat, small group chat, and the default community chat.
Moderation and prevention of toxic behavior were the part of core differentiating factors Plexchat web tools provided. To solve a known common pain point from the moderator roles lacking easy access to moderate mobile app communities, we also introduced the option for administrator roles to moderate in-app chat directly in the web portal.
Design System
Upon finishing creating the UI library and style guide for Plexchat mobile app, I quickly switched to work on the admin portal product.
Since there was significant overlapping of certain UI components from the mobile app and the web API tool, even with tremendous pressure to deliver, we allocated time to invest in setting up a basic design system to support the web development.
From there, we were able to significantly speed up the development efficiency and quality, while iterating quickly. The whole development team was empowered to quickly prototype new product ideas and contribute by leveraging this design system.
Design tokens
UI kit
Outcome and lesson learned
Our product public beta attracted multiple entertainment publishing and studio powerhouse customers. Ultimately, our company and the product were acquired by Warner Bros Games to help this entertainment giant to level up its community-building capabilities.
I was fortunate to work on this pivotal product for the company while having fun doing so.
My belief in the human-centered methods in product and design was re-affirmed, where we succeed as a team focusing on a novel experience that exceeded users’ previous expectations.
A carefully-selected small user group of early adopters was all we needed to kickstart an early product concept without going in blind.
Opting for continuous learning worked better than perfection, especially for an early-stage product.
The empowered team need to have a deep understanding of the domain and customer pain points.
Plexchat App
Community For Mobile Gamers
Background
Plexchat app is a cross-platform communication application for large communities who play mobile games. The mission is to help strangers online start meaning conversations with ease. With the goal in mind, the app focuses on moderation and unique game-specific embedded tools that cater the needs of community members to bond and grow.
Work
I have the opportunity to work with engineering and community team on various features and initiatives, also to advocate for better design practice and systematic design approach. Some of the projects I lead are such as,
When I joined, I immediately worked with the contract agency to establish a solid brand guide and basic UI kit for further design and development. The mobile app released at the end of 2016 along with a brand new website I designed.
brand guideline logo use
Plexchat.com V1
Voice Call
As one of the parity features for Plexchat compared to other chat applications in the market, it has its own challenges. Plexchat has a much more robust moderation system, in order to manage large communities with thousands of members at the same time, it requires easy moderation during a voice call on top of an existing chatroom.
voice call initiation
voice call prototype
Event Room
The feature is a room type to support the on-going community-oriented efforts inside of the app, which including several weekly events hosted by Plexchat community managers with external youtube/twitch streamers. As the community managers told members from the app to view stream on youtube/twitch, it got really difficult to extend the conversation back into the app, which causes significant frictions for in-app engagement.
Problem:
in-app events engagement lost once members went to 3rd-party streaming platform
events got really hard to manage as they grows in scale (were only ran by company staff/contracted staff)
event hosts (usually community managers/youtube or twitch streamers) couldn't effectively run prized events (which was the very common event types that attracts members) due to the tedious existing process by messaging in the app
members had been complaining of missing events due to not able to know/find events in advance
members didn't know where the event was held at
Why was it a problem: Streaming events via youtube/twitch influencers were the main strategy for user growth and engagement, and the existing/old in-app chat didn't support the specific use case of the event operations, from event creation, organization, control signups, to raffle prize, announce prize winner, etc. It created causes significant frictions for in-app engagement, and made it hard for the major traffic driver to scale.
Solutions: Based on the existing navigation, create a new type of event chatroom for admins to manage and surface relevant information to members.
Research: I had long conversations with several of our in-house community managers and youtube/twitch influencers to understand how they were using our app to run events, where were the main pain points, what were their needs and wants. I also interviewed our app users who participated in events to get the context of the use of app for event participation, and what could assist them better to have better experience with those events in the app.
Design ideas:
change how members view event information as the events sign up open, start, progress, and finish
admin moderats participants
admin controls the event progress
admin can edit information on-the-go
admin can post signups only notification
Low-fidelity mocks:
event room creation
manage event flow
manage participants
High-fidelity mocks:
admin event room creation
admin sets signup restrictions
admin manages events flow
admin manages event raffle
participants view
I kept working on event calendar design, for the future scope of how to make it easy for members of any community to discover and participant in events.
event calendar
Design Overhaul
After collecting 6 months of user feedback, we felt the product direction needed to update, especially on how to effectively facilitate conversations for gamers, as well as expanding how they explore more topics they are interested in.
The product decided to emphasize on putting conversations front and center with easy navigation supporting rich-media embedded widgets to surface user information, and enabling users to post structured content to communicate.
mobile app information architecture
Usability Testing
I also lead the usability testing for the re-design launch - I worked with CEO to identify the goals for the user testing, proposed and conducted the entire usability test with existing users. During the process, some major issues were surfaced, such as user education and navigation, and we were able to work on design solutions to significantly improve user on-boarding.
user testing script snippet from Dropbox Paper
Attachment
The attachment is one of the crucial components around the re-design - by allowing users to post multiple multi-media content at once. The flexibility is really important as it suits the need of different users. The communities in Plexchat operate like communities inside of a mobile game - there are leaders, moderators and regular members. It also reflects the mobile gaming ecosystem of streamers, audience and e-sports.
add attachments to a message
message UI options
attachement prototype
Embed Tools
One major differentiator Plexchat has is the embed - like widgets inside of the chat app to allow user post rich content, instead of a boring URL, so we can capture the audience for the specific game, and make the app more sticky to use.
user education on embeds
deck assist - gamers ask for a better deck recommendation and received suggestions
Design Pattern Library & Style Guide
After the intense release schedule of mobile app re-design, embed tools, and on-going iterations and other improvement, the design came to a point of examining the design consistency. We realized that we need to look into establishing a concrete style guide and UI kit again. It was really crucial as we expand quickly into multiple different product offering across different platforms, plus expressing a centralized tone and voice for all of our communication channels.
After discussing with stakeholders, I examined the existing design, and complied the design library as the base to standardize UI and design elements, and expand it to the entire company. It not only helped use to discover current design inconsistency, it also help use to make sure further design work evolve in a much more systematic way.
pattern library & style guide snippet
GotIt! expert portal
workspace design for study experts
Background
GotIt! Expert portal is an all-in-one web-based product for tutors of high-school math and sciences subjects to find work. They use this product to sign up, pratice problems, bid problems, and guide students through those problems in 1 on 1 sessions. They also use the portal to keep track of past earnings, problem sessions, past performances, and report issues to customer support.
The workspace is part of the portal where a tutor connects with a student on one homework problem in a timed chat session.
Existing workspace
original workflow
The workspace requires study experts to send content as chat messages following the teaching format - concept, step-by-step explanation, final answer and optional followup discussion, while engaging with students. Study experts should deliver content fast and accurately.
heuristic evalution
messy UI
expression editor blocks the chat view
study experts are required to finish all the steps before sending to the student which is very time consuming
problem signals
continuous low retention rate from the mobile app for students
chat sample review shows experts do not engage students
expert working session review shows long waiting time for students
expert performance data exhibits low ratings for experts
problems to solve
experts need to send real content faster
experts can but won’t engage much with students
students don’t know where the expert is at during the problem solving
Design Challenge
Design a workspace to allow experts to send smaller pieces of content more frequently. It should enable experts to provide partial step-by-step explanations in order to decrease time intervals between expert and student communication and increase the perception of “speed”.
Expected results
decrease in time between expert communications to student, specifically gap between concept and explanation
increase in retention for certain student user group
USER STORY
As an expert, i want to be able to respond to students faster, so that students know I’m working on their problem.
ideas
add a “slicer” to the tinymce editor to enable expert sending slices of content (tinymce editor is a tool that the product uses to display math & science expressions correctly)
integrate math & science editors into the workspace instead of using a popup
enable edit-ability for sent chat messages
polish chat display to reduce experts scrolling back and forth
design reference:
Slack
slicer interaction whiteboard & discussion with PM
proposed workspace flow
proposed step-by-step explanation workspace
Outcome
The design goal was achieved, reducing the first response time with real content by 90 seconds for adopters
Other Observations
experts take longer to finish the whole response which leads to poor student satisfaction
majority of the experts don’t send smaller pieces of content
problem definition
The nature of more interaction in chat leads to a longer session time. The improved workspace provides experts the flexibility they need, but it doesn’t provide enough incentive for experts to engage more nor send content faster.
New Design Challenge
Design a structured workspace to incentivize experts to engage students on followup questions when working on a homework problem
Desired results
improve expert quality metrics
increase student satisfaction
research
reference: Slack. banking customer service. traditional call center.
user journey mapping discovery: tool efficiency and time pressure against the structured answer format, especially for step by step explanation
ideas
a single chat/working area
a fixed location for the problem photo
incentive of the math & science editing tools availability to push experts through different stages of answering
combine explanation and final answer
combined workspace
combined workspace with 1 chat input box
combined workspace with 2 chat input boxes
hypothesis
One single chat box would force a workaround and add mental load for users to decide how they want to respond
2 input boxes might lead to users ignoring incoming questions while keep composing big chunk of content before sending.
designed an internal test using google hangout and existing workspace to imitate the proposed workspace options
test insights
study experts with different problem solving styles feel comfortable use one input style over the other
study experts either intentionally write different content separately into expression box & normal english chat box, or just input randomly
study experts either ignore the incoming messages from time to time, or try to respond as soon as possible
testers all agreed that the more interaction, the longer the session takes, and engagement might affect solution accuracy
study experts either prefer the 1 input box without shifting around, or prefer strictly use 2 boxes for different purposes
product direction
Conduct more usability testing to gather more data and establish a baseline for expert performance metrics.
GotIt! iOS app
mobile chat with video for education
Background
GotIt! is a marketplace service connecting students with homework problems to chat with study experts within a timed session. The chat experience is the core service for the student side of the marketplace.
Design Process
design goal
Design a product experience for students during a chat session that allows the study expert to insert a video to supplement the concept that the student is trying to learn.
problem to solve
How can videos facilitate the student learning in the short and long term.
design research
A video is usually a multi-media material for students to learn but not the primary material. From my own experience studying from videos without external instruction, I feel the single-sided video-based learning environments can be dull for students. In this case, I think the capability of asking questions in real time with a study expert while watching a video makes learning easier. However, integrating chat with educational videos while allowing a student to learn is a design challenge. After looking around I found some following design inspirations.
Luka, Youtube, SoundCloud (left to right)
The SoundCloud soundtrack commenting timeline really intrigued me, and I start to think about how video could utilize such functionality in an instant interactive education environment.
sketches
ideas
students control play, pause and stop primarily, study experts can observe and control as well
a video timeline auto-embeds chat that can be reviewed later
uninterrupted but attention-calling message notification while the video is playing
students can bookmark and share for further learning and referencing
video auto-pause for chat
To compare alternatives, I came up with 3 options.
option 1: basic chat with video attachment
option 2: chat during video playing
option3: video timeline with embedded chat content to response directly or retrieve later
From a MVP perspective, option 2 could be a more feasible starting point for the business. The bookmarking and sharing feature is useful but also more “nice-to-have” for validation of an engaging video chat experience.
metrics to measure
Focus on engagement, retention & user happiness.
frequency of chat messages during video playing
frequency of reviewing/bookmarking/shared video per user
average length of chat with videos
average chat rating with videos from students per session
GOMEAL
consumer product branding design
campaigns
Background
Branding design for a product and its parent company. The product is an all-nature healthy on-the-go protein drink and meal replacement. The parent company is a all-nature food and beverage product manufacturer.
design research
consumers: young female working professionals
competitor: Aloha. Blueprint Cleanse.
branding message: healthy, all-nature, easy, good taste
