Workfolio Directory

PRODUCT DESIGN

Workfolio Directory is an all-in-one staff directory, profile management, and client microsite solution that simplifies creating and administering any type of directory. Workfolio powers directories for consulting and coaching firms, law firms, universities, medical organizations, and more.

The project was to create a responsive design for the platform and to build a more mobile-friendly application. A conceptual law firm was used as the main demo for potential clients.

View demo site

TOOLS

Adobe XD, Figma

TIMELINE
March - May 2019
Directory_Mockup.jpg

The Challenge

Our goals for Workfolio Directory were to create a simple user interface and experience for clients of different industries. Workfolio Directory provides everything a company needs to create, customize, publish, and manage their firm’s directory. We researched existing directories to see what works and what doesn’t work.

My Role

I led the design of the Workfolio Directory user experience and worked alongside three engineers/developers and one Creative Director.

Along with design, I work with the onboarding team. I create a Trello board for each client to assign tasks for my team and to set project timelines. I work with each client to customize their Workfolio Directory page. It is my job to gather the company’s logo, accent color, and photo assets to make the Workfolio Directory UI work well for their overall brand.

Use Cases

There are many different industries that use Workfolio Directory including consulting and coaching organizations, law firms, medical and healthcare companies, and schools. Understanding these different audiences determines how their Directory will function.

User Personas

I created user personas to better understand what each client from different industries is looking for in a directory.

schools_persona.png
lawyers.png
doctors.png
coaches.png

Responsive Design and API Website Integration

The Workfolio Directory user interface has been designed to power a directory on a website behind the scenes via API.

Any changes made to members' profiles in Workfolio Directory will automatically be reflected on the client’s website.

Wireframe

Wireframing and Prototyping

I used Adobe XD to design each screen and used the prototyping tool in Figma to get a better sense of the flow within the mobile app. This helped define the user journey within the product.

Final Result

The final result was a mobile responsive design experience that was simple and straightforward.

View Prototype

Organizations that use Workfolio Directory

Previous

Workfolio Microsites | Product Design
Next

Candidate Portal | Product Design