Kollabo started as a simple marketplace app named "Kollabo Market", and now it is expanding to a mobile community app that helps connect Koreans living abroad. This app provides various living services and convenience to all Koreans in need, as well as unity where users communicate with each other, and share information about what’s happening in their neighborhoods.
01. Improving marketplace experiences by providing innovative message feature, and newly designed item listings and detail screens with redesigned UI components
02. Adding new features of housing, job searching and social networking as a community mobile app, and improving the profile feature that encourages users to increase reliability and the communication convenience of the app
User research
Online Survey
Competitor Analysis
Style board
Wireframes
Design System
Prototyping
Collaboration
Digital Illustration
June 2020 - March 2021
Figma
Zeplin
Principle
Photoshop
Illustrator
Procreate
4 Engineers
1 Product Manager
1 Product Designer
According to the 2010 Census and the2015 and 2019 American Community Surveys (ACS), there are approximately 2 million Koreans residing in the United States, making it the country with the second-largest Korean population living outside Korea (after China). As their population increases, the number of portal sites letting Koreans who have left their home country share their foreign life experiences and living information has also increased.
Despite the fact that the services most used by modern people are mobile services such as cell phones and tablets, the most websites are focused on desktop design so that users are experiencing difficult accessibility while using mobile devices. (e.g. font, size and layout of the content) to the services.
Since most websites provide services / information for either overall nation or a single region (State or city), users have to sign up or visit multiple websites if they want to move or investigate other areas.
A marketplace app to find living needs and collaborate with neighbors for deals has already been built but . . .
Kollabo was developed to provide a single mobile app service for the different regions that users can easily access with their smartphones , and with no hassle of visiting/signing up multiple portal websites. Target audiences of this app can be any Korean living in the United States, but especially those who need:
for Koreans who are experiencing a language barrier
that can help users find a way to enrich their lives by fulfilling physical/mental needs
for Koreans who are experiencing a language barrier
Through online survey, user research and team meetings, I discovered four major pain points in the current marketplace app, and developed the design concepts for new features (housing and job market) which are needed for the community app functionality.
Through online survey, user research and team meetings, I discovered four major pain points in the current marketplace app, and developed the design concepts for new features (housing and job market) which are needed for the community app functionality.
Constructing a UI style guide for branding establishment
Enhancing a marketplace experience and developing 3 new features as a community app
Increasing signup/users' app usuage
Our challenge was to target the right audience and their needs to place the business in a competitive advantage. Therefore, I looked closely at Korean US platform apps and websites to analyze their strengths and weaknesses.
Based on my research and analyses, I prioritized features in the app according to business and user needs and translated them over when working on the information architecture of the app.
After multiple ideation sessions with the team, we first expanded a market tab in the navigation to 3 tabs: Market, Housing and Job. We also added the new feature of profile verification in a Profile page where users can manage their profile to earn tier badges through various methods.
I outlined the wireframes of the entire app and created several key paths of the scenarios to analyze user flows and interactions.
The mobile app is crucial for Kollabo. It's designed to feel clean, modern, and incredibly simple. After sharing and confirming my findings with my team, I began to create a UI style guide by dismantling the mobile landing screen and logo, which were the only design sources built at that time.
The first brand element I established from this method was the icon for the app tab bar. With this icon as a reference point, I determined that the UI would be mostly black and white while the highlight colour would be scarlet and yellow. Scarlet, used for the meaning of “courage” and “joy” in the landing page and logos, was chosen as the main highlight colour to keep branding consistent.
For the typeface, I choose “Noto Sans Kr”, one of the best font families selected by Google for a good readability. With the chosen colors and font, I created reusable components which could be used for different features and flows, and it resulted in reducing technical complexity while enhancing the branding with a familiar pattern.
The profile page provides the badge card that is composed of the various identity verification methods, user's activity, and badge status. When a user achieves three activities of "Kollabo activity", a silver medal badge will be displayed on the user's profile, while a gold medal is for achieving all five activities. Users can change their profile background picture and app setting such as language and private information.
This is the home page of the current product as a marketplace app (V1) with a marketplace standalone feature before adding housing, job market and Social networking (V2). Users will see the item listing from their neighborhoods based on user settings, and also explore the items from different regions by changing the city.
A floating action button in the tab bar is for item posting, and the posting process is composed of simple three steps:
The final step allows the user to edit selected photos, write captions, and add relevant tags which will be displayed in the item card. Users can either use premade tags or customize them. The tag section is located at the bottom and shrinks to the floating button on the lower right corner while typing the captions.
The floating item detail box on the chatroom allows the user to to easily remember which item is being referenced in their chat with the buyer/seller, which helps with the confusion of multiple ongoing transactions. Users can also create an event for meeting. These events further assist users with event details for the meeting place and reminders.
This is the marketplace V2 for the community app with new features of housing, and job market.
The current Kollabo app is in the transition process between a marketplace app and a community platform app. There are home screens for the new version composed of marketplace, housing, and job market. A filter menu will be added in the top navigation bar, and users can either click the menu or scroll horizontally to switch the contents. A posting action button will browse three options so that users can post any content with a single action.
-Joseph Kim, Product Owner-
Increase of SignUp
Final Screens
New Features
For 10 months, our team successfully adapted a new UI style and improved profile features based on my design, and has launched the new version for both iOS and Android app (based on March 2021). I also paved the way for expanding a simple marketplace app to a community platform app by conceptualizing and envisioning the new features for job and housing.
As a product designer, I’m proud of myself that my design and unique experiences, having lived and worked in the USA as a foreigner, contributed to developing a community platform app that can help others from a similar background and foreign living experience collaborate with people of diverse backgrounds and to bring empathy to every stage of the design process.
Besides the product design, I also created approximately 25 illustrations for SNS marketing feeds by using Kollabo’s branding palette, and developed a UI illustration library with Illustrator.
Click the following link to explore Kollabo UI illustration library!
.png)
.png)
.png)
