Creating a Mobile Org Chart
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
01
02
03
04
User & stakeholder interviews
To set some context and learn about the current experiences on web, I reviewed interviews with:
- Human resources department lead
- Software developers
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
- Consider scalability and how to account for larger organizations
- All user actions should be taken from within the organization chart
- Differentiate between focus nodes/users and surrounding pieces of information
- Information presented needs to be simple and clear
- Consider navigation to the mobile organization chart (entry/exit points)
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.
Design decision 1: Search flow and accessing chart
Version 1: Icon in main action bar
Organization chart icon is housed beside contact information indicators. No clear relationship between 3 first icons & the last.
Version 2: Icon & text below info
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).
Final: Tertiary button
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.
Design decision 2: Navigation
Deciding how a user would navigate this experience and move around this organization chart was the most important design decision, and still requires research in terms of scalability.
Version 1: Show/Hide Button
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.
Version 2: Endless scroll
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.
Final: Populated automatically
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.
Design decision 3: Card style explorations
The amount of information shown to a user is important because a user should have enough detail to action directly from this org chart; but we should still maintain privacy of each member in the org chart and limit interface elements.
Version 1: Name, role, reports
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.
Version 2: Name, role, reports, team
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.
Final Version: Name, role, reports, team
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.
Design decision 4: Actions from the organization chart
The final requirement of the organization chart was to allow users to action on this information.
Version 1: Pull down menu
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).
Version 2: Iconography
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.
Final version: Quick action menu
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
With this organization chart, navigation and the experiences moving from node to node is an uncommon pattern. It's important thus to refine the prototype interactions and leverage external prototyping tools such as Adobe After Affects, Invision, and more to better represent the desired interaction experiences.
Conduct usability testing sessions
Due to timelines, we were unable to conduct usability testing sessions over the 2 month period, but this is another invaluable next step. Through conducting these sessions, we can witness the way users explore the application as well as identify any required design explorations.
Technical feasibility review
Designing on mobile devices, and iOS specifically requires knowledge on iOS development interactions (multi touch, gestures, etc) and one can leverage internal teams for this support. By understanding the technical feasibility of your designs, you can anticipate any development difficulties that may arise and propose design workarounds early in the process.
How do we ensure scalability?
Especially when designing for a product that is both B2B and B2C, this design needs to be scalable. With an organization chart, it's possible to have charts with 10 users or charts with 10 000 users. The design needs to consider scalability and how the experience will change based on your organization size and organization needs (configurability).
Explore accessibility decisions