My Roles
With PathIQ, my projects were visual design heavy. I work remotely, and while PathIQ is a US-based company, other freelancers work with PathIQ like myself from around the world.
About PathIQ
PathIQ is part of the Plus Company which also includes Cossette which is a big name in the Creative Marketing space. I started working with PathIQ last 2020 when it was still new and being built up.
About PathIQ
PathIQ is part of the Plus Company which also includes Cossette which is a big name in the Creative Marketing space. I started working with PathIQ last 2020 when it was still new and being built up.
User Experience Design
- By applying the UX Fundamentals I learned from my UX Design Diploma, I made creating the campaigns and projects plus the design handovers easier than I previously did before.
- Part of my role was to supply feedback for the projects before-during-and after, do some UX-related research, and also pitch the idea until we settle on the best path forward.
- The next part is to review the designs I make to ensure that they're all built up to spec.
User Interface Design
- I was in charge of the iconography, look, and visual feel of the website and one of their lead generators which they call the Omnifunnel.
Visual Design
- For their events and other marketing campaigns, they would usually hire me for one-off projects to make their presentations, brochures, e-books, and other products.
Redesigning the Website
The original website design was not optimized for their brand and was still a work in progress when I was handed the project.
With PathIQ, I normally get a document of the scope of the project, and I take a day or two to understand what needs to be done before I reach out for a meeting to clarify the other details that are necessary for the project.
They wanted to use the website as a corner piece for all of their other marketing campaigns, and since websites tend to be one of the biggest sources of leads (paying customers), then they wanted to make sure that it spoke with the brand they wanted to represent.
So the website, in a sense, would dictate the type of style and design for the rest of the pieces they wanted to create.
Here's what the previous website looked like.
With PathIQ, I normally get a document of the scope of the project, and I take a day or two to understand what needs to be done before I reach out for a meeting to clarify the other details that are necessary for the project.
They wanted to use the website as a corner piece for all of their other marketing campaigns, and since websites tend to be one of the biggest sources of leads (paying customers), then they wanted to make sure that it spoke with the brand they wanted to represent.
So the website, in a sense, would dictate the type of style and design for the rest of the pieces they wanted to create.
Here's what the previous website looked like.
Suggestions and Comments
I took some time to look at what parts of the website I liked and didn't like. I've asked around for mentors on how they do this kind of evaluation and they all said it does tend to be a bit subjective but also based on what you learned and from experience.
People normally come to UX designers for feedback on what looks good, what's usable, and what isn't. Then it's a matter of backing up that information with actual data or research that is almost readily available with a google search on certain design patterns. My favorite source is N/N however I also regularly read up on articles posted in Medium and other places where they tend to share knowledge like webinars, books, or free online courses.
Long story short, I do enjoy looking up things that I'm not familiar with but most of the time, I base it on two things experience and lessons.
People normally come to UX designers for feedback on what looks good, what's usable, and what isn't. Then it's a matter of backing up that information with actual data or research that is almost readily available with a google search on certain design patterns. My favorite source is N/N however I also regularly read up on articles posted in Medium and other places where they tend to share knowledge like webinars, books, or free online courses.
Long story short, I do enjoy looking up things that I'm not familiar with but most of the time, I base it on two things experience and lessons.
Proposing the Style
Since I was given creative agency to do whatever I want as long as it fit the color palette of the PathIQ logo, I went ahead and drafted an initial style and experimented on different photo treatment options.
I also played around with different colors that can be further added to their brand. To speed up the process, because they didn't want to pay for illustration, we used a ready-made library that can be easily recolored to create a cohesive look for the rest of the website illustrations.
I enjoyed conceptualizing how the brand would look, which is a combination of people in various business settings and cartoon-like illustrations. Then it was a matter of creating the first draft, getting that approved, and then implementing the final version. |
The Website Update
Prototype
I created a prototype and made a demo for the team. I was the only designer working on this project and there was a team of developers in charge of making sure this was developed on time.
I guided them through the expected animations of each page. For this project, there weren’t a lot of complex interactions so they didn't ask me for a wireframe of the expected behavior for both Mobile and Desktop since the website was built to be responsive.
After two weeks of development, they shared with me their progress and asked me to do a QA test for the design which I did so we can fix the issues that came up.
I guided them through the expected animations of each page. For this project, there weren’t a lot of complex interactions so they didn't ask me for a wireframe of the expected behavior for both Mobile and Desktop since the website was built to be responsive.
After two weeks of development, they shared with me their progress and asked me to do a QA test for the design which I did so we can fix the issues that came up.
Omnifunnel Project
The next project is to automatically generate leads through a form and match up people looking to have insurance. The development team was building a tool that users can use to easily generate different types of leads with the same type of structure. PathIQ wanted to build something for an existing market, test that out, and replicate it for other markets.
My task is to redesign and essentially redefine the way that they were gathering forms and matching up people. We took a look at the competitors in the space and what they wanted was something similar to a step-by-step guided form that always shows the user how far along they are in the process of filling up their details.
My task is to redesign and essentially redefine the way that they were gathering forms and matching up people. We took a look at the competitors in the space and what they wanted was something similar to a step-by-step guided form that always shows the user how far along they are in the process of filling up their details.
During the meetings, I would take notes and document the parts we liked and didn't like.
So my task was to put together an experience that was similar to the best features that they liked and still ensure that I was applying the best UX standards for form design. The next part was taking a look at their existing brand assets that could be repurposed for the look and feel of the Omnifunnel. |
Omnifunnel Brand Study
They already had an existing website managed by PathIQ so my goal was to build on that. They currently don't have a brand guideline built for each of their existing products so that responsibility fell on me every time I was creating something new. We wanted to make something similar to their MoneyWizard brand.
From then on, I selected which brand tokens I'll be using and started designing once I finalized all the necessary details. For this project, there was a lot of back and forth since there were two teams of developers from different parts of the world plus a different project stakeholder.
I find that it's important to ensure everyone in the team that's working on the project is always aligned on what needs to be done to ensure deadlines are met.
I find that it's important to ensure everyone in the team that's working on the project is always aligned on what needs to be done to ensure deadlines are met.
Building the Mock-ups
The budget for this project was a factor so I couldn't create a fully working prototype since those always took time. In the end, I created mock-ups for desktop and mobile views.
During the design phase, I read up on form design books and posts online regarding what is the best way to ensure we made the forms intuitive enough for the users to fill up.
I also paid attention to loading states because you sometimes don't get all the information right away and the loading states give the illusion that something is happening in the background for a user that normally doesn't have a very long attention span - 8 seconds!
During the design phase, I read up on form design books and posts online regarding what is the best way to ensure we made the forms intuitive enough for the users to fill up.
I also paid attention to loading states because you sometimes don't get all the information right away and the loading states give the illusion that something is happening in the background for a user that normally doesn't have a very long attention span - 8 seconds!
Wireframe
At this point, the project manager was already developing the tool from the back end since they wanted to move fast.
I created a wireframe and scheduled a handover call to the developers however as with any project, things can slightly go off course. Certain schedules didn’t match, and the developers all said it was good to go without the handover. So, I believed it was all good. Lesson learned, now I know that at the very least unless the interaction is very simple, a handover meeting is a must. It's not the developer's fault or anyone's fault since at the end of the day we are working towards the same goal and the project was completed on time and without much trouble anyway.
I created a wireframe and scheduled a handover call to the developers however as with any project, things can slightly go off course. Certain schedules didn’t match, and the developers all said it was good to go without the handover. So, I believed it was all good. Lesson learned, now I know that at the very least unless the interaction is very simple, a handover meeting is a must. It's not the developer's fault or anyone's fault since at the end of the day we are working towards the same goal and the project was completed on time and without much trouble anyway.
I was working on a time crunch since this was a deliverable needed in a short period while I was also doing my day job. I don't normally sacrifice the results, so I communicate very clearly if something needs more time. All in all, the project was a success so far, and PathIQ has always communicated with me that the results of my designs are always amazing and their clients love it. (I know at this point without seeing actual usage data that's practically vanity but in this case, my client is PathIQ and if PathIQ is happy and they say their clients are happy then I can leave it at that. It's nice to hear though!)
After the product was completed, they asked me to do a QA test which I did as well. I checked if all the validations I noted down in the wireframe were followed, checked the design consistency, and reported any bugs that I noticed.
After the product was completed, they asked me to do a QA test which I did as well. I checked if all the validations I noted down in the wireframe were followed, checked the design consistency, and reported any bugs that I noticed.
Other Design Projects
Outside of that, they capitalized on my design experience for presentations, print, and events.
Most of my print projects use the tool Canva which allows any person from the team to edit a design without needing access to Adobe suite. I realize that all the things I make with Illustrator, InDesign, or Photoshop can be easily remade into Canva. Below is an example of one of the brochures I made for them which is something they usually send out during events or when they're doing their sales calls.
Most of my print projects use the tool Canva which allows any person from the team to edit a design without needing access to Adobe suite. I realize that all the things I make with Illustrator, InDesign, or Photoshop can be easily remade into Canva. Below is an example of one of the brochures I made for them which is something they usually send out during events or when they're doing their sales calls.