Product Design - Clockout
User Interface Design
Clockout is the first high-quality, targeted platform for young professionals that enables meaningful connection while also building a high-caliber personal network.
* Led the design for Clockout's official website.
* Produced clickable prototypes, design layouts, and interface design iterations for Clockout's official mobile application on the IOS system.
* Created TikTok video content for marketing before the app beta launch in Fall 2021 (Video editing, compilation of visuals, interactive prototypes)
2020.05 - 2020.08
How might we build a community ecosystem to help young professionals reduce loneliness and depression in order to celebrate friendship and empower personal growth through authentic connection?
Clockout has a seamless user registration process. Single question per step makes users won't feel doing work when registering.
Simple guidelines for a first-time user
to get familiar with features
On the homepage, shows what meetup did the user created and what the user will attending, also, user can discover more.
Flip through personality-centric profiles to meet new people. Callouts for users to satisfy specific needs (ie. start a podcast, game, book club, etc.)
Once the user taps on the "discover" icon, they can explore endless events, meetups, and groups that catered to their interests.
Users can host events on Clockout. After entering essential information about the event, they are able to publish and share it!
Users can form a group chat to plan and discuss an event together. They can find buddies that have the same interests through the experience.
Gen Z and Millennials are Lonely and Disconnected.
Transition from college
to the workforce
Move to new cities
Shift roles and
Today’s Platforms Don’t Work
Constructing Clockout’s position in the market, I ventured out and conducted an analysis of current competitors. I evaluated pain points based on user feedback from surveys and identified missing functions that Clockout could possibly utilize.
Why building a community ecosystem is so important for young professionals? From our research and user interviews, I have noticed those main pain points among the users.
Based on the data collected, I plotted a list of potential features. I was able to narrow down and focus on what is vital to the success of the product. I also came up with a few features that we could build in the future.
Choose a user as an example, the flow is simple. When new users complete the onboarding questions, there are 5 tabs on the bottom screen. They can explore different content, start buddy matching, create new events/groups/meetups, check their attending activities, and chat!
User flow Iterations
Simplify user registration flow
There are 2 types of users - individuals and organizations. I received feedback during the initial user testing that the registration process is too long. So to simplify user flow, I combined some steps into one screen and deleted some unnecessary steps.
"Explore" main page
It took me a while to define "Explore" page's design. I tried multiple layouts and decided to go with Iteration 2. Categorizing events, meetups, and groups in the first place gives users a more clear message, a horizontal layout also shows more content and avoids unnecessary scrolls.
Events/meetups page and detail
The essential task of creating an events/meetups page is a proper way to showcase information(time, rating, location, title...). To make the user experience feasible and accessible, multiple iterations comes into play.
"I think this is SO smart, we definitely need more ways to connect with folks outside of the typical big 3 social apps (IG, TW, FB) and the typical dating/ meet up apps. Now more than ever I feel like folks want to make genuine connections with friends online."
"It looks great! I really hope you launch it and that it’s acquired. This seems much more millennial friendly than Meetup— it’s like the friends you could make are pre-filtered which makes it seem safer. I’ve only gone to a few Meetup group meetings but you never know who is in there, membership fees are insane, and the people are all much older. This app looks great for a post-COVID world!"
"The app seems like a great platform to connect with like-minded individuals. Seems like a combination of a dating app along with meet up. I think the rating system definitely encourages people to actually attend events rather than just RSVP’ing “Yes”. There seems to be a lot of apps out there but do not have all the functions you provide in one."
"I honestly think it’s amazing. Especially nowadays it’s so hard to connect with people and the other apps seem a tad bit annoying. This one is simpler & I love the fact that there are meetups and events that you can attend. LOVE it and I can’t wait to use it!"
"I think the app was designed very well and seems to be very user friendly. The timing for releasing this app is practically perfect and I can see it receiving a lot of traction. This is a great initiative and I am very excited for the launch and sharing with friends of my own!"
"I think this is an awesome idea. I’ve given bumble BFF a shot in the past but it just seemed weird to me - maybe it has changed in the last few years. I don’t have too much experience or context from other apps, but I like that this not only shows you what events are happening but encourages you to meet specific people."
From scratch to product
Participating in creating an app from scratch is super rewarding as a product designer. I gained experience in compiling qualitative/quantitative research, conducting user interviews, and crafting high-fidelity interfaces and iterations. Through the process, I realized a great product needs to be buttressed by qualitative data, clear user flow, and lots of user feedback.
Designing is challenging but fun
I love talking to people about buttons and scrolling interactions. As a critical thinker, it is super cool to witness the steps it takes from conception to completion.