Xero Product Redesign
Xero | June 2016 - September 2016
Xero is an online accounting and HR platform for small to medium-sized businesses. While working at Xero, I redesigned the employee management experience.
CONTRIBUTIONS
Interaction design
Primary and secondary user research
Usability testing
Visual design
Prototyping
Project management
Design Problem
Xero customers struggled to add employees to their company payroll due to a confusing user flow and information architecture. In addition, parts of this flow required having "expert" knowledge and waiting for the employee to provide information – both issues that significantly increased time to completion. This problem directly conflicts with Xero's core value proposition, which is to provide customers with the tools to easily set up and manage their own payroll. In addition, this pain point resulted in underutilized features such as the employee overview page, which functions as a hub for managing an organization's employees.
Goal: Redesign the employee management experience to make it easier for small business owners to add their employees to payroll and manage them online. Improving this experience would ultimately help drive product adoption and engagement.
Old add-employee flow.
Old employee overview page.
Process
01. RESEARCH
I conducted both primary and secondary research to answer a number of questions before starting the design process. I used following methods:
Stakeholder interviews
Competitive analysis
Customer feedback
Integrated previous customer interviews and usability testing
Market analysis
Card sorting
I used these research methods to help me understand the following:
Xero's business goals.
Primary pain points in the small business industry.
Customer personas (needs, wants, and motivations).
Customer mental models.
Pain points customers experienced when adding an employee to their Xero account.
What employee insights are most valuable to customers.
Design standards.
Through my research, I found four primary issues with the experience:
Userflows - The steps a user takes to accomplish a task.
Information Architecture - The layout and organization of content.
Guidance - How we help users know what they have done and what they need to do next.
Content - The actual information provided to users.
02. DESIGN
Once I completed my research, I started the design process by gathering inspiration from similar website and services, and proposing a new user flow for the employee management experience. I completed multiple design iterations at both the user flow level and wireframe level.
I focused on optimizing two parts of the employee management experience: the employee overview page and the add-employee flow.
Design goals:
Employee overview page
Create a fresh look that better aligns with the Xero "human" design principle by redesigning the layout of employee data.
Provide better value to small business owners and managers by surfacing useful employee data.
Add-employee flow:
Improve completion time by redesigning the user flow and layout.
Process:
Moodboarding
User flows
Sketching
Multiple design iterations
03. USABILITY TESTING
Once my stakeholders were in agreement with the proposed designs, I conducted usability testing with the new designs to assess performance against the old designs.
The tests specifically focused on assessing:
The value of the data shown on the employee overview page.
Whether or not the reorganization of content in the add-employee flow improved confidence.
Which elements of the new add-employee flow contributed to more successful completion of the flow.
The new designs did a better job at guiding customers through the add-employee flow, and provided more useful information on the employee overview page. However, the visual cues used to provide guidance received mixed results and were a main focus for the next iteration.
04. FINAL ITERATION
I designed the final versions of the employee overview page and the add-employee flow using Sketch and turned them into interactive prototypes using InVision. The employee overview page is ready for development, whereas the add-employee flow is still in the design phase, and needs additional validation.
New add-employee flow.
New employee overview page.
Key Challenges
The add-employee flow had to allow multi-user completion. Allowing both business owners and their employees to fill out the information in the add-employee flow was an important feature to address some of the key pain points in the old design, but adding co-editing capabilities introduced another layer of complexity to the page layouts and information architecture. To approach this problem, I first conducted a card sort to understand how customers wanted to organize the content, and did some exploratory usability testing at the user flow level. The next step for this part of the project would be to conduct additional usability testing on my final iteration.
Visual and interaction designs had to align with in-flux design decisions. At the time of my internship, Xero was still in the process of finalizing their design standards. In addition, other members of the design team were updating other Xero products at the same time that I was updating the employee management flow. To address this, I maintained open lines of communication with members of the design team to ensure that my design decisions worked within the greater framework.
Limited analytics on customer behavior. This made it difficult to identify which data should be surfaced for an employees on the overview page. Therefore, I talked with internal employees who were representative of Xero customers to inform my initial design decisions.
Limited access to real customers. This limited my ability to accurately assess how the new designs would perform. To remedy this, I conducted usability testing with internal employees who were not on the product team, and were representative of Xero customers.