Project name
Flygo Attendance App 0–1
Apr 2019 – Aug 2019
Role
UI/UX Designer
Team
UI *1, UX *1, App Engineers*2, Backend Engineers*2, PM*1
Responsibilities
User flow, usability testing, user interviews, design guidelines
Design Process
01 Product Strategy Definition
Product Background
The company originally lacked a proper internal attendance system. What began as a solution to internal operational needs gradually revealed commercial potential. After exploring possible business models, the team decided to develop it into a company-owned product, initiating a transition from internal tooling to a scalable product offering.
Why Did a Service-Based Company Decide to Build Its Own Product?
The team had the full design and engineering capability to build a product from 0 to 1
Startup teams lacked a suitable attendance management solution.
An opportunity to turn internal needs into a commercially viable product.
Business Model
The target users are startups and small-to-medium businesses with fewer than 50 employees. These teams typically lack dedicated HR tools and structured attendance management processes.
Given their organizational scale and budget constraints, the product adopts a free-to-use strategy in its early stage to reduce adoption barriers and support quick onboarding into daily workflows. The initial focus is on increasing business adoption and active usage, while gathering usage data and behavioral insights to inform future monetization planning.
According to national statistics, there are approximately 70,000 small and medium-sized enterprises, with an average of 20 employees per company, resulting in an estimated user base of around 1.4 million people.
02 Requirement Discovery
Competitive Analysis
Early product exploration focused on competitive analysis. By reviewing and testing existing attendance tools, core user needs around clock-in, leave, and approval workflows were identified. These insights helped narrow the scope to three core features, which formed the basis of subsequent design and flow decisions.
Analyzed and deconstructed clock-in workflows and feature modules across multiple attendance products
Feature Definition
After defining the core features, the next step was to further structure and refine the requirement information. This included form-based workflows such as leave requests, business trips, missed clock-ins, and overtime, as well as defining the detailed feature scope within employee profile settings.
03 Interface & Flow Design
Clock-in Flow
Step1
Context & Initial Direction
At the early ideation stage, the design emphasized clear “Clock In” and “Clock Out” labels to guide user actions. After revisiting this assumption through team discussion, we found that users cared more about being within the correct location and the valid time window than the labels themselves.
The design direction was then adjusted by simplifying the interface and restructuring the information hierarchy, enabling users to quickly understand their current status. The first iteration was refined into two primary actions: “Record GPS” and “Clock In”, which became the baseline for subsequent usability testing.
The initial clock-in design adopted a two-button layout to support field-based check-in scenarios.
Design Proposal
Step2
Usability Testing Execution
After the first internal usability test, we found that the two button layout caused confusion. Users struggled to understand the difference between “Record GPS” and “Clock In,” and most did not associate GPS recording with field-based or business travel check-in scenarios.
Based on these findings, we decided to remove the record GPS button and retain a more intuitive one tap clock-in experience.
Test Results
The test results showed that the “Record GPS” button caused user confusion, which negatively impacted clock-in efficiency. As a result, the design was adjusted to a one-tap clock-in flow and released for further validation.
Step3
One Tap Clock-in
In follow-up user interviews and app feedback, most users responded positively to the overall clock-in experience. The one-tap interaction reduced cognitive load and made the process more intuitive. Most users could also clearly understand the difference between the first and last clock-ins.
When users clocked in multiple times within a single day, they experienced the flexibility of digital attendance. Instead of being limited to simple clock-in and clock-out moments, the system more accurately reflected each individual work period and location, unlike traditional attendance methods that only allowed a single clock-in and clock-out per day.
After confirming the core clock-in behavior, we also addressed other common usage scenarios, such as incorrect clock-ins, late arrivals, missed clock-ins, and early clock-ins.
Form Requests
Form requests for attendance-related scenarios were consolidated into a single flow, including leave, business trips, overtime, and missed clock-ins. Users can submit requests by simply entering the start and end time, reducing unnecessary steps. Once submitted, the request status is synced to daily attendance records, allowing users to easily track approval progress and review history.
Detail Review and Optimization
Manager Approval Flow
At the beginning, we assumed approval was simply a pending review list, so the design focused on simplifying the information architecture. However, in real-world scenarios, managers often need to review multiple requests in a single day, and complex workflows directly reduce efficiency.
Based on this insight, the approval flow was redesigned using swipeable cards and quick-tap interactions. This allowed managers to review and approve requests more intuitively in batches, significantly reducing handling time.
Design Concept Ideation！
This concept was inspired by card-swipe interactions commonly used in dating apps. The quick, decision-based behavior aligns well with how managers review leave requests. By applying this interaction pattern to the approval flow, the review process became more intuitive and efficient.
簽核紀錄
Brand and Component Guidelines
Design Concept
Color Palette
A warm orange-yellow was chosen as the primary color to represent energy and freshness, extending the feather imagery and creating a positive, approachable brand tone.
Design Guideline Consolidation
Due to team role allocation, the initial UI mockups were quickly created by my manager and released early. I later took over and reorganized the design system, including color, typography, component styles, and interface details, while completing the design guidelines to ensure engineers had clear and consistent references for future UI updates and feature iterations.
04 Post-Launch Iteration
After launch, the team focused on increasing enterprise adoption and user retention. In addition to continuously improving existing features and expanding visibility, several new features were introduced. These included the “Get Started” learning section, which provides online resources for working professionals; a three-day ad-free mascot campaign designed to improve ad conversion; and temperature and work reporting features launched in response to the pandemic.
Looking ahead, paid plans are planned with advanced features such as payroll calculation and flexible scheduling, aimed at expanding revenue streams and increasing overall product value.
Project Reflection and Conclusion
This project was a key milestone in my growth as a designer. It significantly shaped how I approach design communication and decision-making.
At the time, I had a strong debate with the PM over whether the clock-in feature should use one button or two. Because I could not clearly articulate a solid design rationale, the final decision followed the PM’s proposal. Looking back, this experience taught me that design value is not only about creating good interfaces, but also about clearly explaining the reasoning behind design decisions.
This was also my first experience leading a 0-to-1 in-house product design. I was involved from business strategy and product positioning through launch, and continued to conduct user interviews and refine design guidelines post-launch. I am grateful for the trust and space given to me early in my career.
Through close collaboration with engineers across multiple iterations, this project became one of the most formative and rewarding experiences in my career, and remains a launch I am proud of.
