Empower teams through workforce management tools. Place shift management and staff scheduling in your employees' hands

 
Role
Sole Product Designer
Team
1 PM, 8 Engineers
Timeline
May - Nov 2016 (6 mo.)
 
notion image
 

What I did

As the founding designer at Celayix, I led the complete product redesign of their employee mobile and web app from conception to launch and beyond. Working in an agile and collaborative environment, I enjoyed working across multiple teams and projects at different design and development phases.
Being part of the development team, I worked extensively with the Software Manager, Product Manager, Business Analyst, Front-end and Back-end Developers, and Quality Assurance Analysts. Since most of my teammates are from a computer-science and engineering background, I needed to advocate UX design methodologies and transfer UX knowledge to ensure our products were user-friendly and usable.
By asking questions, gathering and translating business requirements to user goals, and understanding the problem space, I turned broad and conceptual ideas into practical and valuable solutions for our customers.
 

 

Why does it matter?

Our mission for the redesign is to establish Celayix as a simple and sophisticated workforce management solution, beginning with the employee experience.
We want to transition Celayix from the functional but isolated feature modules constructed ad-hoc over the years to an integrated platform that can reduce the stress and complexity of workforce management.
 

 

Background

Celayix provides an extensive workforce management tool suite, including employee scheduling software, time & attendance, and employee communication. Solutions meet the needs of small and medium businesses while addressing the complexity of enterprise organizations. Celayix differentiates itself from the competition as the software is highly flexible and adaptable to the rules and situations of each organization.
Team Xpress is a mobile and web app for team members to manage their schedules and communicate with management. It also serves as a mobile time clock for check-in and check-out of remote staff. Employees can see any open shifts for self-scheduling or shift-bidding, receive reminders for upcoming shifts, input time off requests, review all previously worked shifts, track hours, including overtime, statutory time, and holiday and protection of employee privacy.
 

 

Understanding the problem

During the first few weeks at Celayix, the business analyst and product specialist gave me an overview of our existing product and how it works. The feature set outnumbered many of our competitors, but the convoluted labyrinth of modal windows made for a difficult-to-use interface and confusing experience.
When familiarizing myself with the product, I realized many system areas had been sewn together as independent patches without carefully considering the current design and workflow. One reason for this messy interface is customer requests for custom work and tailored solutions.
Although Celayix does offer scheduling capabilities towards a higher level of specificity to meet the unique needs of its customers, it is easy for the system to become chaotic with all the different functionalities and moving parts. When it came to the complete redesign, I knew it had to align with the mission at Celayix to simplify scheduling, which means keeping the interface minimal and the experience simple. Complex does not mean complicated.
 

 

Developing guiding principles

Through multiple design workshops, we could form the product's objectives and goals. We discovered several guiding concepts and business and sales goals.
These objectives and guiding principles are crucial for coordinating our efforts and ensuring we develop a solid justification for any user experience enhancements. The principles help set priorities and ensure UI/UX changes concentrate on design and development efforts with the most significant customer value, not just for novelty or cosmetic enhancement.
Principle #1: Feel in control
Users — employees especially — should feel they have greater control over their work-life by using the Celayix platform.
Principle #2: Fair, transparent, and understandable
The Celayix platform should be fair, transparent, and understandable to all users (employees, supervisors, schedulers, and administrators).
Principle #3: Fast and focused task completion
The Celayix platform should minimize administrative overhead by helping users accomplish tasks in a fast, focused, and logical way.
 

 

Defining product goals, signals & metrics

Next, we workshopped to create a solid foundational design framework to evaluate against the internal business objectives, product goals, and user feedback.
 
Goals-signals-metrics
Goals-signals-metrics
 

 

Giving context and causality to design challenges

Collaborating with Product and Engineering, we framed the design problems in a Job to set the context and acknowledge causality. Job stories give insight into users' situations, motivations, and expected outcomes.
 
Job stories
Job stories
 

 

Overview of the user experience

Although Celayix has achieved over fifteen years of market success, the family of modules that have evolved piecemeal has resulted in a fragmented user experience, one that requires users to "pogo-stick" between many siloed modules, which puts the happiness, retention, and task success of current customers at risk. The lack of confidence and pride in this tool makes it difficult to showcase this product to potential clients. Celayix needs to overhaul its user experience to develop into the coherent and simple platform it aims to be.
 
Current, new, and future user experience
Current, new, and future user experience
 

 

Old experience

The biggest shortcoming of the current information architecture is that the features are segmented and scattered across different sections.
 
Old application map
Old application map
 

 

New experience

In the new strategy, we grouped information by its function. We will organize all information and actions related to my upcoming schedule in one area and everything about one's work history in another. The landing page displays the most critical information at the moment.
 
New application map
New application map
 

 

Building the information architecture

Once I better understood the high-level UX, I started building the Information Architecture, which is the activity of organizing, structuring, and labeling content clearly and logically to help users understand information and accomplish their goals efficiently and effectively. The goal is to make it quicker and easier for employees to navigate and find the information needed to perform shift activities and schedule tasks.
 
Information architecture
Information architecture
 

 

Mapping out screens with wireflows

I represented the paths and interactions a user of Team Xpress can make using low-fidelity wireframes. Wireflows help communicates user workflows and tasks with Product and Engineering.
 
Wireflow
Wireflow
 

 

Communicating activities with user flows

In addition to wireflows, I used user flows to break down the steps a user tasks to achieve a goal or task. A user flow outlines the actions taken at each stage of the desired path to complete a particular task or objective and flows in a single direction.
 
User flows
User flows
 

 

Outlining the app blueprints with low-fidelity wireframes

To communicate fluently in a language with another person, both parties must have a shared depth of vocabulary, proper style, and correct grammar. Communication between an interface and its users must share a common and understandable language. The breadth of UI elements and patterns must have identifiable characteristics and defined behaviors.
Although each UI element is distinct, we cannot independently design each UI element as they do not function alone. Similar to an interactive conversation between two or more people, an interface is between the system and its users.
Every UI element interacts with and relates to its neighboring elements. Hence, it is essential to develop a relationship between the parts and how they work in parallel, be it within a component or pattern.
 
Lo-fi wireframes
Lo-fi wireframes
 
When developing a visual language, it was essential to design the standard components to be adaptable and reusable to support our multiple products, platforms, and devices.
Since we are creating hybrid mobile and web apps, we cannot use Google Material Design for Android and Apple Design for iOS platforms verbatim.
Each component had to be meticulously crafted from scratch, making it highly customizable and flexible to the needs of our users. In addition, each UI element is responsive to mobile and desktop screen sizes and touch and non-touch devices.
 
Mobile UI anatomy
Mobile UI anatomy
 
Once I understood the UI vocabulary and grammar, creating a manageable and cohesive experience between the design and development became more accessible.
Since the UI elements and patterns share a common language, they can be repeated and scaled across multiple products and devices.
The user interaction and screen flow also have a consistent behavior that allows our users to learn and familiarize themselves with the system.
 
Desktop UI anatomy
Desktop UI anatomy
 

 

Design process

Being a fresh grad and the sole designer, I learned how to build my creative confidence at Celayix. I knew when and how to compromise and consistently advocated for good design. I solicited feedback from different company stakeholders at each stage of the design process.
Define: When given a new task or feature, I would meet with the Director of Software Engineering (my manager), PM, and BA to define the problem and collect information about the needs of our users and the needs of our business.
Ideate: I would communicate the concepts, user, and screen flows through sketches and mock-ups with the team to generate feedback and flesh out ideas.
Prototype: Once the lo-fi sketches/mock-ups transitioned into high-fidelity wireframes, I validated how a feature would work with the company's stakeholders, especially with the developers and QA.
Build: During the UI implementation phase, I worked closely with the front-end and back-end developers to bridge the gap between design and development. Once I understood the feasibility of the UI, I made compromises based on our time and technical constraints.
Evaluate: I received feedback and addressed usability issues from QA. The PM and Customer Success Team would also forward me any customer complaints and suggestions.
 

 

Final designs

 
Dashboard: Employees can check in, check out, start a break, end a break, and perform safety checks.
Dashboard: Employees can check in, check out, start a break, end a break, and perform safety checks.
 
Shift changes: Team members can acknowledge shift changes.
Shift changes: Team members can acknowledge shift changes.
 
Shift changes: Team members can acknowledge shift changes.
Shift changes: Team members can acknowledge shift changes.
 
Shift changes: Team members can communicate to their supervisor whether or not they can work a shift.
Shift changes: Team members can communicate to their supervisor whether or not they can work a shift.
 
Self-scheduling: Team members can view open shifts and self-schedule themselves.
Self-scheduling: Team members can view open shifts and self-schedule themselves.
 
Shift bidding: Team members can express interest in working an open shift.
Shift bidding: Team members can express interest in working an open shift.
 
Shift bidding: Team members can view their shift bid status and check whether they won or lost the bid.
Shift bidding: Team members can view their shift bid status and check whether they won or lost the bid.
 
Availability: Team members can submit and communicate their availability to supervisors in real-time, ensuring team members only get scheduled when they are available.
Availability: Team members can submit and communicate their availability to supervisors in real-time, ensuring team members only get scheduled when they are available.
 
Time off requests: Team members can view accruals and submit requests for approval.
Time off requests: Team members can view accruals and submit requests for approval.
 
Timesheets and Timecards: Team members can capture timesheet and time card information for supervisor review and approval and view their working hours.
Timesheets and Timecards: Team members can capture timesheet and time card information for supervisor review and approval and view their working hours.