Project Background

For this project, I was tasked with optimizing the messaging experience for Housecall Pro, a SaaS company for home service professionals.

Role:

Product Design Intern

Collaborators:

Product Manager, Senior Software Engineer, Product Design Manager

Duration:

4 months

The Process...

Research

Wireframing

Hi-Fi Mockups

Step 1 Research 🔎

To gather feedback on the current users' experience with the messaging feature, me and my product manager decided to conduct usability tests to identify user pain points.

Research Process

I conducted 3 usability tests over Zoom
I wrote a script with questions and tasks to administer the usability tests
My Product Manager and I then took the feedback to narrow down MVP(most viable product) features and presented the findings to stakeholders

User Issues ❌

Difficulty finding conversations
Unable to preview an image before sending
Unable to organize their conversations

Feature Changes ✅

Add a search bar to find conversations
Image populating a text box before sending
Ability to pin conversations

Step 2 Wireframes 〰️

Now that I had user feedback and got approval on the features from stakeholders, it was now time to create wireframes(low-fidelity designs).

After drawing inspiration from our competitors, I created wireframes to present to my product manager for approval.

Considerations:

Utilize atomic design process
Have the user interface be consistent with other experiences within the software

After making iterations from the suggestions of other product designers and a senior software engineer, I presented my wireframes to my product manager.

My Product Manager approved and I began making hi-fi mockup designs.

Step 3 Hi-Fi Mockups 〰️

I designed high-fidelity mockups based on original wireframes to demo search and preview image features (proposed features from research).

Considerations:

Utilize atomic design process
Have the user experience be consistent with other experiences within the software

Results:
Product manager approved. Search and Preview Image features effectively communicated to stakeholders and senior product members. The designs were ready for handoff to software engineers.

Project Background

The Process...

Research

Wireframing

Hi-Fi Mockups

Step 1 Research 🔎 To gather feedback on the current users' experience with the messaging feature, me and my product manager decided to conduct usability tests to identify user pain points.

​

Research Process

​​

I conducted 3 usability tests over Zoom

I wrote a script with questions and tasks to administer the usability tests

My Product Manager and I then took the feedback to narrow down MVP(most viable product) features and presented the findings to stakeholders

User Issues ❌

​​

Difficulty finding conversations

Unable to preview an image before sending

Unable to organize their conversations

Feature Changes ✅

​​

Add a search bar to find conversations

Image populating a text box before sending

Ability to pin conversations

Step 2 Wireframes 〰️ Now that I had user feedback and got approval on the features from stakeholders, it was now time to create wireframes(low-fidelity designs). After drawing inspiration from our competitors, I created wireframes to present to my product manager for approval. Considerations:

Utilize atomic design process

Have the user interface be consistent with other experiences within the software

After making iterations from the suggestions of other product designers and a senior software engineer, I presented my wireframes to my product manager. My Product Manager approved and I began making hi-fi mockup designs.

Step 3 Hi-Fi Mockups 〰️ I designed high-fidelity mockups based on original wireframes to demo search and preview image features (proposed features from research). Considerations:

Utilize atomic design process

Have the user experience be consistent with other experiences within the software

Results: Product manager approved. Search and Preview Image features effectively communicated to stakeholders and senior product members. The designs were ready for handoff to software engineers.

Step 1 Research 🔎

To gather feedback on the current users' experience with the messaging feature, me and my product manager decided to conduct usability tests to identify user pain points.

After making iterations from the suggestions of other product designers and a senior software engineer, I presented my wireframes to my product manager.

My Product Manager approved and I began making hi-fi mockup designs.

Step 3 Hi-Fi Mockups 〰️

I designed high-fidelity mockups based on original wireframes to demo search and preview image features (proposed features from research).

Considerations:

Results:
Product manager approved. Search and Preview Image features effectively communicated to stakeholders and senior product members. The designs were ready for handoff to software engineers.