Dayforce Mobile is Ceridian's human capital management software. This project is from July to August 2021, as part of my Summer internship. The Mobile Org Chart helps employees discover other employees, promotional opportunities for career growth, and D&I efforts.
Problem Definition
Guiding statement
I am an employee that is trying to view, navigate, and action upon an employee org chart because I need to know a colleague’s reporting structure.
Defining the problem
User & stakeholder interviews
To set some context and learn about the current experiences on web, I reviewed interviews with:
OutcomeThis allowed us to have a better idea of the user needs and possible use cases of the mobile org chart as we moved forward to establish features.
Competitive analysis
Key takeaways & actionables
Ideation
Principles of mobile design
This was my first time designing solely for a mobile app; I relied on existing principles of mobile design that were backed by research to guide decision-making.
Make interface elements clearly visible and balance legibility of text & white space.
Increase touch screen targets & spacing.
Keep interface elements to a minimum.
Minimize data input.
Understanding user flows and edge cases
We began by creating a user flow. This documented the actions required by the user, entry/exit points, and the pages a user would see. This was highly valuable in helping us figure out what screens needed to be built out and understand how a user would navigate through the app.
Interaction patterns on mobile, especially when presenting this scale of information on mobile can be tricky. To better understand the requirements of navigation within the mobile organization chart, I laid out a few scenarios that the design needed to accommodate - one of which is presented below.
The larger black box is the focus user, the blue boxes are the users that will be interacted with in the prototype, and the levels in the diagram correspond to the hierarchy within the organization chart.
This type of design practice forced me to prototype in low fidelity quickly, and encouraged thoughts around navigation in all directions (up, down, left, right) as the interactions which in turn fuels the visual experience.
Design decisions
With any design, it's important to explore and note the tradeoffs of each decision you make.You will also notice that despite being the final version, a set of screens will not only have pros - we had to make compromises in our designs and understand what to prioritize, especially when working on a consumer facing product, it's about finding that balance between business and user requirements.
Organization chart icon is housed beside contact information indicators. No clear relationship between 3 first icons & the last.
Organization chart icon is outside of work information and functions as a pattern not seen throughout the application.
Pairing icon with text improves understanding and accessibility.
Increased tap target (spans width of screen).
Lack of icon inclusion reduces accessibility.
Connection between manager as well as organization chart is clear.
Text is styled as a tertiary button and it is clear that it is clickable.
Through using a show/hide button, users are forced to click multiple times to see any information.
Forcing a click allows us to call the data in increments.
Prevents cluttering the screen and allows a user to focus on necessary data.
Less technically feasible due to the vast amount of information to be called.
Not scalable for larger organizations and easy to get lost.
User can view all members of the organization chart without additional actions.
Forces a user to click to show a level above in the org chart.
Calls information in increments depending on the user level.
Reduces screen clutter and focus information is clear.
Horizontal and vertical scroll implementation is quickly responsive to a user's changing search needs.
Circular nodes for all elements limits differentiation between focus and surrounding nodes.
Increases in font size with a fixed circular node could result in varying heights of each level.
Provides no information on surrounding nodes without a drag interaction to this node.
Varying height hierarchy feels cluttered and forces a user to move their eyes up and down the screen.
Card organization increases division between interface elements.
Connector lines clearly show the relationship between levels.
Provides no information on surrounding nodes without a drag interaction to this node.
Presents information regarding the focus user in an organized manner, leveraging dividers and colour differentiation.
Configurable based on a company's needs.
Fixed height and width for the card prevents drastic height changes in levels as a user navigates.
A tap interaction may be too sensitive, especially with the small tap area.
If our user is on the bottom half of the screen, their name & details will be covered.
Easy to take action for each user and indication of focus user also improves clarity.
Keeps the user on the same page to take action (reduces friction).
Keeps the user on the same page to take action (reduces friction).
Tap target is too small and unable to increase the size without affecting other levels.
More information available right away and easier to see these actions.
Never covers certain nodes to allow for actions.
Have also enabled a quick action menu for 'Power Users' that does not force users to leave the org chart.
Reflections & next steps
Refine prototype interactions
Conduct usability testing sessions
Technical feasibility review
How do we ensure scalability?
Explore accessibility decisions