top of page
clockout thumb.jpg

Product Design - Clockout

Client

Clockout.Inc

Scope

User Research

User Interface Design

Usability Testing

Prototyping

Marketing Strategy

Duration
About Clockout

Clockout is the first high-quality, targeted platform for young professionals that enables meaningful connection while also building a high-caliber personal network.

My Responsibilities

* 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

about1.jpg
about3.jpg
about2.jpg
about4.jpg

Our focus

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?

Seamless User
Registration

Clockout has a seamless user registration process. Single question per step makes users won't feel doing work when registering.

Onboarding
Walkthrough

Simple guidelines for a first-time user

to get familiar with features

Homepage

On the homepage, shows what meetup did the user created and what the user will attending, also, user can discover more.

hone1.png

Buddy System

Flip through personality-centric profiles to meet new people. Callouts for users to satisfy specific needs (ie. start a podcast, game, book club, etc.)

Explorable
Community

Once the user taps on the "discover" icon, they can explore endless events, meetups, and groups that catered to their interests.

Event Creation

Users can host events on Clockout. After entering essential information about the event, they are able to publish and share it!

create2.jpg
create3.jpg
create4.jpg
create5.jpg

Squad Creation

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.

chat1.png
chat2.png
chat3.png
chat4.png
chat5.png

Starting Off

Gen Z and Millennials are Lonely and Disconnected.

WechatIMG786.jpeg

Transition from college

to the workforce

WechatIMG787.jpeg

Move to new cities

WechatIMG788.jpeg

Shift roles and

industries

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.

Competitive analysis.jpg
Pain Points

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.

painpoint.png
Prioritization Plotting

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.

Prioritization plotting.jpg
Information Architecture

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!

Clockout flowchart.jpg

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.

flow change.png

Design Iterations

"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.

iteration1.png

Design Iterations

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.

iteration2.png
User Testimonials
Smiling Girl

"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."

Trendy Young Man

"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!"

Young Businessman

"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."

Working from Home

"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!"

Smiling Person

"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!"

Man with Tattoos

"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."

Reflection

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.

Next

Reimagine Livestream Shopping

thumb.png
bottom of page