Role
Sole Product Designer
Team
1 PM, 8 Engineers
Timeline
May - Nov 2016 (6 mo.)
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.
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.
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.
Old experience
The biggest shortcoming of the current information architecture is that the features are segmented and scattered across different sections.
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.
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.
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.
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.
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.
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.
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.
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.