Pintap Mitra: a social media app for moms
Pintap Mitra is a social media app for moms by empowering them with a community of hard-working and smart moms. Through webinars, workshops, and product reviews, we connect FMCG Principals with the community and let them engage in a new way
Year
2021
Service
UI Design
Category
Mobile App Design
Tool
Figma
Our users can create posts in two different places; in public and in groups. Our version of a post behaves more like Facebook/LinkedIn post, rather than Twitter’s Tweet. A post contains several elements such as the caption, images, interaction elements for instance, like and comments.
We’re using Sendbird’s chat engine for our chat feature. So I shaped the chat feature and flow to the way Sendbird’s chat engine works.
There are two types of groups, user-generated groups and official groups. Official groups are groups that are moderated by Pintap Mitra’s admins. Official group can be based on interests and regions. User-generated groups are a group that can be created by any user. Currently we only support public groups, but private group with approval system is on its way.
Since we regularly collaborate with the Principals to connect with our community members, we often hold events, both virtual and physical events. Initially we were using the dedicated group feature to organize, discuss and post the documentation of the event. But as time goes on, the amount of the events is increasing, and if we always create a new group for every event, the amount of groups (unused afterwards) will amass. The other alternative might be using the existing group to organize the events, but some events will contain some information that only the event attendees can access. So created a dedicated feature for events.
The event feature has several elements, when the user hasn’t join the event, there will be a dedicated promotion page for the event that can container a banner cover, event title, event date & time, event description, event’s T&C, event’s countdown and the join CTA button.
After joining the event, the attendees have a designated discussion zone for that specific event that is not accessible for non-attendees.
We design our products to be inclusive to our users so we need to ensure our designs meet the recommendations of Web Content Accessibility Guidelines (WCAG) 2.0. Decorative elements or text that is part of a logo or brand name have no minimum contrast requirements. However, every element in our product need to meet this contrast requirements especially if those elements are part of an action or texts.
To compute this contrast score, we use the equation provided by WCAG that determines the score and its ratio. The equation outputs a score between 0 and 21 with 21 being the best for our eyes and 0 being the worst (black on black or white on white). Every combination of color needs to score at least AA to ensure its legibility.
We’re using the Nunito font for almost everything. We only use the Regular, Semibold, and Bold weights for our interface texts.
The smallest font size we’re using is 10px for Small Caption and the biggest is 32px for Heading Large. We’re also using 150% line-height for font size between 10px to 24px and 125% line-height for 32px font size.
I also developed an icon font for the developers so they don’t have to manually export every icon into an svg. I sourced the icon-font in a GitHub repo so the developers do not need to ask me for an updated icon font every time there’s a new icon.
I also updated the components to support Figma’s Auto Layout v4.0, Variants, and Component Properties so we can achieve a smaller component library while retaining the flexibility of the variants.
Since we launched in December 2021, our community user base has grown about 400%. Of course this achievement is not solely because of the design and the app, the business department also plays a huge role on the growth.
But it’s not all smooth like butter, like a criminal undercover we saw from the analytics that the chat feature usage is very low, especially the 1-to-1 chats. We didn’t realize that it is really hard to move the conversation from WhatsApp to our app. So in August 2022, we decided to sunset the chat feature all together to reduce cost.
We also faced some hurdles since we launched at the end of 2021. Since Pintap Mitra is a user-generated-content (UGC)-based app, per Google Play policy there has to be some kind of content moderation in the app, and we completely overlooked that. We had to quickly implemented a simple yet robust content moderation policy.
We also made the admin-side CMS to view, manage and moderate the reported content. There are three actions that can be taken for each report; no-action, pending-investigation, action-taken
no-action: no violation found.pending-investigation: investigation ongoing or need further investigation from the moderation team.action-taken: reported content removed due to the violation of community guideline.
The second biggest hurdle is two weeks before we launch, the Pintap Mitra brand has completely rebranded. The design you saw above was primarily blue, and the new branding is pink. We were using the previous Pintap branding which was blue-yellow.
We also changed the approach on user handles. Initially, we use the Facebook/LinkedIn-like approach, using full name only for user profiles. But we realize that most Indonesians especially the mid-old generation (which is our target market) only have one word as full name. They don’t have the first name, middle name, last name combo.
To differentiate between one Budi to another, we added a Twitter/Instagram-like username approach so the users can personalize their handle as much as they like. We also merged first-name (Nama Depan) field and last-name (Nama Belakang) field so most Indonesian can register and access the community without facing any errors.
