"ECM" is an application designed to streamline the creation, scheduling, and analysis of email marketing campaigns for various clients. It allows users to craft personalized email content, segment audiences, manage contact lists, and automate campaign workflows.

The company aimed to redesign an in-house email campaign manager application with not only a trendy design but also with upgraded functionality.

The application was expected to support:

• Creation and editing of Custom Audiences
• Score enrichment based on behavior and engagement
• Scheduling of audience results
• Management of: Accounts, Target Account Lists, Excluded Account Lists, Ideal Customer Profiles
• Setting configurations for: Industry, Location, Buyer Team, Intent Settings (Triggers, Lookback Period, etc.)
• Audience Review — Included & Excluded Accounts and Contacts
• Retargeting Segment setup
• Scheduling & Summary Generation

My Role & Responsibilities

I was involved throughout the entire lifecycle of the project — from ideation to deployment. My contributions included:

• Supporting the initial wireframing process with the team
• Designing high-fidelity mockups in Adobe XD
• Developing the frontend using HTML, CSS, SASS, JS, Jquery, Bootstrap, Datatables etc.
• Ensuring responsiveness, usability, and seamless UI/UX consistency

Tools & Technologies Used

• Miro: for rough ideas, wireframes, and storyboarding
• Adobe XD: for mockups, UI design, and prototyping
• HTML, CSS, SASS, Bootstrap: for page structure and custom styling
• Javascript, JQuery: for front-end fuctionality
• Datatables: for display of tablular data
• SVN: for repository handling

Design & Development Approach

1. User Research
The users were internal stakeholders, and their needs were captured through UX research techniques like interviews, observations, and feedback loops.
2. Ideation & Planning
Collaborative sessions with stakeholders helped shape the product vision. We created:
• User Personas
• User Journey Maps
• Defined Goals for each module and user interaction
3. Design & Prototyping
• Initial wireframes were created using Eraser
• Final mockups and interactive prototypes were built in Adobe XD to reflect real-use scenarios
4. Development & Testing
• Translated Adobe XD designs into a fully functional frontend using ReactJS and MUI
• Integrated REST APIs to dynamically pull and manipulate data from AWS
• Performed smoke testing followed by a QA handoff
• Resolved bugs and conducted sanity testing before moving to UAT
5. Implementation & Launch
• Deployed the application to the production environment
• Conducted post-deployment testing to ensure system stability
6. Iteration & Feedback
• Post-launch user feedback was gathered and documented
• Insights are being planned for implementation in upcoming development phases