Redesigning the import contacts process to be more intuitive & seamless

The main challenge was to simplify the contact import process for non-tech small business owners, who are not familiar with marketing automation tools and do not have the time to learn everything about marketing. We identified that our target personas had problems associated with the complicated process of manually importing their contacts into our system, and were looking for a more streamlined solution that would enable them to import contacts quickly and easily.

To solve this challenge, I worked with my team to develop features that would allow users to import contacts into our system in a seamless and intuitive way, using integrations to multiple platforms, as well as CSV upload and manual upload (copy & paste). This involved developing a user flow that was easy to follow, as well as wireframes and high fidelity screens that were optimized for usability. We also worked on creating a design system that was consistent with our brand identity, and ensured that the final solution was scalable and easy to maintain.

My design process is focused on user-centered design principles and involved several stages of development, including research, ideation, design, prototyping, and user testing. I started with research to understand our users' needs and pain points, and used tools like user interviews, surveys, and user behavior tracking to gather insights. This information was then used to inform our ideation process, where we brainstormed ideas and concepts for the solution.

Research was a key part of our design process, as it allowed us to gain a deep understanding of our users' needs and pain points. We performed user interviews, surveys, journey sessions, and user behavior tracking to gather insights, and used this information to inform our design decisions.

I collaborated with other designers, developers, and product managers to ensure that we were all on the same page and working towards the same goals. This involved organizing regular meetings to discuss our progress, as well as being open to feedback and constructive criticism from one another. By working closely together, we were able to identify potential roadblocks and find solutions to them quickly, which helped to keep the project moving forward.

In the ideation stage, I used the insights gained from our research to come up with a range of ideas for how we could improve the contact import feature. I generated various concepts and narrowed them down to the most promising ones. I did some card sorting to help determine feature priorities, sketched out low-fidelity wireframes and user flows, and shared them with the team for feedback. We discussed each idea and selected the most promising ones to move forward with.

I created detailed user personas that represented our target audience. These personas helped us to keep the user's needs and goals in mind as we continued to design and develop the feature. The personas were based on data we gathered during our research, including demographic information, behavior patterns, and pain points. We used the personas as a reference point throughout the design process, constantly asking ourselves if the features we were developing would meet the needs of our target audience.

The user journey session allowed us to map out the entire user experience, from the data location stage to the final import stage. We identified each touchpoint along the way and mapped out the user's emotional state at each point. This exercise helped us to identify areas where the user experience was less than ideal and where we could improve the overall flow of the platform. I developed a user journey map that visualized the steps a user would take to import their contacts. The journey map helped us to identify pain points and areas where we could improve the user experience. By looking at the user's journey as a whole, we were able to see the big picture and make informed decisions about how to improve the contact import feature. We also used the user journey map to prioritize the features that we would include in the first version of the product.

As part of our design process, we conducted extensive competitive analysis to gain insight into how other marketing automation systems handled the import contacts process. We analyzed a range of competitors to understand their features, functionalities, and overall user experience. Through our analysis, we were able to identify best practices, common pain points, and opportunities for improvement.

We paid close attention to how our competitors handled the import contacts process. We looked at factors such as the ease of use, the speed of the process, and the overall level of automation. We also analyzed the user feedback and reviews to gain a better understanding of how our target users felt about the process. By doing this, we were able to identify areas where our competitors were falling short and where we could differentiate ourselves.

Our analysis revealed that many of our competitors had complicated and time-consuming import processes that required extensive technical knowledge. This was a significant pain point for our target users who were non-tech small business owners looking for an intuitive and straightforward solution. As a result, we made sure that our import process was streamlined, automated, and required minimal technical knowledge. By conducting a thorough competitive analysis, we were able to identify opportunities for improvement and create a product that provided a better user experience than our competitors.

Once we had a clear understanding of the user journey, I began creating detailed user flows which I would then convert into wireframes for each screen in the process. I used FigJam to create the user flows, and then created the wireframes using Figma, these wireframes helped to refine the user flow and get everyone on the same page before we moved on to creating the high-fidelity screens. During the design stage, I also created a design system to ensure that the design was consistent across all screens.

With the wireframes finalized, I developed a design system to ensure consistency across all screens and components. The design system included guidelines for typography, color, icons, and other design elements. By having a consistent design system, we could ensure that the user experience was seamless and that users could easily navigate the contact import feature. The design system was shared with the entire team, including developers who converted in into Angular.js components.

One of the most important aspects of the design stage was the creation of high-fidelity screens that accurately reflected the final product. We made sure to use consistent branding and design elements throughout the screens to create a cohesive experience. The screens included features such as the ability to import contacts from various sources, preview imported contacts, and easily clean and organize contact lists.

The design team worked closely with the development team to ensure that the screens were technically feasible and that the design system could be implemented without issue. We also made sure to gather feedback from stakeholders and target personas throughout the design process to ensure that the final product would meet their needs and expectations.

With the design system in place, I created a functional prototype using Figma to simulate the user's experience of importing their contacts and completing the onboarding process. This prototype was extensively tested internally to ensure that the process was intuitive and easy to follow, and any issues or inconsistencies were addressed before the final prototype was presented to the development team for implementation.

To ensure that the final product met the needs of our target personas and was easy to use, I conducted extensive user testing using a tool called Maze.com. I created user scenarios and tasks that mimicked real-world situations and tested the prototype with a diverse group of participants. The results of the user testing were analyzed and used to make further improvements to the design, which were then incorporated into the final product.

Scenarios & Tasks

As we moved into the user testing phase, we began by creating a series of scenarios and tasks that would allow us to test the usability of the import contacts process. These tasks were designed to mimic real-world situations that our target personas might encounter when trying to import contacts into our marketing automation CRM system. We made sure to create tasks that would test all aspects of the import process, from selecting the right source to cleaning and organizing imported contact lists.

Setting up the test

To conduct user testing, we used a tool called Maze.com, which allowed us to create and run live tests with our target personas. We worked with our client to recruit a diverse group of small business owners who were representative of our target personas. We then set up the test within the Maze platform, which included creating the tasks and scenarios, selecting the appropriate screens to test, and setting up the necessary data collection tools.

Running the live test

Once the test was set up, we ran it with our selected group of users. We closely observed their actions and behaviors as they completed each task, taking notes on any issues or pain points that arose. We also collected quantitative data on how long each task took to complete and how many errors were made. Throughout the testing process, we encouraged users to think aloud and provide feedback on their experience.

Test Results

After the testing phase was complete, we analyzed the data and feedback we had collected to identify any issues or pain points with the import process. We found that some users struggled to understand the different import sources and how to select the correct one. Others had difficulty previewing and cleaning imported contact lists. Based on this feedback, we made several refinements to the design and user flow, such as adding more detailed instructions and clarifying the selection process for import sources.

Overall, the user testing phase was crucial to ensuring that the import contacts process was easy to use and met the needs of our target personas. By gathering feedback directly from users, we were able to make informed decisions and refine the design to create a product that truly met their needs.

Key Findings

Once the prototype was finalized, I worked closely with the development team to ensure that the design was implemented accurately and with the user experience in mind. I provided detailed design specifications and guidelines, as well as ongoing support and feedback throughout the development process to ensure that the final product was consistent with the design vision and met the needs of our target personas.

Looking back on the project, I am proud of the work that was done to simplify the process of importing contacts into the Referrizer system. The final product met the needs of our target personas, and was easy to use and understand. We received positive feedback from users and saw an increase in user adoption rates. This project was a great example of how collaboration between design, development, and product management can result in a successful product that meets the needs of the user and drives business results.

What I Learned

What I Would Do Differently