Portfolio - Dilypse

Dilypse

Helping small businesses manage their digital marketing

What We'll Cover

01

The Product

An overview of what the product is, who it's for, and what it does.

02

My Role

My role in the team and my key responsibilities as well as its evolution.

03

Redesign

I led a full redesign of the app, focusing on both UX and UI.

04

Main Feature Deep Dive

A closer look at the Campaign feature, including its evolution, mistakes, lessons learned, and how I improved it.

The Product

What is it?

Dilypse is a white-labeled SaaS product that simplifies digital marketing for small and medium businesses. It helps them get found on Google Maps and other platforms by boosting their SEO and their chances of being chosen with a complete Google Profile and positive reviews. Agencies can also offer it as a new product or service to clients.

My Role

When it started

UI Design for New Features

I collaborated with the CTO's wireframes, integrating the UI while providing UX enhancements. As the team's UX designer, I recognized the need to contribute beyond my initial role. I actively sought additional responsibilities by demonstrating expertise and proposing improved user flows where I saw opportunities.

Redesign

Redesigning the App

I worked on a full redesign of the app, improving both the UI and UX. I also managed the new design system and it's integration with our developpers.

Current Responsibilities

Discovery

I collaborate with the product manager to define problems, identify risks, and explore solutions that align with business goals.

Wireframing

Once the problem is clear, I create wireframes to test potential solutions quickly and communicate ideas with stakeholders with a focus on the solution rather than the small details.

User Testing with High-Fidelity Prototypes

After choosing a direction, I create high-fi prototypes for user testing. We also test value by introducing a step, like payments, when needed.

Delivery

I work closely with the dev team to ensure smooth handovers, providing clear documentation, prototypes, and spec sheets.

Other responsibilities

  • Maintain the design system in Figma and ensure it stays aligned with development.

  • Update the website.

  • Create sales assets, like presentations.

  • Present updates at town halls with the CEO and Product Manager.

Redesign

Key Issues

  1. A lot of our clients are blue colars that are always on the go, their laptop (if they have one) is not their main tool. They need to have access to the product anywhere they go, at the tip of their fingers!

  2. Sales team weren't proud to share it since it was hard to use for our clients
    The users we had were often complaining about the app being hard to use, this lead the sales team to not selling it as much. Some companies came up with interesting solutions. Some decided to offer a layer of service so that users didn't need to log in to the app, instead, they could pay the company to do all the work. This solution lead to new opportunities and a new persona, the agency.

A few solutions

  1. Make the app mobile responsive and later work on a dedicated mobile app

  2. Revamp the UI to make it more modern

  3. Make every action clear by having a dedicated action color

Results

  1. The new look made our team excited to sell and showcase the app.

  2. The feedback gave by clients to our account managers was also positive, they found it easier to use.

  3. Our onboarding person had less onboarding calls where he would do a tutorial.

Campaign Deep Dive

Campaign Deep Dive

Why this feature?

Why this feature?

The campaign feature is a key selling point that excites clients during sales calls. However, it was one of the first designs I worked on as a product designer, and it had some clear issues. Collaborating with our product manager, we delivered a new and improved version to the engineering team. This feature highlights the mistakes, my design process, lessons learned, and the improvements made.

The campaign feature is a key selling point that excites clients during sales calls. However, it was one of the first designs I worked on as a product designer, and it had some clear issues. Collaborating with our product manager, we delivered a new and improved version to the engineering team. This feature highlights the mistakes, my design process, lessons learned, and the improvements made.

Step 1

Step 1

Redesign

When transitioning from the old version to the new design, we decided to turn it into a step-by-step process and added a feature to import a list of contacts. This made it much easier for users to send requests to multiple clients at once.

The new experience

Add your contacts

Write your message

Review & Send

Step 2

Step 2

Learn

After launching the new app and introducing it to users, we noticed that while they praised the design for being simple, they often had the same questions and got stuck at the same steps. This taught us to trust user behavior more than their verbal feedback.

Here's how most of our conversations would go:

Add your contacts page

[Client]
What's import a file, do I need to click on it? what am I supposed to do?

[Us]
No don't worry, you can add your contacts manually, this is in case you want to import a list of contacts

[Client]
Ah okay, that's cool

Write your message page

[Client]
Now I add a link? What link?

Oh can I type my message here or use a template?

[Us]
Yes you can write your message or chose a template, if you want, you can click on the Insert link button to add a link that your contacts can click on to leave a review. Otherwise, they still have the two buttons they can click

[Client]
Ah okay, and what does review filtering do?

Other concerns

Certain clients and agencies were wandering what the results of their campaigns are.

Did anyone receive it? Did anyone click on it?

Hypothesis of why we ran into those issues with the experience.

Step 3

Step 3

Ideate, Prototype & Test

I always begin by clearly defining the problems and opportunities while keeping a focus on business objectives. This not only guides decision-making but also builds empathy for our users when presenting solutions to stakeholders and the dev team.

Brainstorming and Wireframing

I start with brainstorming to get ideas flowing, then quickly move to wireframes. The advantage of wireframes is their speed and simplicity, allowing the team to focus on the solution without getting caught up in UI details or wording.

After discussions with the dev team and stakeholders about our potential solutions, we chose a direction for testing and reached out to clients to schedule calls.

Testing with users

I designed high-fidelity mockups to test with users and gather insights about usability and value.

Finding users

We targeted two types of users for testing:
  1. First-time users of the new version, to test the overall experience.
  2. Existing users, to test both the new experience and the campaign tracking feature to see if it met their needs for understanding results.
Finding active users for testing was challenging since there were no usage metrics in the app at that time. To overcome this, my product manager and I manually checked logs from the tools we used to send campaigns. By doing this daily, we were able to identify a range of users, from highly active to casual, and gain valuable insights into how they were using the product and the clicks they were generating.

Test Results: New Experience

Users navigated the first page much faster, and their feedback shifted to comments like, "Oh cool, I can add a list to send it to multiple clients?"

Building on this success, I added a rule to the design system: establish clear button hierarchy, ensuring only one primary button and ranking other actions by importance.

Most users completed the form and sent it without needing to ask questions. A few clicked the link button with visible curiosity and understood its purpose afterward.

Test Results: Campaign Tracking

Users found the campaign tracking feature "nice" but weren't particularly engaged, as their main goal was to send out as many campaigns as possible and hope for the best. They were satisfied with the process since it didn’t require much of their time.

Agencies, on the other hand, were excited about the feature. It allowed them to prove the service was completed and share tangible results with their clients.

Similar to the first page, most users were neutral about the campaign tracking feature, though some were pleased to see which contacts hadn’t clicked so they could resend requests.

Agencies were enthusiastic about the feature, particularly the ability to see the timing of sends. This insight inspired them to analyze other campaigns and optimize send times. They also identified issues, like incorrect phone numbers.

Users and agencies both asked how they could see what was sent, wanting to compare content performance. In response, we added a preview , which made them happy.

Step 4

Step 4

Deliver

The final step is delivering the design files to the dev team. Clear communication is essential for a successful handoff. I include:
  • Begin with personas and the problems we aim to solve.
  • Include prototypes.
  • Detail every state and potential error.
  • Discuss the design with the dev team their understanding and questions.
  • Add a spec sheet and notes if needed.

Let's work together

Nicolas Veilleux

nick@latersmedia.ca

Follow me

Youtube

Instagram

X

Let's work together

Nicolas Veilleux

nick@latersmedia.ca

Follow me

Youtube

Instagram

X

Let's work together

Nicolas Veilleux

nick@latersmedia.ca

Follow me

Youtube

Instagram

X

Let's work together

Nicolas Veilleux

nick@latersmedia.ca

Follow me

Youtube

Instagram

X