Community As A Service Made Easy
Plexchat API portal is a tool that provides community API as a service. As Plexchat app builds the foundation and proved how to build a successful meaning community for the mobile gamers, the portal extends the possibility of integrating highly-moderated, fully customizable community chat modules for any mobile game that wants to include a communication component.
The MVP sprint focused on demoing a simple solution for game developers to try the service and the ability to quickly integrate a chat infrastructure into their own mobile apps. The product experience can be divided into 3 parts: quick registration, on-boarding guide, detailed configuration.
user journey mapping
New User Module Creation
New User Landing On Dashboard
Chat Module Profile Setting
Chat Module Theme Configuration
As we moved forward with the product after MVP proved the concept, the goal of the public beta is to provide a simple yet comprehensive platform for game publishers and developers to integrate chat modules with their native mobile apps.
In order to accommodate a wider range of users, we changed the primary registration from Google or Github-only to also include standard email registration.Another change is to introduce "organization" and member invitation with different permission access to the dashboard. During further user research, we discovered a common use case of game publishers working with game studios to develop games. The organization structure is required to ensure security and flexibility for the production process of larger organizations.
The navigation changed in order to provide a more clear breakdown of items an administrator can modify, and more module options for more flexibility of module integration for different size of communities. It also includes a direct option for administrator to moderate in-app chat as the module integration is live.
The users are charged based on a pre-defined pricing model. After working extensively with our analyst, we settled down a subscription-based MAU pricing modal with a free plan. By integrating with Stripe as our backbone payment solution, the admin account is responsible for subscription payment, with the flexibility to adjust payment plan between different tiers(higher tier allows higher MAU).Meanwhile, an admin account is also responsible to manage "organization" member permissions. Initially for public beta, we planned to identify admin (full dashboard access) and member (chat module setting-only access) account types, and we planned to roll out community moderator(module community moderation-only access) in the future.
Upon the finish of Plexchat UI style guide, I quickly switched to work on the admin portal product. After discussing the MVP scope with the team, with focus on making new user on-boarding experience very easy, I quickly came up with the design. Because of the strong foundation from the pre-determined UI guide, I was able to also create many standardized UI patterns for the web portal to re-use in the future.
Pulse is a 2-day internal hackathon project at Plexchat. I partnered with our analyst to design an internal panel to monitor feature performance and other key metrics from community engagement. We simply created a prototype to import some data from tableau into a HTML page in order to display real-time updates from the live app.
Community For Mobile Gamers
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.
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
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
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.
event room creation
manage event flow
admin event room creation
admin sets signup restrictions
admin manages events flow
admin manages event raffle
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.
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
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
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
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
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
workspace design for study experts
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.
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.
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”.
As an expert, i want to be able to respond to students faster, so that students know I’m working on their problem.
slicer interaction whiteboard & discussion with PM
proposed workspace flow
proposed step-by-step explanation workspace
The design goal was achieved, reducing the first response time with real content by 90 seconds for adopters
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.
Design a structured workspace to incentivize experts to engage students on followup questions when working on a homework problem
combined workspace with 1 chat input box
combined workspace with 2 chat input boxes
proposed chat options showing 1 hybrid input box or 2 input boxes
designed an internal test using google hangout and existing workspace to imitate the proposed workspace options
Conduct more usability testing to gather more data and establish a baseline for expert performance metrics.
mobile chat with video for education
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 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.
How can videos facilitate the student learning in the short and long term.
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.
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.
consumer product branding design
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.
logo version 1
logo final version
parent company logo