Enhancing Dayforce’s legacy mobile employee profile experience
Role
Project Designer
Timeline
Jan 2022 - Mar 2022
Team
Ceridian / Dayforce / Mobile
Skills
User Research
Prototyping
Interaction Design
Tools
Figma
Usertesting.com
About my internship
I worked with the Dayforce Mobile team to refresh the employee profile experience. As the lead designer for this project, I worked alongside a product owner and senior iOS developer, and received guidance from a senior designer and senior UX researcher.
Emerging problem
Profile management on Dayforce is inaugural to the employee experience, but the feature is visually lacking and outdated.
The background
Dayforce is a global Human Capital Management software leader that equips organizations to unlock their full workforce potential by serving as a single platform to streamline HR, payroll, talent, benefits, and workforce management. The platform focuses on improving work for employees by delivering a personalized experience that automates time-consuming tasks and offers self-service tools to manage their key HR insights.
The Dayforce design team has made refreshing the mobile interface a top priority as existing features are updated and new features are introduced, but the profile page remains untouched, and is now inconsistent with the web counterpart. The profile page is inaugural to the employee experience because it enables them to manage their personal information which is required for key employee interactions such as receiving compensation, requesting time off, and tracking documentation.
This derived the basis of our project objectives,
HMW
refresh and enhance the legacy Dayforce mobile profile experience?
Understanding the problem
To better understand the target users, I collaborated with a senior UX researcher on a series of research methods to
understand employee sentiments
about the existing profile experience and to
evaluate the usability.
After completing the interviews, we affinity mapped our insights to organize the themes and pain points brought up by users.
With the various insights collected, I synthesized my findings and observed
patterns of improvement
into three major categories. This helped the team refine our HMW statement to guide the next ideation phase.
Poor information hierarchy
There is a lack of transparency in system structure that makes the experience hard to navigate. Unnecessary elements interfere with the streamlined experience and cause users to run into barriers or dead-ends before landing on the desired page. Layout and typography could be used more purposefully to provide guidance.
Unintuitive editing
Design elements are not used universally. Inconsistent editor flows for various profile elements makes the experience feel incohesive. Multi-element editing access causes cognitive overload, and error prevention and recovery are lacking.
Poor visual design
The interface is visually outdated and less approachable than other modernized parts of the app that have already been refreshed. Also, the profile page on web does not align with that of mobile, which makes the user experience feel disjointed.
Project goals
Visualizing connections
I spoke with 5 full-time employees from Canada and the United States to conduct a
profile card sort activity.
Then, I cross-referenced their responses with the existing Dayforce web profile page to make sure all functionality could be carried over. An aggregated summary of the findings were used to establish the updated information architecture.
Informed by the structural layout, I began generating ideas to address each of the project goals. I referenced common design patterns adopted by the refreshed, modernized features on Dayforce, as well as the Dayforce Mobile design system.
1/ Improving the wayfinding experience
Guiding user insights
User research initiatives tell us that users go to their profile with a particular task in mind (e.g. accessing or editing an item). However, the current verbiage and iconography does not align with what users already see on the Dayforce web counterpart. Therefore, users would benefit from greater alignment and the use of categorical sections for navigation to cascade into the right information with minimal clicks.
Conceptualizing content navigation ease
I designed a list layout that makes it easy to skim through categorized information and facilitates scalability over time. The grouped table view is the common design component used across all of the profile pages. One or more table views exist on each page to organize profile elements.
For pages with more than one table view, the prioritization scheme is informed by the insights collected from the card sort activity such that groups of commands are both logically related and considered high-priority items when scanning the menu from the top.
2/ Improving the editing experience
The anatomy of the profile table view
A. Section Header
The header includes a group label to describe what the content represents. Header verbiage is informed by anecdotes collected from the card sort activity.
B. Content Area
Table view cells are listed in this area. A large table cell style is used to increase paddings and accommodate increased amount of information on the profile page.
C. Footer
The footer exists when a user’s personal information is collected via user input. Examples include emergency contacts, emails, and phone numbers. Users are enabled to generate content table view cells, so a quick action cell is used to guide the user to add to the list.
In the cases of user-defined or dynamically generated content, people expect the menu to accommodate the items added to it for visibility, so menu length and scrolling are preferred over breaking content into hidden hierarchical layers.
Conceptualizing the editing landscape
Display
Titles are used as subheadings to the section header, intended to provide additional information for the content of each cell. For example, a “Phone Numbers” section header contains table view cells titled “Mobile” and Business”. Subtitles are used to display system-generated or user-inputted data personal to the user related to each title.
Navigation
For cells with additional depth of data, an additional layer of content exists when the user clicks into the cell. A disclosure indicator is used to indicate a push to a secondary level in the hierarchy.
Interaction
A common mobile design interaction is for people to enter an edit state. For editable items, the lowest level of a hierarchical cell structure is an edit state. Selecting an editable cell item pushes the user from a read only view to an editable view, where text fields are used for entering custom values or a selection menu is used for selecting from a list of values. The use of text fields facilitates dynamic field value validation for items, such as email addresses and mailing addresses.
3/ Incorporating Dayforce's identity
The revamped profile page builds upon established interface elements within Dayforce’s mobile design system. The iOS design guidelines and mobile design patterns serve as a reference point to enhance coherence and efficiency. The incorporation of assistive elements like helper text and captions, alongside iconography that aligned with Dayforce’s brand identity seamlessly integrates the profile section with the overall refreshed app interface.
