Case Study: Professional Development Plan

The Professional Development Plan (Pro Dev Plan) app and website allows users to set goals and track progress over time.

My role

UX designer designing Pro Dev Plan website and app from conception to delivery. Conducting research, interviews, paper and digital wireframing, low and high-fidelity prototyping, conducting usability studies, accounting for accessibility, and iterating on designs.

A geometric logo for the Professional development plan website
PDP Logo White on a blue background

Project overview

Working professionals need assistance with getting organized and staying on track of their professional development goals. The Pro Dev Plan helps users input goals and track them over time as tasks are completed and progress is made.

A phone with the home screen of the professional development plan website

Research findings

I conducted interviews and developed empathy maps to create a better awareness of my users’ needs and design concepts. I also conducted a usability study to help identify user needs and to help shape the design and iterative process. 

 

Research showed that users were interested in an easy-to-use app/website that helps track goals and provides a running log of completed goals.

A computer monitor with the home screen of the professional development plan website
Usability Study parameters PDP.png
Usability Study insights PDP.png

Starting the design

I created a site map on paper to try and map out the website design prior to create a digital wireframe. I created paper sketches for both the web and mobile versions of the site. 

Black and white image of a site map with hand-drawn squares for the professional development plan website

Wireframes and low fidelity prototypes

The low-fidelity prototype connected the primary user flow of selecting a goal, tracking progress, and viewing completed goals.

PD Plan Home Mobile wireframe
Image of a low-fidelity prototype for the professional development plan website
Home - Desktop – wireframe.png

High-fidelity prototype

The high-fidelity prototype presented a more seamless user-flow and incorporated user needs and guiding users through the main user-flow of creating, tracking, and completing a goal. I only explore one of the website's functions, which was goal setting and tracking. 

High fidelity prototype for the professional development plan website
Home - Desktop – 10
Home - Desktop – 10

press to zoom
Home - Desktop – 11
Home - Desktop – 11

press to zoom
Home - Desktop – 6
Home - Desktop – 6

press to zoom
Home - Desktop – 10
Home - Desktop – 10

press to zoom
1/5

What I learned

I learned a lot about implementing user feedback and research in my designs. I’ve also learned about creating a responsive site that maintains functionality across screen sizes and devices.

Challenges and solutions

This project presented a challenge of scaling up from a mobile version of the product to a desktop version. I had to adjust the design and IA to accommodate the varying screen sizes.

Image of a woman and with a yellow background and text, including quotes, goals, and frustrations.
UX_prototype-removebg-preview.png