Project: ihelpchat.com
Summary
iHelp is a CRM software through WhatsApp. The project has been around since 2022, and when I joined in July 2023, I noticed several business opportunities for the product, such as: developing features that would add value to the user, redesigning the product as a whole, and optimizing the product based on user feedback and digital accessibility.
I played a key role in the company's product development, from user research, interface development, to best practices in consolidating the internal product development process.
Throughout my time with the team, we saw improvements in relevant company KPIs that are intrinsically linked to product usability and user experience, such as:
NPS - 9.41% increase in Net Promoter Score (NPS), a metric that measures how likely a customer would recommend a product or service to someone else.
User base - 18.95% increase in the iHelp user base. Thanks to the development of new features, constant product improvements, and increased NPS.
Learnings
During 9 months contributing and working on iHelp's product development, I learned very important things, such as:
Cohesion - One of the challenges in working on a large product is maintaining design cohesion. There are times when we want to create a new design solution for a feature, when we probably already have something ready to adapt.
Organization - Process documentation, relevant information, and clear objectives are extremely important for delivering on time with the required quality.
Alignment - By participating in a multidisciplinary team, I understood how important it is to be aligned with expectations and also clarify my own expectations. This contributes to a comfortable, efficient, and dynamic work environment.
UX Research
The UX Research process was part of any new iHelp project. It was crucial to ensure that the final result would be cohesive, meet our user's expectations, and align with the business model. The process included:
Desk Research:
- Understanding User Flow - The first step was to identify how a particular feature fit/would fit into the user flow.
- User Research - After User Flow, understanding the user's positive points and pain points was crucial to mitigate risks and identify opportunities. To understand the user, we had the following process:
- - User interviews - speaking directly with the user and gathering data from their responses;
- - UX data analysis - We used tools that measured how the user interacts with the product. Tools like Google Analytics measured which features the user accessed the most, heatmaps (where the user clicked the most), usability time, etc.
- Checking previous documentation - Everything was documented in ClickUp, so it was very useful to check documents from similar projects to what we were developing.
- Benchmarking - Researching direct and indirect competitors and their relationship with the audience contributed to business decision-making in the product.
Discovery - In this stage, there was an alignment meeting on which business opportunities we would explore. In this meeting, along with the dev and marketing team, the features we would develop and the motivation behind them were presented.
User Flow
In this stage, the plan for project development would be outlined, considering the goal, collected data, and features.
Brainstorming - A meeting to define the main points of the user flow and how each feature of the flow would look.
User Flow Documentation - Documentation of the flow to start developing the wireframes.
Alignment - A meeting to align expectations and set the delivery deadline based on the user flow documentation.
Develop User Interface (UI)
The final stage of project development involved using the Scrum methodology and Sprint in project development. The stages are listed below:
Wireframes - Based on the user flow documentation, the initial wireframes of the features would be developed in Figma.
- Alignment - With the wireframes ready, a meeting was held to validate how the project features would look. If changes were necessary, they would be made and presented in the alignment meeting again. After approval, the project would move to the "In production" stage.
In production - Using the wireframes as a base, the development of features and the complete user flow of the project would begin.
- Design system - It was crucial to follow the project's design system to maintain cohesion.
- Design decisions - All design decisions in UI development (colors, typography, information architecture, layout, storyboard, etc.) were made based on UX best practices, accessibility, UX Research data, and User Flow.
- Conclusion - The project would be transferred to the approval stage by the PO/PM and Tech Lead.
Awaiting approval - A presentation meeting of the project features and user flow. The PO/PM and Tech Lead would analyze and provide feedback on the final result. If changes were needed, the project would go back to "In production" until approved and then sent to the defined flow stage.
Flows - This was the stage of "handing over" to the programmers. It was crucial to adapt the delivery with Dev Experience in mind, meaning the file needed to be organized and intuitive for programmers to understand what to develop. This was an environment in Figma for programmers to work on the project.
- Presentation - A meeting between Tech Lead, Front-end team, PO/PM, and the Product Designer (myself) to explain the flow and present all project features.
- Alignment - Expectations and priorities in the final product were aligned between the product team and programmers.
- Delivery - We delivered the project to the programmers and monitored the development progress.
Live - When the project was accessible to users, the project that was in progress would move to the Figma file "Live," which served as a repository.
- Progressive rollout - The project was delivered gradually to the user base. For example, it was first shown to 5% of users, then to 10%, then to 20%, and so on. At each stage of progression, we analyzed UX data, conducted user interviews, and depending on the research results, optimizations and adjustments were made to the project.
Skills
Tools
- Figma
- ClickUp
- Miro
- Scrum Methodology
UI Design
- Design Principles
- Design system
- Wireframe
- Responsive Design
- Tailwind Framework
UX Design
- UX Research
- Design Thinking
- Emotional Design
- User Flow
- Usability Testing
- User Research
- UX Data Analysis
- Storyboard
- Accessibility Design
- Hierarchy Architecture Information
- Taxonomic Architecture Information
- Dev Experience
