ROLE
Product Design Intern
DURATION
3 months
DISCIPLINES
Product Design, User Research, User Interface, Interaction Design, Mobile Design
In Summer 2023, I interned at Justworks, a tech company that aims to level the playing field for small businesses. I designed an end-to-end project, seamlessly integrating a mobile directory into their new platform, enhancing internal communication for employees.
Additionally, I built design components for a smooth directory integration into the company's mobile product ecosystem.
Justworks - Mobile Directory
CONTEXT: GROWING PAINS OF A GROWING BUSINESS
As a growing company, Justworks offers a simple and friendly platform helping businesses “manage, grow & run easily.” Justworks understand the growth pains of a growing company - onboarding new employees, streamlining communication, and ensuring all part of their company is well integrated and structured. This project focuses on streamlining communication between all employees.
PROBLEM: WHY MOBILE DIRECTORY?
Justworks offers a desktop directory that helps employees find the most important information about their co-workers. However, this information is not accessible as we realize employees are not always on their laptops. Having a mobile directory solves/help with:
- Efficient Communication: streamlines communication within a company by providing quick access to contact details reducing time and effort.
- Accessibility: employees can access important contact information anytime, anywhere, making it easier to reach colleagues especially when working remotely or on the go.
- Integration: Mobile directories can integrate with other communication tools and systems.
ULTIMATELY
How might we make and design our directory feature to be most relevant to mobile users?
EXPLORING EXISTING DESKTOP DIRECTORY
LIST PAGE
- Sorted by alphabetical order on departments
- “No Department” is the section department bc of alphabetical order
- Should sections that are “no department” be following alphabetically even though it is not as relevant as other departments?
- Sort by ascending and descending order for Names, Department, Office, Manager
- In the search bar “find people” can only search names, but not departments.
PROFILE PAGE
- Name, pronouns, role
- Profile Picture
- Work & Mobile phone numbers
- Birthday, Start Date, and Office are grouped
- Manager
- Direct Report
- Top corner, “Text me __'s contact info”
ROUND 1: USER RESEARCH
GOAL
Identifying user preferences, dislikes, and opportunities for enhancing existing directory features is essential. This process allows me to tailor and optimize features to better meet the needs of mobile users.
Conducted 7 sessions of unmoderated research on employees at companies between the sizes of 10 to 50 total employees.
List page prototype
Detail page prototype
FINDINGS: WHAT DIRECTORY FEATURES STAND OUT MOST AND BEHAVIORS?
- Information a person would need to know about their coworkers are the “basics”: name, role/department, contact info, manager
- People use a phone directory for easy access and fast/direct communication
- Most would use the search bar exclusively to find someone in the directory except when they 1. don't know who they are looking for 2. don't know how to spell a person's name
As long as there is a direct line of contact, most deem that as the most important information in a directory.
the “text me ___'s contact info” is a well liked feature from everyone
a directory is like having everyone's “digitalized business card”
“all you really need to know is how to contact them”
people would use the phone directory when they are out of office/away from their desk
people would use the phone directory when wanting to call someone so they can just click on someone's phone number and dials them on the spot
when looking for someone (i.e someone in a middle of a long list) one would most likely use the search bar
most would use the search bar exclusively and is their “go-to” when needing to find a specific person
want: being able to sort through the whole directory of people instead of just people in a certain department
ITERATIONS OVER ITERATIONS...
List Page
LIST ORGANIZATION
PROFILE ROW
The list item for an employee should contain their picture, name, and job title. If they employee does not have a picture, then they should have a monogram with their first and last initials. This is consistent with the web version of the directory.
WITH PROFILE PIC
WITHOUT PROFILE PIC: MONOGRAM
SEARCH FUNCTION
INFINITE SCROLLING
While the endless possibilities exist, loading all employees simultaneously poses a threat to user experience, potentially causing sluggishness or lag within the app. To tackle this issue, I collaborated closely with our engineering team to pinpoint the optimal solution.
For the initial page load, we've strategically chosen to load the first set of 50 employees. As users navigate through the list, and they approach the last 25 names displayed, our system initiates the loading of an additional 50 names. This sweet spot ensures that users experience a smooth and uninterrupted browsing experience, maintaining a harmonious balance between usability and performance.
Profile Page
The profile page mirrors the structure of the list page, with information presented in distinct cards—a visual element that maintains consistency throughout the entire mobile app.
MANAGERS & DIRECT REPORTS
NO DIRECT REPORTS & MANAGER
DIRECT REPORTS ONLY
MANAGER ONLY
BOTH
COMPONENTS IN USAGE OF DIFFERENT STATES
In the process of refining the user experience, various scenarios were taken into account, including cases where certain information, such as birthdays or pronouns, can be hidden, or situations where an employee lacks direct reports or both a manager and direct reports. To enhance the design of these unique states and promote efficiency, I developed a comprehensive design system. This system not only streamlines the design process for these scenarios but also provides a versatile set of design components that can be leveraged for future use.
EMPLOYEES CAN HAVE UP TO THREE CONTACT NUMBERS
EMPLOYEES CAN CHOOSE TO HIDE THEIR BIRTHDAY
TECHNICAL CONSTRAINTS & LESSON LEARNED
🤓
UNDERSTAND EXISTING DESIGN ECOSYSTEMS
A deep understanding of the existing framework is fundamental for achieving a seamless integration of new features and designs.
🚥
NAVIGATING TECHNICAL CONSTRAINTS
Challenges like hidden states taught me how to creatively design within constraints while maintaining user-friendliness and functionality.
🧑🏻🤝🧑🏻
COLLABORATION WITH ENGINEERS
Collaborating closely with engineers highlighted the profound impact that our design decisions have on the development process.
🔍
FEEDBACK & RESEARCH DRIVEN ITERATIONS
Feedback from cross-functional teams, especially engineers, during design reviews.allowed me to balance feasibility, desirability, and viability, ensuring that our designs not only met user needs but could also be implemented effectively.
A special thank you to....
The mobile team within Justworks as well as my mentor and the product design department for guiding me through the project step by step! And a big thank you to New York City for all the fun times I had over the summer!
Let's Chat!